SuperAPI AI 工具集

implementing-mcp-ui-apps

智能体与模型

查看项目

更新于 10-16 09:51

技能介绍

用途:为 MCP 工具添加交互式 React 可视化界面(MCP UI 应用),让工具结果在 Claude Desktop 等 MCP 客户端中渲染为表格、详情视图、图表、状态徽章等,而不是纯文本或 JSON。完整参考见 services/mcp/CONTRIBUTING.md。

主要能力:支持三种应用类型。detail 渲染单个实体,必填 view_prop;list 渲染列表并支持下钻,点击项通过 app.callServerTool() 调用 detail_tool 并内联展示详情,客户端不支持工具调用时回退为聊天消息,必填 detail_tool;custom 用于完全自定义逻辑的手写入口。组件放在 products/{product}/mcp/apps/,使用 Mosaic 的 DataTable、DescriptionList、ListDetailView 等,YAML 中 ui_apps 定义应用,tools 中用 ui_app 关联,如 ui_app: my-entity。

使用方式:在 ui_apps 配置后运行 pnpm --filter=@posthog/mcp run generate:ui-apps 生成入口与注册表,再执行 pnpm --filter=@posthog/mcp run build。手写工具可用 withUiApp('my-entity', {...}),键名受生成的 UiAppKey 联合类型检查。字段默认值按约定推导,可在 YAML 覆盖。

限制:YAML 字段由 services/mcp/scripts/yaml-config-schema.ts 的 Zod schema 校验,使用 .strict(),未知键在构建时报错;CI 在 ci-mcp.yml 与 ci-mcp-ui-apps.yml 中检查生成文件是否最新,修改 YAML 后须重新生成并提交。generated/ 目录不要手动编辑,custom 应用入口需手动维护于 services/mcp/src/ui-apps/apps/{key}.tsx。

(注:资料未提供收费、价格、平台支持范围与实际效果等信息。)