MCP Apps Agent Skills（OpenAI 模型上下文协议扩展技能包）

MCP Apps Agent Skills 是什么

MCP Apps Agent Skills 是由 Model Context Protocol（MCP）官方团队开源发布的 AI 编程助手技能包，全称 Model Context Protocol Apps — Agent Skills。它是 MCP 协议的官方扩展包，旨在让 AI 编程助手能够快速构建、迁移和扩展支持交互式 UI 的 MCP 应用。

核心能力

MCP Apps Agent Skills 提供四个独立技能，覆盖 MCP App 开发全流程：

create-mcp-app — 从零搭建 MCP App Scaffolds a new MCP App with an interactive UI from scratch。当你想创建一个新的 MCP 应用时，只需对 AI 说「Create an MCP App」，AI 便会识别该技能，自动生成包含服务端、UI 和完整配置文件的可运行项目。生成的代码遵循 MCP Apps 规范，包含工具定义、UI 资源声明和 Host 渲染逻辑，无需手动配置即可本地运行并接入 Claude Desktop、ChatGPT 等支持 MCP 的客户端。

migrate-oai-app — 将 OpenAI App 迁移至 MCP Apps Converts an existing OpenAI App to use MCP Apps。如果你已有使用 OpenAI Apps SDK 开发的项目，运行「Migrate from OpenAI Apps SDK」，AI 会自动分析原有代码结构，将其迁移为符合 MCP Apps 规范的交互式应用，保留原有业务逻辑的同时新增 UI 渲染能力。

add-app-to-server — 为现有 MCP Server 添加工具界面 Adds interactive UI to an existing MCP server's tools。许多 MCP Server 已有丰富的工具集，但工具返回的数据缺乏可视化呈现。使用「Add UI to my MCP server」技能，AI 会在现有 MCP Server 的工具上叠加 UI 渲染层，为工具输出绑定图表、表单或数据看板，使工具结果在 AI 对话中以交互形式呈现。

convert-web-app — 将 Web 应用转为混合 MCP App Turns an existing web application into a hybrid web + MCP App。如果已有现成的 Web 应用，使用该技能可以让 AI 在不破坏原有 Web 功能的前提下，为其增加 MCP App 支持，使 Web 应用可以在 AI 客户端内嵌的沙箱 iframe 中渲染。

安装配置

方式一：Claude Code 插件安装（推荐） Claude Code 用户可以直接在对话中输入命令安装： /plugin marketplace add modelcontextprotocol/ext-apps /plugin install mcp-apps@modelcontextprotocol-ext-apps

方式二：Vercel Skills CLI 跨平台安装 npx skills add modelcontextprotocol/ext-apps 适用于支持 Agent Skills 标准的各类 AI 编程助手，包括 Codex、Copilot、Claude CLI、Cline、Goose 等。

方式三：手动克隆安装 git clone https://github.com/modelcontextprotocol/ext-apps.git 克隆后将 plugins/mcp-apps/skills/ 下的各技能文件夹复制到对应 AI 助手的 skills 目录即可。

使用步骤（以 create-mcp-app 为例）

第一步：确认技能已安装 向 AI 助手发送「What skills do you have?」，确认列表中包含 create-mcp-app、migrate-oai-app、add-app-to-server、convert-web-app 四个技能。

第二步：描述需求 直接用自然语言描述需要的 MCP App 功能，例如：「Create an MCP App that displays a color picker」。

第三步：AI 自主完成项目搭建 AI 会根据技能指令生成完整的项目结构，包括 package.json 依赖配置、服务端工具定义、UI 组件代码、MCP Apps 规范声明文件，以及本地调试配置。

第四步：本地运行验证 npm install && npm run build && npm run serve 启动后访问 http://localhost:8080/，即可在 basic-host 参考实现中预览应用效果。

适用场景

数据可视化工具：需要 AI 编程助手帮你构建一个实时数据看板时，AI 可以直接生成带图表的 MCP App。

内部管理系统：团队需要快速搭建一个支持 CRUD 操作的管理面板，AI 使用 migrate-oai-app 可以直接将现有管理后台迁移为 MCP App。

API 调试工具：为现有 MCP Server 添加工具 UI，使原本只有文本输出的 API 工具变成带表单和可视化结果的交互界面。

现有 Web 应用扩展：为已有的 React/Vue Web 应用增加 MCP App 支持，使其能在 Claude、ChatGPT 等 AI 客户端中以沙箱 iframe 形式渲染。

适用人群

前端开发者：希望借助 AI 快速构建具有交互界面的 MCP 工具，而不需要深入研究 MCP 协议细节的开发者。

AI 应用构建者：正在使用 Claude、ChatGPT 等 AI 助手构建应用，希望在对话中直接获得可交互 UI 而不是静态文本输出的用户。

MCP 工具开发者：已有 MCP Server 但缺少 UI 展示层，希望低成本为工具添加图形界面的 MCP 生态建设者。

全栈工程师：需要同时处理服务端逻辑和前端 UI，希望 AI 能端到端完成从协议层到展示层全部工作的全栈开发者。

工作原理

MCP Apps 基于 Model Context Protocol 的扩展机制实现。传统 MCP 工具返回文本或结构化 JSON 数据，而 MCP Apps 在工具定义中新增了 ui:// 资源声明，指向工具对应的 HTML 界面。AI 调用工具后，Host 会获取该 UI 资源并在沙箱 iframe 中渲染，同时通过双向通知机制将工具数据传递给 UI，UI 也可以反向调用其他 MCP 工具。

官方链接 GitHub：https://github.com/modelcontextprotocol/ext-apps 官方文档：https://apps.extensions.modelcontextprotocol.io/ 规范说明：https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx