create-mcp-app

此技能為開發者提供建立模型上下文協定 (MCP) 應用程式的完整指引與腳手架。MCP 應用程式透過將標準 MCP 工具與 HTML UI 結合，在 Claude Desktop 等支援的主機內提供豐富的互動體驗。本技能適合希望將後端工具邏輯與前端資料視覺化進行橋接的軟體工程師。

主要功能與能力包括：

• 工具與資源模式架構指引：利用 _meta.ui.resourceUri 將後端工具與互動式 Web UI 綁定。
• 框架支援：針對 React (包含專用的 useApp hook)、原生 JS、Vue、Svelte、Preact 與 Solid 提供實作模式。
• 生命週期管理：處理工具輸入、串流部分結果、主機上下文變更以及元件卸載流程。
• 資源打包：使用 vite-plugin-singlefile 進行打包的最佳實踐，以實現與主機的無縫整合。
• 進階互動模式：包含輪詢、二進位資源處理、具備透明度的串流輸入以及即時模型上下文更新。

使用注意事項與限制：

• 快速啟動：依照指引複製官方的 ext-apps SDK 儲存庫，以取得參考模板與 API 定義。
• 相依套件：請務必透過 npm 安裝如 @modelcontextprotocol/ext-apps、@modelcontextprotocol/sdk 與 zod 等套件，確保版本相容性，避免手動硬編碼版本號。
• 開發環境：使用 tsx 執行 TypeScript 伺服器，並確保專案結構符合提供的框架 boilerplate (如 server.ts 及前端應用檔案)。
• 效能優化：處理複雜或大型資料集時，請實作串流與基於可視性的暫停機制，以最佳化主機的資源消耗。
• 上下文覺知：使用 sendMessage 與 updateModelContext 來維護 UI 與 LLM 主機之間的雙向溝通，確保 UI 上的使用者操作能正確反映於模型狀態中。