AI导哈

MCP扩展应用

通过MCP工具实现交互式HTML/JS用户界面的扩展应用实现。

  • by hemanth
  • JavaScript
  • 本地部署
  • 10 星标
  • 更新于
在 GitHub 查看 hemanth/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)

许可证

麻省理工学院

相关 MCP