MCP Apps vs OpenAI Apps SDK附概念映射表的迁移完全手册【免费下载链接】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如果你正在使用 OpenAI Apps SDK 构建聊天机器人里的交互式 UI本文将带你完成向MCP Apps的迁移。MCP Apps 是模型上下文协议Model Context Protocol的官方扩展modelcontextprotocol/ext-apps让 MCP 服务器把图表、表单、仪表盘等交互式 UI 直接渲染进 Claude、ChatGPT、VS Code 等任意兼容的聊天客户端实现一次编写、处处运行。下文提供完整的概念映射表、分步迁移流程和未支持功能的替代方案。 完整映射参考docs/migrate_from_openai_apps.md迁移技能plugins/mcp-apps/skills/migrate-oai-app/SKILL.md为什么值得从 OpenAI Apps SDK 迁移到 MCP AppsOpenAI Apps SDK 让 UI 只运行在 ChatGPT 生态里而 MCP Apps 将工具 交互界面标准化为开放协议跨客户端移植同一套代码可在 Claude、ChatGPT、VS Code、Goose、Postman 等所有兼容宿主中渲染安全模型统一沙箱 iframe 声明式 CSP通信全程可审计渐进增强不支持 UI 的宿主自动降级为纯文本工具服务器不需要维护多套适配器功能更强新增设备权限声明、流式工具参数、自动尺寸上报等 OpenAI SDK 没有的能力交互式界面就是 MCP Apps 的核心价值比如下面这个预算分配器用户可以直接拖动滑块重新分配各部门预算架构细节可阅读 docs/overview.md协议规范见 specification/2026-01-26/apps.mdx。核心概念映射30秒看懂两套 SDK 的差异迁移的本质可以概括为一句话OpenAI 用隐式全局对象 扁平元数据MCP Apps 用显式 App 实例 嵌套元数据。维度OpenAI Apps SDKMCP Apps SDK客户端入口隐式全局window.openai显式实例new App(...)await app.connect()工具注册server.registerTool()openai/...元数据registerAppTool()_meta.ui.*元数据UI 资源注册server.registerResource()registerAppResource()UI 资源 MIME 类型text/htmlskybridgetext/html;profilemcp-app数据获取方式加载时属性预填充同步读取异步事件回调ontoolinput/ontoolresult服务端迁移元数据与注册函数对照表工具元数据映射OpenAIMCP Apps说明_meta[openai/outputTemplate]_meta.ui.resourceUri指向 UI 资源的 URI_meta[openai/widgetAccessible]布尔值_meta.ui.visibility字符串数组true/false→ 数组中包含/排除app_meta[openai/visibility]字符串_meta.ui.visibility字符串数组public/private→ 包含/排除model_meta[openai/toolInvocation/invoking]—尚未实现_meta[openai/toolInvocation/invoked]—尚未实现资源元数据与 CSP 字段映射OpenAIMCP Apps说明_meta[openai/widgetCSP]_meta.ui.csp字段名从 snake_case 改为 camelCase_meta[openai/widgetDomain]_meta.ui.domain专属沙箱源resource_domainsresourceDomains静态资源来源connect_domainsconnectDomainsfetch/XHR/WebSocket 请求来源frame_domainsframeDomains嵌套 iframe 来源—baseUriDomainsMCP 新增base-uri指令—_meta.ui.permissionsMCP 新增摄像头、麦克风、定位、剪贴板权限⚠️易踩的坑CSP 字段是驼峰命名connect_domains→connectDomains且每一个网络来源都必须声明包括你自己托管 JS/CSS 的源开发环境的localhost、生产环境的 CDN漏写会静默失败。详见 docs/csp-cors.md。RESOURCE_MIME_TYPE常量定义在 src/constants.ts服务端辅助函数registerAppTool()/registerAppResource()实现于 src/server/index.ts。客户端迁移从 window.openai 到 App 实例这是迁移中概念变化最大的一步从读属性变成注册事件。所有事件处理器必须在connect()之前注册因为连接建立后事件可能立即触发。场景OpenAI 写法MCP Apps 写法主题/语言/展示模式window.openai.themeapp.getHostContext()?.theme工具入参window.openai.toolInputapp.ontoolinput (params) { ... }工具结果window.openai.toolOutputapp.ontoolresult (params) { ... }调用其他工具window.openai.callTool(name, args)app.callServerTool({ name, arguments: args })发送聊天消息window.openai.sendFollowUpMessage({ prompt })app.sendMessage({ role: user, content: [...] })打开外部链接window.openai.openExternal({ href })app.openLink({ url })注意参数名变化上报高度window.openai.notifyIntrinsicHeight(h)app.sendSizeChanged({ width, height })默认自动上报上下文变化addEventListener(openai:set_globals)app.onhostcontextchanged (ctx) {...}结构化日志console.log(...)app.sendLog({ level, data })App类的完整实现见 src/app.ts。React 项目无需手写生命周期——useApp钩子会自动管理连接与事件参考 examples/basic-server-react/src/mcp-app.tsx四步完成迁移的最快流程第 1 步安装 SDKnpm install -S modelcontextprotocol/ext-apps modelcontextprotocol/server2.0.0-beta.5 modelcontextprotocol/core2.0.0-beta.5 zod^4.2.0第 2 步替换服务端注册方式— 把server.registerTool()/server.registerResource()换成registerAppTool()/registerAppResource()元数据从openai/...扁平键改写到_meta.ui.*MIME 类型改用RESOURCE_MIME_TYPE常量。第 3 步改写客户端入口— 全局搜索window.openai按上一节对照表替换为App实例方法把toolInput/toolOutput的同步读取改为ontoolinput/ontoolresult回调并在await app.connect()之前完成注册。第 4 步全面排查遗留模式— 搜索以下关键字确认没有遗漏openai/旧元数据键、text/htmlskybridge旧 MIME、_domainssnake_case CSP、window.openai旧全局对象。官方入门示例 examples/quickstart/ 演示了工具 UI 资源的核心模式工具输入与结果通过通知实时传递给界面尚未支持的功能与替代方案迁移前请先确认你依赖的功能是否可用这些 OpenAI 能力目前尚无 MCP 对应实现缺失功能替代方案widgetState/setWidgetState()状态持久化使用localStorage或服务端状态uploadFile()/getFileDownloadUrl()文件操作暂不可用待协议更新requestModal()/requestClose()弹窗管理暂不可用toolInvocation/invoking进度提示暂不可用widgetDescription用app.updateModelContext()提供动态上下文好消息是渐进增强机制保证不支持 UI 的宿主仍会收到纯文本结果迁移不会让你的服务器失效。让 AI Agent 帮你自动完成迁移官方仓库内置了 migrate-oai-app 迁移技能AI 编码智能体Claude Code、VS Code 等安装后可自动执行整套流程克隆参考代码、按映射表改写服务端与客户端代码、排查 CSP 来源、并用内置宿主验证运行结果。技能总览见 docs/agent-skills.md。类似的真实案例还能做什么下图是一个 SaaS 业务预测器参数滑块调整会实时驱动 12 个月 MRR 曲线重算全部交互发生在聊天界面内本地验证用 basic-host 跑通迁移结果无需连接真实聊天客户端仓库自带的参考宿主 examples/basic-host/ 即可验证迁移后的应用。克隆仓库git clone https://gitcode.com/GitHub_Trending/ex/ext-apps后执行npm install npm start打开http://localhost:8080/即可在宿主中调用你的工具、检查 UI 渲染、事件回调与主题适配。迁移自查清单✅ 全局搜索确认无window.openai、openai/、skybridge残留✅ CSP 中声明了开发/生产环境的所有来源✅ 事件处理器在connect()之前注册✅ 在 basic-host 中无控制台报错、ontoolinput与ontoolresult均正常触发总结MCP Apps 迁移的核心就是三张表——服务端元数据表、客户端 API 表、CSP 字段表。跟着 docs/migrate_from_openai_apps.md 的对照关系逐项替换再让 AI Agent 兜底排查大多数应用都能在半天内完成从 OpenAI Apps SDK 到开放标准 MCP Apps 的平滑迁移。【免费下载链接】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 vs OpenAI Apps SDK：附概念映射表的迁移完全手册
MCP Apps vs OpenAI Apps SDK附概念映射表的迁移完全手册【免费下载链接】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如果你正在使用 OpenAI Apps SDK 构建聊天机器人里的交互式 UI本文将带你完成向MCP Apps的迁移。MCP Apps 是模型上下文协议Model Context Protocol的官方扩展modelcontextprotocol/ext-apps让 MCP 服务器把图表、表单、仪表盘等交互式 UI 直接渲染进 Claude、ChatGPT、VS Code 等任意兼容的聊天客户端实现一次编写、处处运行。下文提供完整的概念映射表、分步迁移流程和未支持功能的替代方案。 完整映射参考docs/migrate_from_openai_apps.md迁移技能plugins/mcp-apps/skills/migrate-oai-app/SKILL.md为什么值得从 OpenAI Apps SDK 迁移到 MCP AppsOpenAI Apps SDK 让 UI 只运行在 ChatGPT 生态里而 MCP Apps 将工具 交互界面标准化为开放协议跨客户端移植同一套代码可在 Claude、ChatGPT、VS Code、Goose、Postman 等所有兼容宿主中渲染安全模型统一沙箱 iframe 声明式 CSP通信全程可审计渐进增强不支持 UI 的宿主自动降级为纯文本工具服务器不需要维护多套适配器功能更强新增设备权限声明、流式工具参数、自动尺寸上报等 OpenAI SDK 没有的能力交互式界面就是 MCP Apps 的核心价值比如下面这个预算分配器用户可以直接拖动滑块重新分配各部门预算架构细节可阅读 docs/overview.md协议规范见 specification/2026-01-26/apps.mdx。核心概念映射30秒看懂两套 SDK 的差异迁移的本质可以概括为一句话OpenAI 用隐式全局对象 扁平元数据MCP Apps 用显式 App 实例 嵌套元数据。维度OpenAI Apps SDKMCP Apps SDK客户端入口隐式全局window.openai显式实例new App(...)await app.connect()工具注册server.registerTool()openai/...元数据registerAppTool()_meta.ui.*元数据UI 资源注册server.registerResource()registerAppResource()UI 资源 MIME 类型text/htmlskybridgetext/html;profilemcp-app数据获取方式加载时属性预填充同步读取异步事件回调ontoolinput/ontoolresult服务端迁移元数据与注册函数对照表工具元数据映射OpenAIMCP Apps说明_meta[openai/outputTemplate]_meta.ui.resourceUri指向 UI 资源的 URI_meta[openai/widgetAccessible]布尔值_meta.ui.visibility字符串数组true/false→ 数组中包含/排除app_meta[openai/visibility]字符串_meta.ui.visibility字符串数组public/private→ 包含/排除model_meta[openai/toolInvocation/invoking]—尚未实现_meta[openai/toolInvocation/invoked]—尚未实现资源元数据与 CSP 字段映射OpenAIMCP Apps说明_meta[openai/widgetCSP]_meta.ui.csp字段名从 snake_case 改为 camelCase_meta[openai/widgetDomain]_meta.ui.domain专属沙箱源resource_domainsresourceDomains静态资源来源connect_domainsconnectDomainsfetch/XHR/WebSocket 请求来源frame_domainsframeDomains嵌套 iframe 来源—baseUriDomainsMCP 新增base-uri指令—_meta.ui.permissionsMCP 新增摄像头、麦克风、定位、剪贴板权限⚠️易踩的坑CSP 字段是驼峰命名connect_domains→connectDomains且每一个网络来源都必须声明包括你自己托管 JS/CSS 的源开发环境的localhost、生产环境的 CDN漏写会静默失败。详见 docs/csp-cors.md。RESOURCE_MIME_TYPE常量定义在 src/constants.ts服务端辅助函数registerAppTool()/registerAppResource()实现于 src/server/index.ts。客户端迁移从 window.openai 到 App 实例这是迁移中概念变化最大的一步从读属性变成注册事件。所有事件处理器必须在connect()之前注册因为连接建立后事件可能立即触发。场景OpenAI 写法MCP Apps 写法主题/语言/展示模式window.openai.themeapp.getHostContext()?.theme工具入参window.openai.toolInputapp.ontoolinput (params) { ... }工具结果window.openai.toolOutputapp.ontoolresult (params) { ... }调用其他工具window.openai.callTool(name, args)app.callServerTool({ name, arguments: args })发送聊天消息window.openai.sendFollowUpMessage({ prompt })app.sendMessage({ role: user, content: [...] })打开外部链接window.openai.openExternal({ href })app.openLink({ url })注意参数名变化上报高度window.openai.notifyIntrinsicHeight(h)app.sendSizeChanged({ width, height })默认自动上报上下文变化addEventListener(openai:set_globals)app.onhostcontextchanged (ctx) {...}结构化日志console.log(...)app.sendLog({ level, data })App类的完整实现见 src/app.ts。React 项目无需手写生命周期——useApp钩子会自动管理连接与事件参考 examples/basic-server-react/src/mcp-app.tsx四步完成迁移的最快流程第 1 步安装 SDKnpm install -S modelcontextprotocol/ext-apps modelcontextprotocol/server2.0.0-beta.5 modelcontextprotocol/core2.0.0-beta.5 zod^4.2.0第 2 步替换服务端注册方式— 把server.registerTool()/server.registerResource()换成registerAppTool()/registerAppResource()元数据从openai/...扁平键改写到_meta.ui.*MIME 类型改用RESOURCE_MIME_TYPE常量。第 3 步改写客户端入口— 全局搜索window.openai按上一节对照表替换为App实例方法把toolInput/toolOutput的同步读取改为ontoolinput/ontoolresult回调并在await app.connect()之前完成注册。第 4 步全面排查遗留模式— 搜索以下关键字确认没有遗漏openai/旧元数据键、text/htmlskybridge旧 MIME、_domainssnake_case CSP、window.openai旧全局对象。官方入门示例 examples/quickstart/ 演示了工具 UI 资源的核心模式工具输入与结果通过通知实时传递给界面尚未支持的功能与替代方案迁移前请先确认你依赖的功能是否可用这些 OpenAI 能力目前尚无 MCP 对应实现缺失功能替代方案widgetState/setWidgetState()状态持久化使用localStorage或服务端状态uploadFile()/getFileDownloadUrl()文件操作暂不可用待协议更新requestModal()/requestClose()弹窗管理暂不可用toolInvocation/invoking进度提示暂不可用widgetDescription用app.updateModelContext()提供动态上下文好消息是渐进增强机制保证不支持 UI 的宿主仍会收到纯文本结果迁移不会让你的服务器失效。让 AI Agent 帮你自动完成迁移官方仓库内置了 migrate-oai-app 迁移技能AI 编码智能体Claude Code、VS Code 等安装后可自动执行整套流程克隆参考代码、按映射表改写服务端与客户端代码、排查 CSP 来源、并用内置宿主验证运行结果。技能总览见 docs/agent-skills.md。类似的真实案例还能做什么下图是一个 SaaS 业务预测器参数滑块调整会实时驱动 12 个月 MRR 曲线重算全部交互发生在聊天界面内本地验证用 basic-host 跑通迁移结果无需连接真实聊天客户端仓库自带的参考宿主 examples/basic-host/ 即可验证迁移后的应用。克隆仓库git clone https://gitcode.com/GitHub_Trending/ex/ext-apps后执行npm install npm start打开http://localhost:8080/即可在宿主中调用你的工具、检查 UI 渲染、事件回调与主题适配。迁移自查清单✅ 全局搜索确认无window.openai、openai/、skybridge残留✅ CSP 中声明了开发/生产环境的所有来源✅ 事件处理器在connect()之前注册✅ 在 basic-host 中无控制台报错、ontoolinput与ontoolresult均正常触发总结MCP Apps 迁移的核心就是三张表——服务端元数据表、客户端 API 表、CSP 字段表。跟着 docs/migrate_from_openai_apps.md 的对照关系逐项替换再让 AI Agent 兜底排查大多数应用都能在半天内完成从 OpenAI Apps SDK 到开放标准 MCP Apps 的平滑迁移。【免费下载链接】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），仅供参考