SuperAPI AI 工具集

create-mcp-app

智能体与模型

查看项目

更新于 10-16 06:48

技能介绍

用途:create-mcp-app 用于构建运行在支持 MCP 的宿主(如 Claude Desktop)内的交互式 UI。一个 MCP App 由两部分组成:工具(由 LLM/宿主调用并返回数据)与资源(提供打包后的 HTML UI)。工具的 _meta.ui.resourceUri 指向资源 URI,流程为宿主调用工具、渲染资源 UI、服务器返回结果、UI 接收结果。

主要能力:提供 registerAppTool、registerAppResource 等注册辅助函数;支持 React(useApp hook)与 Vanilla JS、Vue、Svelte、Preact、Solid 等框架模板;包含生命周期处理器(ontoolinput、ontoolresult、onhostcontextchanged、onteardown 等)、主题与宿主样式变量、CSP 配置、流式输入、分块响应、二进制资源、全屏模式、模型上下文更新等模式。

使用方式:可向已有 MCP 服务器添加工具与资源注册,或新建服务器并配置 stdio/HTTP 传输与 vite-plugin-singlefile 构建。参考代码可克隆 SDK 仓库:git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps。依赖用 npm install 添加,例如 npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/client@^2.0.0 @modelcontextprotocol/server@^2.0.0 @modelcontextprotocol/node@^2.0.0 @modelcontextprotocol/express@^2.0.0 zod@^4.2.0 express cors。TypeScript 服务器默认用 tsx 运行。所有处理器须在 app.connect() 之前注册。

适用场景:为 MCP 工具添加 UI、搭建交互式 MCP View、本地用 basic-host 测试。

限制:HTML 作为 MCP 资源提供,无同源服务器,所有网络请求(含 localhost)都需 CSP 配置;_meta.ui.csp 与 _meta.ui.domain 应放在 registerAppResource() 读取回调返回的 contents[] 对象中;需为非 UI 宿主提供文本回退;basic-host 仅用于本地测试,不代表真实宿主行为。其余细节暂未提供。