1小时迁移OpenAI Apps SDK项目到MCP Appsmigrate-oai-app技能实战【免费下载链接】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 SDKwindow.openai为 AI 聊天机器人构建交互式 UI现在正是转向MCP Apps的最佳时机。MCP Apps 是开放协议标准让你的 UI 一次编写、随处渲染。本文带你用官方migrate-oai-app 技能在 1 小时内完成 OpenAI Apps SDK 到 MCP Apps 的完整迁移实战——不用手写映射代码AI 编码助手全程引导。 为什么值得迁移从私有到开放标准OpenAI Apps SDKMCP Apps协议私有 APIwindow.openai开放标准跨宿主可移植宿主仅 ChatGPTClaude、VS Code、Goose、Postman 等任意合规宿主架构范式隐式全局对象同步读取显式App实例 异步事件处理器迁移后的典型效果——工具的交互式 UI 直接渲染在聊天流中例如客户分群数据看板 核心收益一次编写处处渲染。详细架构说明见 docs/overview.md。 第一步安装 migrate-oai-app 技能该技能随官方仓库分发位于 plugins/mcp-apps/skills/migrate-oai-app/SKILL.md。三种安装方式任选其一详见 docs/agent-skills.md方式一Claude Code 插件市场推荐/plugin marketplace add modelcontextprotocol/ext-apps /plugin install mcp-appsmodelcontextprotocol-ext-apps方式二Vercel Skills CLI跨 Agent 通用npx skills add modelcontextprotocol/ext-apps方式三手动安装——克隆仓库后把技能目录复制到你的 Agent 技能目录git clone https://gitcode.com/GitHub_Trending/ex/ext-apps安装后问一句What skills do you have?看到migrate-oai-app出现即成功 ✅ 第二步一句话触发迁移直接对 AI 助手说以下任意一句即可触发技能Migrate from OpenAI Apps SDKConvert OpenAI App to MCPPort from window.openai技能会自动克隆 SDK 仓库作为参考代码然后带着你按步骤执行——它会提问、会决策、会动手改代码你只需审核。️ 第三步看懂核心变更AI 替你执行技能内置了完整的 API 映射表完整版在 docs/migrate_from_openai_apps.md帮你理解 AI 在改什么服务端扁平元数据_meta[openai/...]→ 嵌套结构_meta.ui.*直接用server.registerTool()→ 改用辅助函数registerAppTool()/registerAppResource()MIME 类型text/htmlskybridge→text/html;profilemcp-app。客户端这是最大的范式转变 OpenAI AppsMCP Appswindow.openai.toolInput加载时预填app.ontoolinput (params) ...回调window.openai.themeapp.getHostContext()?.themewindow.openai.callTool(...)await app.callServerTool({...})window.openai.openExternal({ href })await app.openLink({ url })参数名变了⚠️ 关键顺序先注册事件处理器再调用await app.connect()因为连接后事件可能立即触发。React 项目更省事——useApp钩子自动管理整个生命周期参考 src/react/useApp.tsx 和 examples/basic-server-react 模板。⚠️ 第四步CSP 配置是最大坑MCP Apps 的 HTML 以 MCP 资源形式投递、运行在无同源服务器的沙箱 iframe中——这意味着每一个网络来源都必须显式声明在 CSP 里漏一个就静默失败。技能会强制你在写任何迁移代码之前先做 CSP 排查用现有构建命令构建应用在产物中搜索所有引用的来源不只是外部来源归类为三个列表resourceDomains静态资源、connectDomainsAPI 请求、frameDomains嵌套 iframe并标注各自是通用、仅开发环境还是仅生产环境同时注意字段名从 snake_case 变为 camelCaseconnect_domains→connectDomains。CSP 细节见 docs/csp-cors.md。✅ 第五步用 basic-host 测试验证仓库自带 examples/basic-host 调试宿主迁移后按技能指引双终端启动# 终端 1你的 MCP 服务 npm run build npm run serve # 终端 2basic-host cd examples/basic-host npm install SERVERS[http://localhost:3001/mcp] npm run start打开http://localhost:8080确认三件事应用无控制台报错、ontoolinput收到工具参数、ontoolresult收到工具结果调试页会实时展示 Tool Input / Tool Result 数据流问题一目了然 第六步交付前清单10 分钟自查技能内置的收尾检查清单逐项确认全局搜索openai/、text/htmlskybridge——旧元数据键和 MIME 类型应全部替换搜索_domains/_domains:——snake_case CSP 字段应全部转为 camelCase搜索window.openai——应零残留全部替换为App实例方法逐一核对 CSP 排查清单中的每个来源都已写入registerAppResource()的 CSP 配置条件来源dev/prod由同一配置项同时控制运行时 URL 和 CSP 条目 更多资源资源路径迁移映射总表docs/migrate_from_openai_apps.md技能定义源码plugins/mcp-apps/skills/migrate-oai-app/SKILL.mdApp 类核心实现src/app.ts服务端辅助函数src/server/index.ts各前端框架模板examples/basic-server-react、examples/basic-server-vue 等已知未覆盖功能widgetState持久化、文件上传下载、模态框管理暂无 MCP 等价物技能会提示用localStorage或服务端状态替代。这些能力已在协议路线图中迁移后无需二次重构。迁移完成的那一刻你的应用就从只能在 ChatGPT 里跑的私有组件变成了任何 MCP 宿主都能渲染的开放标准应用——这 1 小时花得值 ✨【免费下载链接】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），仅供参考
