尧图网站建设 
MCP Apps项目总览让MCP工具在AI对话框里打开仪表盘与图表的完整指南【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-appsMCP Apps 是 MCPModel Context Protocol官方推出的扩展协议与 SDK 仓库它让 MCP 工具不再只返回枯燥的文本而是能在 Claude、ChatGPT、VS Code 等 AI 对话框里直接打开可交互的仪表盘、图表、地图和表单。本文带你快速看懂 MCP Apps 的工作原理、SDK 结构、本地运行方法和 13 个官方示例是一份面向新手的完整指南 为什么需要 MCP Apps从纯文本到交互式界面传统 MCP 工具返回的是文本和结构化数据——够用但遇到这些场景就力不从心了数据可视化图表、曲线图、仪表盘随数据实时刷新富媒体视频播放器、音频波形、3D 模型交互表单多步向导、配置面板、审批流程实时展示日志流、进度条、实时转写MCP Apps 用一套标准解决了这个问题服务端声明一次 UI任何兼容的主机Host都能安全渲染。在此之前每个宿主应用MCP-UI、OpenAI Apps SDK 等各搞一套互不兼容的方案开发者要为每个宿主写不同适配器。现在只需「一次编写处处渲染」✨用 MCP Apps 构建的 Excalidraw运行在 Claude 中MCP Apps 工作原理工具 UI 资源 沙盒渲染整个协议围绕三个角色协作详见 docs/overview.md角色职责ServerMCP 服务器声明工具和ui://开头的 UI 资源HTML 模板HostAI 对话客户端拉取 UI 资源渲染进沙盒 iframe中转消息View视图iframe 里运行的界面接收工具数据、可反向调用工具一次渲染的完整流程发现Host 连接服务器时通过tools/list看到工具及其 UI 元数据初始化工具被调用后Host 渲染 iframeView 通过ui/initialize握手获取主题、尺寸等上下文数据投递Host 把工具入参和结果含structuredContent富数据推给 View交互用户点按钮、拖滑块View 通过tools/call让 Host 代理调用服务器工具拆除卸载前 Host 通知 View 保存状态关键设计是双向通信View 既能调用服务器工具刷新数据也能通过ui/message往对话里发消息、通过ui/update-model-context把用户操作比如调整了滑块参数写回模型上下文——这是仪表盘真正能对话的秘密 SDK 速览4 个包分别负责什么核心包是modelcontextprotocol/ext-apps按角色拆成了 4 个入口对应源码目录清晰包用途对应源码modelcontextprotocol/ext-apps构建交互视图App 类、PostMessageTransportsrc/app.tsmodelcontextprotocol/ext-apps/reactReact 钩子useApp、useHostStyles 等src/react/useApp.tsxmodelcontextprotocol/ext-apps/app-bridge在聊天客户端中嵌入并与视图通信src/app-bridge.tsmodelcontextprotocol/ext-apps/server在 MCP 服务器注册工具和 UI 资源src/server/index.ts对于新手记住一句话就够了MCP Apps Tool UI Resource。注册工具时用_meta.ui.resourceUri指向一个ui://资源宿主就知道该渲染哪块界面。快速上手本地跑起第一个 MCP Apps 示例想亲眼看到效果仓库自带参考宿主basic-host一条命令跑起全部示例git clone https://gitcode.com/GitHub_Trending/ex/ext-apps cd ext-apps npm install npm start然后打开http://localhost:8080/你会看到一个简洁的工具调用面板——选择服务器、选择工具、点击Call ToolUI 就会在下方沙盒中渲染出来最经典的入门示例是 examples/quickstart/——一个获取服务器时间并在交互界面展示的小应用官方教程 docs/quickstart.md 会带你一步步手写它的每个文件 提示如果你熟悉 React可以直接对照 examples/basic-server-react/仓库还提供 Vue、Svelte、Preact、Solid、原生 JS 五个同构版本总有一个适合你。示例应用大盘点图表、地图、PDF、3D 场景examples/ 目录收录了 13 个真实场景示例每个都是一个可发布的 npm 包modelcontextprotocol/server-name通过npx -y modelcontextprotocol/server-name --stdio即可接入支持 stdio 的 MCP 客户端。挑几个最出彩的 数据仪表盘类Budget Allocator环形图 滑块的预算分配器拖动滑块实时重算占比并与行业基准对比Cohort Heatmap客户留存热力图支持按月/周切换、悬停查看明细Scenario ModelerSaaS 财务预测器调参数即看 12 个月 MRR 曲线Customer Segmentation带聚类的客户分群散点图System Monitor实时操作系统指标面板️ 富媒体与文档类Map ServerCesiumJS 三维地球AI 一句话调出任意区域地图PDF Server分页阅读 PDF 论文支持缩放、批注分块加载大文件Sheet MusicABC 记谱法转五线谱Wiki ExplorerD3 力导向图可视化维基百科链接网络Video / Transcript / Say / QR视频播放、语音实时转写、文字朗读、二维码生成每个示例目录都有 README 说明接入方式和架构比如 examples/cohort-heatmap-server/README.md照着改就能做出你自己的行业仪表盘。用 AI 编程助手生成 MCP AppAgent Skills 一键脚手架不想手写仓库内置了 4 个 Agent Skills装进 AI 编程助手如 Claude Code后直接说人话即可Skill一句话效果create-mcp-app从零脚手架一个带交互 UI 的新 MCP Appadd-app-to-server给现有 MCP 服务器的工具加上 UImigrate-oai-app把 OpenAI App 迁移到 MCP Appsconvert-web-app把现有 Web 应用改造成 MCP AppClaude Code 用户两条命令装好/plugin marketplace add modelcontextprotocol/ext-apps再/plugin install mcp-appsmodelcontextprotocol-ext-apps。其他 AI 编程助手可参考 plugins/mcp-apps/README.md 手动安装。技能源码就在 plugins/mcp-apps/skills/例如 plugins/mcp-apps/skills/create-mcp-app/SKILL.md。安全机制与渐进增强为什么可以放心嵌入新手最担心的第三方 UI 嵌进我的对话框会不会泄密MCP Apps 在协议层就防住了沙盒隔离所有 View 跑在沙盒 iframe 里拿不到宿主的 DOM、Cookie 和存储默认拒绝服务器必须用 CSP 元数据声明 UI 需要访问的网络域名不声明则禁止一切外连杜绝数据外泄可审计通信View 与 Host 只允许通过postMessage传 JSON-RPC 消息全程可审计渐进增强主机连接时会声明是否支持 UI不支持的客户端上工具照常工作只是退化为返回纯文本——UI 是增强而非门槛 ️完整威胁模型见规范文档 specification/2026-01-26/apps.mdx当前稳定版演进中的草案在 specification/draft/apps.mdx。延伸阅读文档与源码导航资料路径项目总览docs/overview.md快速上手教程docs/quickstart.md协议规范稳定版specification/2026-01-26/apps.mdx参考宿主实现examples/basic-host/CSP 与安全说明docs/csp-cors.md授权机制docs/authorization.md测试方法docs/testing-mcp-apps.mdSDK 类型定义src/types.tsE2E 测试与截图tests/e2e/servers.spec.ts总结MCP Apps 用「工具 UI 资源 沙盒渲染」的极简模型把 AI 对话框变成了可以放仪表盘的画布。无论你是想给现有 MCP 服务器加可视化还是从零打造数据产品这个仓库的规范、SDK 和 13 示例都提供了完整的起点——从 examples/quickstart/ 开始今天就能让你的 AI 对话长出第一张交互图表 【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 MCP Apps项目总览：让MCP工具在AI对话框里打开仪表盘与图表的完整指南
MCP Apps项目总览让MCP工具在AI对话框里打开仪表盘与图表的完整指南【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-appsMCP Apps 是 MCPModel Context Protocol官方推出的扩展协议与 SDK 仓库它让 MCP 工具不再只返回枯燥的文本而是能在 Claude、ChatGPT、VS Code 等 AI 对话框里直接打开可交互的仪表盘、图表、地图和表单。本文带你快速看懂 MCP Apps 的工作原理、SDK 结构、本地运行方法和 13 个官方示例是一份面向新手的完整指南 为什么需要 MCP Apps从纯文本到交互式界面传统 MCP 工具返回的是文本和结构化数据——够用但遇到这些场景就力不从心了数据可视化图表、曲线图、仪表盘随数据实时刷新富媒体视频播放器、音频波形、3D 模型交互表单多步向导、配置面板、审批流程实时展示日志流、进度条、实时转写MCP Apps 用一套标准解决了这个问题服务端声明一次 UI任何兼容的主机Host都能安全渲染。在此之前每个宿主应用MCP-UI、OpenAI Apps SDK 等各搞一套互不兼容的方案开发者要为每个宿主写不同适配器。现在只需「一次编写处处渲染」✨用 MCP Apps 构建的 Excalidraw运行在 Claude 中MCP Apps 工作原理工具 UI 资源 沙盒渲染整个协议围绕三个角色协作详见 docs/overview.md角色职责ServerMCP 服务器声明工具和ui://开头的 UI 资源HTML 模板HostAI 对话客户端拉取 UI 资源渲染进沙盒 iframe中转消息View视图iframe 里运行的界面接收工具数据、可反向调用工具一次渲染的完整流程发现Host 连接服务器时通过tools/list看到工具及其 UI 元数据初始化工具被调用后Host 渲染 iframeView 通过ui/initialize握手获取主题、尺寸等上下文数据投递Host 把工具入参和结果含structuredContent富数据推给 View交互用户点按钮、拖滑块View 通过tools/call让 Host 代理调用服务器工具拆除卸载前 Host 通知 View 保存状态关键设计是双向通信View 既能调用服务器工具刷新数据也能通过ui/message往对话里发消息、通过ui/update-model-context把用户操作比如调整了滑块参数写回模型上下文——这是仪表盘真正能对话的秘密 SDK 速览4 个包分别负责什么核心包是modelcontextprotocol/ext-apps按角色拆成了 4 个入口对应源码目录清晰包用途对应源码modelcontextprotocol/ext-apps构建交互视图App 类、PostMessageTransportsrc/app.tsmodelcontextprotocol/ext-apps/reactReact 钩子useApp、useHostStyles 等src/react/useApp.tsxmodelcontextprotocol/ext-apps/app-bridge在聊天客户端中嵌入并与视图通信src/app-bridge.tsmodelcontextprotocol/ext-apps/server在 MCP 服务器注册工具和 UI 资源src/server/index.ts对于新手记住一句话就够了MCP Apps Tool UI Resource。注册工具时用_meta.ui.resourceUri指向一个ui://资源宿主就知道该渲染哪块界面。快速上手本地跑起第一个 MCP Apps 示例想亲眼看到效果仓库自带参考宿主basic-host一条命令跑起全部示例git clone https://gitcode.com/GitHub_Trending/ex/ext-apps cd ext-apps npm install npm start然后打开http://localhost:8080/你会看到一个简洁的工具调用面板——选择服务器、选择工具、点击Call ToolUI 就会在下方沙盒中渲染出来最经典的入门示例是 examples/quickstart/——一个获取服务器时间并在交互界面展示的小应用官方教程 docs/quickstart.md 会带你一步步手写它的每个文件 提示如果你熟悉 React可以直接对照 examples/basic-server-react/仓库还提供 Vue、Svelte、Preact、Solid、原生 JS 五个同构版本总有一个适合你。示例应用大盘点图表、地图、PDF、3D 场景examples/ 目录收录了 13 个真实场景示例每个都是一个可发布的 npm 包modelcontextprotocol/server-name通过npx -y modelcontextprotocol/server-name --stdio即可接入支持 stdio 的 MCP 客户端。挑几个最出彩的 数据仪表盘类Budget Allocator环形图 滑块的预算分配器拖动滑块实时重算占比并与行业基准对比Cohort Heatmap客户留存热力图支持按月/周切换、悬停查看明细Scenario ModelerSaaS 财务预测器调参数即看 12 个月 MRR 曲线Customer Segmentation带聚类的客户分群散点图System Monitor实时操作系统指标面板️ 富媒体与文档类Map ServerCesiumJS 三维地球AI 一句话调出任意区域地图PDF Server分页阅读 PDF 论文支持缩放、批注分块加载大文件Sheet MusicABC 记谱法转五线谱Wiki ExplorerD3 力导向图可视化维基百科链接网络Video / Transcript / Say / QR视频播放、语音实时转写、文字朗读、二维码生成每个示例目录都有 README 说明接入方式和架构比如 examples/cohort-heatmap-server/README.md照着改就能做出你自己的行业仪表盘。用 AI 编程助手生成 MCP AppAgent Skills 一键脚手架不想手写仓库内置了 4 个 Agent Skills装进 AI 编程助手如 Claude Code后直接说人话即可Skill一句话效果create-mcp-app从零脚手架一个带交互 UI 的新 MCP Appadd-app-to-server给现有 MCP 服务器的工具加上 UImigrate-oai-app把 OpenAI App 迁移到 MCP Appsconvert-web-app把现有 Web 应用改造成 MCP AppClaude Code 用户两条命令装好/plugin marketplace add modelcontextprotocol/ext-apps再/plugin install mcp-appsmodelcontextprotocol-ext-apps。其他 AI 编程助手可参考 plugins/mcp-apps/README.md 手动安装。技能源码就在 plugins/mcp-apps/skills/例如 plugins/mcp-apps/skills/create-mcp-app/SKILL.md。安全机制与渐进增强为什么可以放心嵌入新手最担心的第三方 UI 嵌进我的对话框会不会泄密MCP Apps 在协议层就防住了沙盒隔离所有 View 跑在沙盒 iframe 里拿不到宿主的 DOM、Cookie 和存储默认拒绝服务器必须用 CSP 元数据声明 UI 需要访问的网络域名不声明则禁止一切外连杜绝数据外泄可审计通信View 与 Host 只允许通过postMessage传 JSON-RPC 消息全程可审计渐进增强主机连接时会声明是否支持 UI不支持的客户端上工具照常工作只是退化为返回纯文本——UI 是增强而非门槛 ️完整威胁模型见规范文档 specification/2026-01-26/apps.mdx当前稳定版演进中的草案在 specification/draft/apps.mdx。延伸阅读文档与源码导航资料路径项目总览docs/overview.md快速上手教程docs/quickstart.md协议规范稳定版specification/2026-01-26/apps.mdx参考宿主实现examples/basic-host/CSP 与安全说明docs/csp-cors.md授权机制docs/authorization.md测试方法docs/testing-mcp-apps.mdSDK 类型定义src/types.tsE2E 测试与截图tests/e2e/servers.spec.ts总结MCP Apps 用「工具 UI 资源 沙盒渲染」的极简模型把 AI 对话框变成了可以放仪表盘的画布。无论你是想给现有 MCP 服务器加可视化还是从零打造数据产品这个仓库的规范、SDK 和 13 示例都提供了完整的起点——从 examples/quickstart/ 开始今天就能让你的 AI 对话长出第一张交互图表 【免费下载链接】ext-appsOfficial repo for spec SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP servers项目地址: https://gitcode.com/GitHub_Trending/ex/ext-apps创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考