SuperAPI AI 工具集

mcp-apps-sdk

编程与开发

查看项目

更新于 10-16 05:52

技能介绍

用途:在编写基于 @modelcontextprotocol/ext-apps 的代码时使用,该包提供四个入口:@modelcontextprotocol/ext-apps(View 的 App 类)、/server(registerAppTool、registerAppResource、RESOURCE_MIME_TYPE)、/react(useApp 与 React 绑定)、/app-bridge(面向非 JS 框架的底层桥接)。

安装:npm install @modelcontextprotocol/ext-apps @modelcontextprotocol/sdk,并安装开发依赖 typescript vite vite-plugin-singlefile express cors tsx 及对应类型。始终按名称安装,不要在 package.json 手动锁定版本,View SDK 与 server SDK 需同步升级。

服务端:用 McpServer 与 StreamableHTTPServerTransport 搭建 HTTP 端点,通过 registerAppTool 注册工具(_meta.ui.resourceUri 指向 ui:// 资源,返回 structuredContent 供 View 渲染、content 供纯文本宿主与模型读取),通过 registerAppResource 注册资源并设置 RESOURCE_MIME_TYPE;CSP 必须写在 contents 的 _meta 中,而非配置参数。这两个函数是基础 SDK registerTool/registerResource 的薄封装。

View 端:用 new App 创建实例,所有处理函数必须在 connect() 之前注册,包括 ontoolinput、ontoolinputpartial、ontoolresult、ontoolcancelled、onteardown、onhostcontextchanged。App 提供 connect、callServerTool、readResource、sendMessage、updateModelContext、requestDisplayMode、sendSizeChanged、openLink、sendLog、getHostContext、getHostCapabilities、getHostVersion 等成员。React 用 useApp 自动处理连接与销毁,不要重复调用 connect。Vue、Svelte、Preact、Solid 可直接用 App 类或 app-bridge 自行管理生命周期。并非所有宿主都实现全部成员,需用 getHostCapabilities 或真值判断做保护。

构建:View 以单个 HTML 字符串提供,推荐用 vite-plugin-singlefile 将资源内联,否则需在 csp.resourceDomains 声明所有资源来源。package.json 需 "type": "module",服务端用 tsx 运行。

测试:构建并启动本地服务后,可在 ext-apps 的 examples/basic-host 中运行宿主,或用 cloudflared 隧道并在 Claude 设置的自定义连接器中注册(需付费计划)。调试建议用 app.sendLog 而非 console.log。

限制:不保证所有宿主支持全部能力;自定义连接器需付费计划;常见失败模式包括处理函数注册在 connect 之后导致丢失首个工具结果、CSP 位置错误导致请求被拦截、资源未内联且未声明导致空白视图、在数据工具上设置 _meta.ui.resourceUri 导致重复挂载、缺少 "type": "module" 导致导入报错,以及破坏性变更后复用同一 ui:// URI 导致旧视图残留。其他细节暂未提供。