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許可證。