MCP 互动应用构建器
为 MCP 服务器添加可在对话中运行的表单、选择器、仪表盘和确认组件。
文档明确说明 iframe sandbox、CSP 限制、外链必须经 host-mediated openLink，并提供 authless 服务的限流、代理信任和缓存建议；确认对话框及 destructiveHint 也被覆盖。扣分原因是示例依赖未说明的数据库和上游 API，未系统规定敏感数据处理、权限最小化、用户确认边界、失败回滚或数据流审计；依赖版本也未固定。
结构、工具/资源注册、widget 通信、CSP 陷阱、载荷上限和调试路径说明较一致，异常场景也有部分诊断建议。扣分原因是没有提交的测试套件或可核验执行结果，示例含未定义的 db 和数据源，JSON.parse、网络失败、宿主能力缺失等关键异常缺少统一处理；按静态校准不超过10分。
触发条件、适用场景、widget 与纯文本及 elicitation 的边界、Remote 与 MCPB 两种部署形态、非 apps 宿主降级行为均描述清楚。扣分原因是未说明中文界面或中文用户体验，也未评估中国大陆网络可达性；部分功能依赖 Claude/ChatGPT 等特定宿主能力。
具备版本号、清晰的信息架构、渐进式参考文档、安装命令、模板、限制、FAQ式故障表和 Anthropic 归属；仓库上下文提供 Apache-2.0 许可。扣分原因是选定技能自身没有 changelog、兼容性矩阵、依赖版本锁定或明确维护/更新流程，部分文档说明依赖外部链接和其他技能。
提供从架构选择到服务端、iframe、模板、测试循环和安全防护的完整示例，核心构建任务在材料层面可直接开始，且明确 widget 相对纯文本和 elicitation 的边际价值。扣分原因是示例仍需补数据库、部署、认证和宿主配置，关键代码未在源文件中执行验证；按静态校准最高7分。
技能包含大量代码、协议字段、问题—修复表、测试命令和明确的参考文件，主张具有较好的源内可审计性。扣分原因是没有提交 CI、测试套件或第三方执行证据，所谓已观察到的行为无法仅凭静态材料独立复现；按静态校准不超过5分。
- 不要把示例直接用于生产：先补充认证或明确 authless 数据范围、上游密钥隔离、输入校验、敏感数据最小化和写操作确认/回滚。
- 固定并审计 @modelcontextprotocol/sdk、@modelcontextprotocol/ext-apps、express、zod、mcp-remote 等依赖版本，并验证目标宿主和网络环境。
- 为超大载荷、无效 JSON、网络超时、宿主不支持能力和过期 widget 实例增加显式错误反馈与测试。
它能做什么 & 适用场景
这是一个用于构建 MCP 互动应用的 Agent Skill，帮助开发者为标准 MCP 服务器增加可嵌入聊天界面的 UI 资源。它覆盖远程 Streamable HTTP 部署和 MCPB 本地打包应用，并说明工具、资源与 iframe 小组件之间的连接方式。技能还提供基于 App 类的消息通信、主题适配、CSP 限制和测试流程。它适合已经确定 MCP 服务器部署模型、确实需要交互式 UI 的开发者；简单的文本或 JSON 返回通常不需要使用它。
指导开发者注册带有 _meta.ui.resourceUri 的 MCP 工具和独立 UI 资源，使用 RESOURCE_MIME_TYPE 提供 HTML，并在 iframe 中通过 App 类接收工具结果、发送消息、更新模型上下文、调用服务器工具、打开链接、下载文件和请求显示模式。它给出 TypeScript/Express 示例、依赖安装命令、远程与本地部署形态、widget 模板和测试方法，包括 Claude、自定义连接器、Claude Desktop、JSON-RPC、浏览器预览和无 UI 主机降级测试。
- 为需要用户从大量文件、联系人或记录中搜索选择的 MCP 工具构建选择器。
- 为破坏性或计费操作增加明确的内联确认对话框。
- 为图表、地图、差异或预览结果构建可视化展示组件。
- 为需要填写结构化参数的工具构建表单，并在适用时先判断 MCP elicitation 是否足够。
- 为长时间运行的任务构建进度或实时状态组件。
优缺点一览
- 覆盖工具注册、UI 资源、iframe 通信、CSP、主题和显示模式等完整实现链路。
- 同时说明远程 MCP 应用和 MCPB 本地应用两种部署形态。
- 提供可复制的 TypeScript、HTML、npm 和测试示例。
- 明确要求无 UI 主机仍能通过文本或 JSON 正常降级。
- 范围只聚焦 MCP 互动 UI，不替代基础的 `build-mcp-server` 或 MCPB 打包技能。
- iframe 受 CSP、沙箱、网络请求、图片和导航限制，不能直接访问宿主页面、Cookie 或存储。
- Claude Desktop 的当前配置仍需使用 `command`/`args` 与 `mcp-remote`，且 UI 资源缓存可能影响开发迭代。
- 源材料未提供自动化测试套件；测试主要以手动、JSON-RPC 和浏览器预览流程为主。
如何安装
该技能位于 plugins/mcp-server-dev/skills/build-mcp-app/SKILL.md，随 anthropics/claude-plugins-official 插件目录安装。Claude Code 中运行：/plugin install mcp-server-dev@claude-plugins-official；也可以通过 /plugin > Discover 浏览安装。技能示例项目依赖可用 npm install @modelcontextprotocol/sdk @modelcontextprotocol/ext-apps zod express 安装。
如何使用
在已经确定 MCP 服务器部署模型后，提交类似：为我的 MCP 服务器添加一个可在聊天中运行的联系人选择器，并说明远程 Streamable HTTP 部署、工具资源注册和 iframe 通信实现。 如果只需要是/否确认、短枚举选择或扁平表单，应先使用 MCP elicitation，而不是构建 widget。
对比同类
与纯文本或 JSON 工具输出相比，本技能适合需要选择、确认、可视化或实时状态的交互场景；如果需求可由 MCP elicitation 完成，则 widget 通常没有必要。