MCP Ext Apps

🚀 MCP扩展应用

MCP应用扩展 (SEP - 1865) 的示例实现，通过MCP工具提供交互式HTML/JS用户界面。

点击查看相关内容

🚀 快速开始

在项目根目录下，依次执行以下命令进行安装和启动：

npm install
npm start

启动完成后，在浏览器中打开 http://localhost:8080 即可查看应用。

💻 使用示例

基础用法

以下是启动项目的基本命令：

npm start       # 构建并启动服务器

高级用法

如果你需要单独启动MCP服务器或主机客户端，可以分别使用以下命令：

npm run server  # 启动MCP服务器（端口3001）
npm run host    # 启动主机客户端（端口8080）

🔧 技术细节

工作原理

本项目的工作流程如下：

主机客户端                              MCP服务器
┌────────────────────┐                  ┌──────────────┐
│  工具侧边栏        │ ── 调用工具 ─> │  工具列表：    │
│  应用容器          │ <── HTML用户界面 ─── │  - 仪表盘    │
│  [沙盒化的iframe]  │                 │  - 时钟      │
└────────────────────┘                  └──────────────┘
   本地主机:8080                        本地主机:3001

1. 主机连接到MCP服务器，获取工具列表。
2. 用户点击某个工具，主机通过MCP调用该工具。
3. 工具返回带有 ui:// URI的 text/html+mcp 资源。
4. 主机使用内容安全策略（CSP）在沙盒化的iframe中渲染该资源。
5. 用户界面通过 postMessage 使用JSON - RPC 2.0进行通信。

与SEP - 1865的兼容性

本项目遵循SEP - 1865标准，具体体现在以下方面：

• 资源URI使用 ui:// 方案。
• 使用 text/html+mcp MIME类型。
• 工具响应中包含 _meta.ui/resourceUri。
• 采用 ui/initialize 握手协议。
• 使用JSON - RPC 2.0消息格式。
• 使用带有CSP头的沙盒化iframe。

📄 许可证

本项目采用MIT许可证。