MCP Apps引爆AI交互，ChatGPT渲染界面无需跳转
OpenAI 和 MCP 委员会一起定了规范。只要符合这个规范，你的应用就能同时跑在 ChatGPT 和 Claude Desktop 里。
写在前面
今天刷推特，看到 OpenAI 官方发了条消息：ChatGPT 现在完全支持 MCP Apps 了。
我第一反应是：这是啥？
点进去一看，发现这东西挺有意思。它让你可以在对话框里直接渲染交互界面，而不是只能看文字。
更关键的是，OpenAI 和 MCP 委员会一起定了规范。只要符合这个规范，你的应用就能同时跑在 ChatGPT 和 Claude Desktop 里。
这篇是我的学习笔记。
MCP Apps 是什么
先说 MCP。
MCP 全称 Model Context Protocol，模型上下文协议。你可以把它理解成 AI 的插件系统。
传统的 MCP 工具返回文本、图片、结构化数据。AI 拿到这些内容，展示给用户。
但有些场景，文字真的不够。
用户问你"展示销售数据的区域分布"，你总不能回一堆数字吧？用户想要的是能点、能筛、能钻取的图表。
MCP Apps 就是干这个的。它让服务器返回一个交互式 HTML 界面，直接渲染在对话框里。
用户不用跳转，不用切页面。
为什么不做个网页
你可能会想：那我做个网页，发个链接不就行了？
可以，但有几个问题。
第一，上下文会断。用户点链接，跳到新页面，对话线索就丢了。回来的时候，得翻半天才能找到刚才聊到哪儿了。
第二，数据流是单向的。网页只能展示数据，想调用其他工具？得自己搞 API、鉴权、状态管理。麻烦。
第三，能力是孤立的。用户想"把这个会议加到日历"，你得自己对接日历服务。而 MCP Apps 可以委托宿主去做，宿主会通过用户已经连接的能力来完成（当然，需要用户同意）。
第四，安全是个问题。你的网页能访问用户的 Cookie，能执行任意脚本。宿主得完全信任你。
MCP Apps 跑在沙箱 iframe 里。它访问不了父页面，偷不了 Cookie，逃不出容器。
如果你的场景不需要这些，做网页确实更简单。但如果你想跟 AI 对话深度集成，MCP Apps 是更好的选择。
它怎么工作
技术细节其实不复杂。
传统 MCP 工具在描述里声明自己能干啥，AI 决定要不要调用。MCP Apps 在这基础上加了一步：工具描述里可以包含 UI 资源的引用。
当 AI 决定调用这个工具时：
首先，UI 预加载。工具描述里有个_meta.ui.resourceUri字段，指向一个ui://资源。宿主可以提前把这个资源加载好。
然后，资源获取。宿主从服务器拉 UI 资源，通常是个 HTML 页面，里面打包了 JS 和 CSS。
接着，沙箱渲染。宿主把 HTML 渲染在沙箱 iframe 里。这个 iframe 被严格限制了权限。
最后，双向通信。应用和宿主通过 JSON-RPC 协议通信。应用可以调用工具，宿主可以推数据。
应用虽然被隔离了，但依然能通过安全的 postMessage 通道调用 MCP 工具。
什么时候该用
不是所有场景都适合。
探索复杂数据。用户问"各地区销售情况"，文字只能列数字。MCP App 可以渲染交互地图，点击钻取，悬停看详情。
配置多选项。部署服务，几十个相互依赖的选项。对话方式得一问一答，低效。MCP App 展示表单，一次性看到所有选项。
查看富媒体。预览 PDF、查看 3D 模型、浏览图片。文字描述不够，得嵌入真正的查看器。
实时监控。仪表盘展示实时指标、日志、系统状态。MCP App 保持连接，数据变化时自动更新。
多步骤工作流。审批报销、审查代码、处理工单。需要逐个检查，需要导航控件和操作按钮。
快速开始
你需要 Node.js（LTS 版本）。
如果用 AI 编程助手（Cursor、Windsurf），直接让它帮你搭脚手架。
如果手动搭，需要两部分：MCP 服务器和UI 实现。
服务器声明工具和 UI 资源。工具描述里包含_meta.ui.resourceUri，指向 UI 资源。
UI 就是个 HTML 页面，通过postMessage跟宿主通信。可以用任何框架（React、Vue、Svelte），只要能打包成单个 HTML 文件。
官方提供了@modelcontextprotocol/sdk包，简化通信逻辑。
测试
开发完了，得测试。
在 Claude Desktop 里测试。配置文件里添加你的 MCP 服务器，对话里调用工具，看 UI 是否正常。
用 basic-host。轻量级测试工具，专门调试 MCP Apps。
在 ChatGPT 里测试。现在也支持了，但得先把应用部署到公网。
安全
应用跑在沙箱 iframe 里，访问不了父页面。
所有通信通过postMessage，宿主验证每个请求的来源和权限。
需要额外权限（比如摄像头），必须在_meta.ui.permissions里声明。用户会看到授权提示，可以拒绝。
CSP 是强制的。应用只能加载_meta.ui.csp里声明的外部资源。
用户始终有最终决定权。宿主会展示工具调用的详情，用户可以批准或拒绝。
框架支持
React、Vue、Svelte、Angular，甚至原生 JS，都行。
唯一要求是能打包成单个 HTML 文件，能通过postMessage通信。
官方示例用的 React，但不是强制的。社区里已经有人用 Vue 和 Svelte 实现了。
用 Vite 之类的构建工具会更方便。它们支持把所有资源打包成单个 HTML 文件。
客户端支持
目前支持的客户端：
Claude Desktop，最早支持的。
ChatGPT，最新加入的。
还有一些第三方客户端在陆续支持。
关键是，只要符合规范，就能在所有客户端里跑。不用为每个平台单独开发。
一些例子
官方提供了几个示例：
数据可视化。上传 CSV，渲染交互图表，支持筛选、排序、导出。
表单配置。配置复杂服务，多步骤表单，带验证和实时预览。
文档查看器。预览 PDF 或 Markdown，支持搜索、高亮、注释。
源码都在 GitHub 上。
总结
MCP Apps 让 AI 助手不再局限于文字。
它是个开放标准，不绑定平台。
从开发者角度看，它降低了门槛。不用自己搞鉴权、状态管理、能力集成。
从用户角度看，体验更流畅。所有交互都在对话里，不跳转，不丢上下文。
当然，它不是万能的。场景不需要跟 AI 深度集成，做网页更简单。
但如果你想构建真正的 AI 原生应用，MCP Apps 值得一试。
我接下来打算自己做一个，把学到的东西实践一下。
参考资料
MCP Apps 官方文档：https://modelcontextprotocol.github.io/ext-apps
ChatGPT Apps SDK 文档：https://developers.openai.com/apps-sdk
OpenAI 官方推文：https://x.com/OpenAIDevs/status/2019185727934984384