ext-apps
为MCP工具构建交互式UI的SDK
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ext-apps。 它的用途是：为MCP工具构建交互式UI的SDK 完整的 Skill 内容见：https://321skill.com/skills/ext-apps/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想为我的股票数据查询MCP工具添加一个实时K线图界面。”，它会引导你使用`add-app-to-server`技能，分析你的服务器代码，并生成集成图表UI所需的组件代码和配置。或者
对AI说：“把我在线简历制作网页也变成一个MCP工具。”，`convert-web-app`技能会帮你将现有网页逻辑封装成MCP App，使其能在聊天客户端内交互式填写和预览简历。
介绍
MCP Apps是一个官方SDK，旨在解决MCP工具功能强大但交互形式单一（通常仅为文本）的问题。它允许开发者为MCP工具快速构建出可内嵌在Claude、ChatGPT等聊天客户端中渲染的交互式UI，如图表、表单、仪表盘等，从而极大地提升工具的用户体验和表达能力。
使用方式非常灵活：开发者可以直接使用SDK的API构建UI组件；更高效的方式是利用其提供的Agent Skills，让AI编程助手（如Claude Code）根据你的需求自动生成或迁移应用。例如，你可以直接对AI说“为我的MCP服务器添加一个配置面板”，相关的Skill就会引导你完成。
这个SDK非常适合正在或计划开发MCP工具，并希望为其增加丰富可视化界面的开发者。无论是将现有命令行工具“界面化”，还是从零开始构建一个带有复杂交互的新工具，MCP Apps都能提供标准化的解决方案。
需要注意的是，目前其UI渲染依赖于支持MCP Apps协议的客户端（如Claude Desktop），在普通终端或旧版客户端中可能无法正常显示。建议在开发前确认目标运行环境，并优先使用其提供的Agent Skills来降低开发门槛。
核心特点
这是Model Context Protocol官方推出的、专为MCP生态设计的UI构建方案，与通用前端框架不同，它深度集成MCP协议，能让UI组件作为工具的一部分被AI直接调用和渲染在聊天界面中。
注意事项
不适合构建完全独立运行或需要复杂状态管理的传统Web应用，其UI渲染依赖特定的、支持该协议的聊天客户端。
常见问题
MCP Apps和OpenAI的GPTs/Function Calling有什么区别？
MCP Apps是开放协议MCP的一部分，不绑定特定厂商，可在Claude、ChatGPT等多种兼容客户端使用；而OpenAI的方案通常只在其自家生态内有效。
需要很厉害的前端技术才能用吗？
不需要，官方提供了多个Agent Skills，你可以用自然语言描述需求，让AI助手（如Claude Code）帮你生成大部分代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ext-apps/raw/index.md 读取 ext-apps 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ext-apps/raw/index.md（查看排版版本）