SuperAPI AI 工具集

build-mcp-use-apps-widgets

编程与开发

查看项目

更新于 10-16 04:33

技能介绍

用途:构建或修复在 resources/ 中返回 React widget 的 mcp-use 应用,使其可运行于 ChatGPT 以及 Claude、Goose 等 MCP Apps 宿主。若只是纯 MCP 服务端(无 widget)应改用 build-mcp-use-server;若开发连接已有服务端的客户端应改用 build-mcp-use-client。

主要能力与用法:默认 Node 18+(建议 22 LTS),需与 mcp-use 一起显式安装 zod。采用 HTTP 优先,server.listen() 提供 /mcp。默认布局为根目录 index.ts、resources/<widget-name>/widget.tsx、共享代码置于 src/lib/。新项目可用脚手架:npx create-mcp-use-app <name> --template mcp-apps --no-skills,随后依次运行 npm install、npm run build、npx mcp-use generate-types。对已有应用按服务端绑定与 schema、widget 生命周期与宿主集成、widget 到工具的调用流、部署与验证四方面审查并直接修复。验证流程:npm run build、npx mcp-use generate-types、npx mcp-use dev,并在 http://localhost:3000/inspector 中至少调用一次绑定 widget 的工具。

关键规则:tool.widget.name 必须与 resources/<name>/widget.tsx 完全一致;必须为非 widget 客户端提供有意义的文本输出;props/structuredContent 可能对模型可见,敏感或仅 UI 用数据放入 metadata/_meta;渲染前先用 isPending 守卫;widget 内调用工具用 useCallTool() 或 useWidget().callTool(),不要用 raw fetch();widget 根需包裹 McpUseProvider;外部域名须在 widgetMetadata.metadata.csp 声明;部署时设置 baseUrl 或 MCP_URL;图片用 Image 组件。优先 type: "mcpApps" 以获得双协议兼容。

限制:资料未提供具体收费、价格、平台或效果信息,暂未提供;不应假设存在子代理或委派机制;不要绕过构建与 generate-types 步骤。