Awesome MCP Apps

\*\*模型上下文协议（MCP）应用程序\*\*的精选应用程序、UI组件和资源列表。

顶级MCPApps的集中目录。 维护模型上下文协议应用程序和生态系统的标准。

什么是MCPApps？

MCPApps 是为最终用户实现模型上下文协议的应用程序和接口。

当 MCP服务器 充当暴露数据和工具的后端“插件”， MCPApps 是前端体验，如桌面代理、IDE和专用工作流，它们使用这些服务器来提供上下文感知智能。

此列表包含了 应用程序 和那个 UI组件 （MCPApps UI）用于构建它们。

MCP-UI现在标准化为MCPAPPS-在此处阅读更多关于MCP-UI的信息-https://mcpui.dev/

模型上下文协议（MCP）是一个开放标准，使AI模型能够与您的数据和工具进行交互。它提供了一种通用的方法，将人工智能助手连接到数据库、定制API和业务应用程序等系统。

🚀 MCP新手？ 看看 官方文件 开始吧！

https://github.com/user-attachments/assets/7180c822-2dd9-4f38-9d3e-b67679509483

📂 分类

按类别浏览MCPApps：

🌟 特色MCPApps

展示MCP APPS在生产或创意环境中的强大功能的应用程序。

• 发布在r/MCP服务器中(https://www.reddit.com/r/MCPservers/)您的应用程序和社区内的受欢迎程度-我们将在此处展示您的应用。

🧩 MCPApps（用户界面/组件）

标准化 MCPApps UI组件和前端库。

• *\[在此处添加组件\]*

⚡ 快速示例（将很快更新！）

服务器端 -创建交互式资源以返回MCP工具结果：

TypeScript

import { createUIResource } from '@mcp-ui/server';

const interactiveForm = createUIResource({
  uri: 'ui://user-form/1',
  content: {
    type: 'externalUrl',
    iframeUrl: 'https://yourapp.com'
  },
  encoding: 'text',
});

python

from mcp_ui_server import create_ui_resource

interactive_form = create_ui_resource({
    "uri": "ui://user-form/1",
    "content": {
        "type": "externalUrl",
        "iframeUrl": "https://yourapp.com"
    },
    "encoding": "text"
})

客户端 -使用单个组件在主机上渲染：

反应

import { UIResourceRenderer } from '@mcp-ui/client';

// `mcpResource` would come from your MCP response
function MyApp({ mcpResource }) {
  return (
     {
        console.log('User action:', action);
      }}
    />
  );
}

Web组件/HTML

  // 1. Import the script to register the component
  import '@mcp-ui/client/ui-resource-renderer.wc.js';

  // 2. This object would come from your MCP response
  const mcpResource = {
    resource: {
      uri: 'ui://user-form/1',
      mimeType: 'text/uri-list',
      text: 'https://example.com'
    }
  };

  // 3. Get the element and pass data
  const renderer = document.getElementById('resource-renderer');
  renderer.setAttribute('resource', JSON.stringify(mcpResource.resource));

  // 4. Listen for events
  renderer.addEventListener('onUIAction', (event) => {
    console.log('User action:', event.detail);
  });

📚 资源

• 官方文件
• \[MCP应用程序列表\]https://TopMCPApps.com

🤝 贡献

欢迎投稿！请阅读 贡献指南 第一。

📜 许可证

根据MIT许可证分发。看 LICENSE 了解更多信息。