MCP Wasm

🚀 WASM MCP 服務器

這是一個藉助 WebAssembly (WASM)，在 Web 瀏覽器環境中運行的 Model Context Protocol (MCP) 服務器的概念驗證實現。該項目充分展示了在瀏覽器環境裡集成 MCP 工具和資源的強大能力。

✨ 主要特性

計算器工具

• 可執行基本算術運算，如加法、減法、乘法、除法。
• 具備輸入驗證和錯誤處理機制。
• 能即時顯示計算結果。

存儲系統

• 擁有基於鍵值的存儲功能。
• 可使用字符串鍵來設置和檢索值。
• 能在瀏覽器會話內實現持久存儲。
• 可進行模板資源處理。

📦 安裝指南

文檔中未提及具體安裝步驟，可按照以下依賴項進行安裝： 本項目的依賴項如下：

• @modelcontextprotocol/sdk
• Zod（用於模式驗證）
• TypeScript
• Vite（用於開發和構建）

你可以使用以下命令安裝依賴：

npm install @modelcontextprotocol/sdk zod typescript vite

💻 使用示例

計算器

1. 選擇一個操作（加、減、乘、除）。
2. 輸入兩個數字。
3. 點擊“計算”查看結果。
4. 系統會對無效輸入和除以零進行錯誤處理。

存儲

1. 在相應的字段中輸入鍵和值。
2. 點擊“設置存儲”以存儲值。
3. 輸入鍵後點擊“獲取存儲”以檢索值。
4. 系統會提供成功的操作反饋和錯誤信息。

🔧 技術細節

服務器組件

• server.ts：這是 MCP 服務器的核心實現，包含工具和服務資源定義。
• main.ts：負責客戶端集成和 UI 交互處理。
• browser-transport.ts：用於瀏覽器通信的自定義傳輸層。

架構

• 使用 Model Context Protocol SDK 進行服務器實現。
• 實現了自定義瀏覽器傳輸層。
• 工具通過回調函數註冊。
• 資源使用模板路徑並帶有參數替換。

關鍵概念

1. 工具

   • 使用server.tool()進行註冊。
   • 通過回調函數執行。
   • 使用 Zod 進行模式驗證。

2. 資源

   • 模板基於路徑（例如，storage://{key}）。
   • 通過readCallback訪問。
   • 可進行參數化資源處理。

📚 詳細文檔

項目結構

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP服務器實現
│       ├── main.ts        # 客戶端邏輯
│       └── browser-transport.ts # 瀏覽器傳輸層
├── index.html            # 網頁界面
└── package.json         # 項目依賴項

錯誤處理

• 服務器初始化錯誤
• 工具執行錯誤
• 資源訪問錯誤
• 輸入驗證
• 傳輸層錯誤

未來改進

• 添加更多計算器操作。
• 突破會話限制的持久存儲。
• 增強 UI/UX。
• 添加其他 MCP 工具和資源。
• WASM 優化。

開發

這是一個概念驗證實現，展示了在 Web 瀏覽器中使用 WebAssembly 運行 MCP 服務器的可行性。該實現側重於演示核心 MCP 概念，同時保持簡單性和清晰性。