MCP Ext Apps

MCP Ext应用程序

示例实施 MCP应用程序扩展（SEP-1865） -通过MCP工具实现交互式HTML/JS UI。

https://github.com/user-attachments/assets/54574167-f2fa-4da0-bb7c-510cd636d910

快速开始

npm install
npm start

打开http://localhost:8080

运作原理

Host Client                              MCP Server
┌────────────────────┐                  ┌──────────────┐
│  tools-sidebar     │ ── call tool ─> │  Tools:      │
│  app-container     │ <── HTML UI ─── │  - dashboard │
│  [sandboxed iframe]│                 │  - clock     │
└────────────────────┘                  └──────────────┘
   localhost:8080                        localhost:3001

1. 主机连接到MCP服务器，列出工具
2. 用户点击工具，主机通过MCP调用
3. 工具返回 text/html+mcp 资源与 ui:// 统一资源标识符
4. 主机使用CSP在沙盒iframe中渲染
5. UI通过JSON-RPC 2.0进行通信 postMessage

SEP-1865合规性

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

脚本

npm start       # Build + start server
npm run server  # MCP server (port 3001)
npm run host    # Host client (port 8080)

许可证

麻省理工学院