建设一个网站是不必须备案,网站建设简介是什么意思,谷歌浏览器下载安装,做网站代理商好赚吗?OpenAI 和 MCP 委员会一起定了规范。只要符合这个规范#xff0c;你的应用就能同时跑在 ChatGPT 和 Claude Desktop 里。 写在前面 今天刷推特#xff0c;看到 OpenAI 官方发了条消息#xff1a;ChatGPT 现在完全支持 MCP Apps 了。 我第一反应是#xff1a;这是啥…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.jsLTS 版本。如果用 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-appsChatGPT Apps SDK 文档https://developers.openai.com/apps-sdkOpenAI 官方推文https://x.com/OpenAIDevs/status/2019185727934984384