过去两年，AI 工具的变化速度可以说是"光速"。从写代码、生成图片，到自动总结报告，我们已经见识到大模型的强大。但如果现在告诉你------
你可以直接在 ChatGPT 里 生成 Spotify 播放列表、预订去西班牙的机票、甚至点外卖，你会不会觉得这有点科幻？
这并不是遥远的未来，而是 OpenAI 刚刚正式推出的 ChatGPT Apps（应用生态） 所带来的全新体验。
它让 ChatGPT 不再只是一个聊天工具，而是一个 可交互的"超级应用平台" 。开发者可以通过自然语言与用户交互，同时提供丰富的界面组件，就像用微信小程序或 App Store 一样。
目前，OpenAI 已与 Zillow、Spotify 等七家合作伙伴首发上线应用，并同步开放 Apps SDK ------ 任何人都能构建属于自己的 ChatGPT 应用。
对于开发者来说，这意味着：
一个新的生态、一个新的分发渠道、一个新的 AI 创业机会。
据统计，ChatGPT 已拥有 8 亿周活用户 ，覆盖全球 10% 的成年网民。
如果说十多年前 App Store 改变了移动互联网，那么今天的 Apps SDK，或许就是 AI 时代的 App Store 时刻。
一、Apps SDK 与 Model Context Protocol (MCP) 的关系
Apps SDK 是构建在 Model Context Protocol（MCP） 之上的。
如果你还不熟悉 MCP，建议先阅读相关资料再继续往下。
Apps SDK 应用主要由两个部分组成：
- MCP 服务器
- Web 前端视图（Widgets）
两者协同工作，为 ChatGPT 提供交互式 UI。
用户请求应用体验时，大致流程如下：
当用户对 ChatGPT 说 "帮我在 Zillow 上找房"，模型会调用 Zillow 的 MCP 工具；
MCP 工具通过 _meta 标签指向相应的 MCP 资源；
MCP 资源中包含编译好的 React 组件脚本；
ChatGPT 从 MCP 服务器获取该资源，并在 iFrame 中渲染出界面。
二、Apps SDK 项目结构
OpenAI 推荐的项目结构如下：
app/
server/ （MCP 服务器端逻辑）
web/
package.json
tsconfig.json
src/component.tsx （React 组件源码）
dist/component.js （编译后的 Widget 文件）
MCP 服务器会暴露出包含前端脚本的 HTML 内容。
这意味着你可以使用任意前端框架（React、Svelte 等），只要最终编译出 JS 文件即可。
当然，这不是唯一结构。
一些开发者会将服务器与 Widget 分开部署，只要 MCP 服务器正确指向远程 Widget 资源，照样可以渲染 UI。
三、构建 Apps SDK MCP 服务器
Apps SDK 的 MCP 服务器与常规 MCP 服务器类似，但多了与 UI 相关的资源配置。
当 LLM 认为合适时，会主动调用你的工具，并请求对应的 MCP 资源来展示 Widget。
1. MCP 工具注册
在工具描述符中，通过 _meta 标签的 openai/outputTemplate 指定 Widget 模板的 URI。
URI 必须与资源中注册的一致，否则不会被正确发现和渲染。
structuredContent 用于将结构化数据传递给 Widget，实现组件数据的"注水"（hydration）。
2. MCP 资源注册
资源 URI 必须以 ui:// 开头，并与 _meta 中指定的模板 URI 一致。
资源内容需包含 mimeType 与 text，类型应为 text/html+skybridge，并包含脚本加载代码。
四、理解 window.openai API 与 Widgets
Widget 实际上就是一个单页 React 应用。
当它在支持 Apps SDK 的客户端中运行时，可访问 window.openai API，用于与 LLM 交互。
常见功能包括：
- 数据注水（Hydration） ：
MCP 工具返回的结构化数据可通过window.openai.toolOutput读取，相当于组件的 props，用于保持状态一致。 - 状态持久化 ：
可使用window.openai.setWidgetState()存储 UI 状态（类似浏览器的 localStorage），稍后可通过window.openai.widgetState读取。 - 在 Widget 内调用工具 ：
Widget 可以直接调用 MCP 工具，这在交互类应用中非常有用。 - 向 LLM 发送消息 ：
可以使用sendFollowupMessage向 LLM 会话发送后续消息。
五、本地测试 Apps SDK
目前开发 Apps SDK 应用需要通过 ChatGPT 开发者模式 并公开服务器（如使用 ngrok）。
但你也可以使用 MCPJam Inspector 在本地调试，无需公网暴露。
通过 MCPJam，你可以：
- 本地连接 Apps SDK 服务器
- 可视化触发工具与资源
- 在 LLM 模拟环境中测试交互
六、部署 MCP 服务器
如果你已构建 Apps SDK 服务器，强烈推荐使用 Alpic 进行托管。
Alpic 提供专为 MCP 设计的云平台，支持：
- 快速部署、监控与扩展
- TypeScript 与 Python 支持
- 内置使用分析仪表盘
你还可以直接使用 Alpic 的 Apps SDK 模板 一键创建项目。
🔧 简易框架推荐（含链接）
现在，为了让开发更简单，已经陆续出现了一些开源框架。下面介绍三个不错的选择：
Chat.js（JavaScript + React）
GitHub 链接： github.com/DooiLabs/Ch...
FastApps（Python + React）
GitHub 链接： github.com/DooiLabs/Fa...
chatgpt-apps-sdk-nextjs-starter（Next.js 启动模板）
GitHub 链接： github.com/vercel-labs...