SuperAPI AI 工具集

implementing-mcp-ui-apps

智能体与模型

查看项目

更新于 10-16 03:45

技能介绍

用途:为 PostHog 的 MCP 工具添加 UI 应用,即随工具结果一起渲染的交互式 React 可视化,显示在 Claude Desktop 等 MCP 客户端中。当工具返回适合可视化的结构化数据(表格、详情视图、图表、状态徽章等)时使用;无 UI 应用时结果仅以纯文本/JSON 显示。完整参考见 services/mcp/CONTRIBUTING.md。

主要能力与结构:UI 应用基于 Quill 组件库,通过 Cloudflare Workers Static Assets 提供。视图组件放在 products/{product}/mcp/apps/,应用类型分 detail(单实体详情)、list(列表加下钻,点击项调用 detail_tool 并内联显示详情)、custom(手写入口点,生成器不创建入口点,需自行维护在 services/mcp/src/ui-apps/apps/{key}.tsx)。YAML 配置位于各产品 mcp/tools.yaml 的 ui_apps 段,键即应用标识;工具段用 ui_app: <key> 关联应用,手写工具用 withUiApp。

必要命令:pnpm --filter=@posthog/mcp run generate:ui-apps;pnpm --filter=@posthog/mcp run build。修改 YAML 的 ui_apps 后需重新生成并提交,CI(ci-mcp.yml、ci-mcp-ui-apps.yml)会校验生成文件是否最新。Zod 校验 schema 在 services/mcp/scripts/yaml-config-schema.ts,使用 .strict() 拒绝未知键,可捕获拼写错误;新增字段需同步修改对应 schema、Resolved* 接口与 resolve* 函数。

限制:资料未提供配额、收费、性能或可用性等其他限制信息。