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 上的使用者操作能正确反映于模型状态中。