如果两年前有人告诉我，只需通过 ChatGPT 就能创建 Spotify 播放列表、预订去西班牙的旅行，甚至点 Doordash 外卖，我一定会说这只是幻想。
然而，如今 OpenAI 正式发布了 ChatGPT 应用（Apps），让这些事情都成为现实。它不仅结合了 ChatGPT 的自然语言能力，还为用户带来了丰富的可交互界面体验。

OpenAI 首批携手 7 家合作伙伴（如 Zillow、Spotify 等）推出了应用，并计划引入更多第三方。更令人兴奋的是，他们同时开放了 Apps SDK，让任何开发者都能自行创建属于自己的 ChatGPT 应用。

对于开发者而言，这是一个巨大的机会。ChatGPT 每周活跃用户已达 8 亿人，相当于全球成年人口的 10%。
这意味着 OpenAI 应用的分发潜力巨大——这或许就是 AI 领域的“苹果 App Store 时刻”。
接下来，我们将深入解析 Apps SDK 的底层机制。

---

一、Apps SDK 与 Model Context Protocol (MCP) 的关系

Apps SDK 是构建在 Model Context Protocol（MCP） 之上的。
如果你还不熟悉 MCP，建议先阅读相关资料再继续往下。

Apps SDK 应用主要由两个部分组成：

• MCP 服务器

• Web 前端视图（Widgets）

两者协同工作，为 ChatGPT 提供交互式 UI。

用户请求应用体验时，大致流程如下：

1. 当用户对 ChatGPT 说 “帮我在 Zillow 上找房”，模型会调用 Zillow 的 MCP 工具；

2. MCP 工具通过 _meta 标签指向相应的 MCP 资源；

3. MCP 资源中包含编译好的 React 组件脚本；

4. 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 必须与资源中注册的一致，否则不会被正确发现和渲染。

server.registerTool( "show_spotify_playlist", { title: "展示 Spotify 播放列表", _meta: { "openai/outputTemplate": "ui://widget/spotify-playlist.html", "openai/toolInvocation/invoking": "正在加载播放列表", "openai/toolInvocation/invoked": "播放列表加载完成", }, inputSchema: { playlistId: z.number() }, }, async ({ playlistId }) => { return { content: [{ type: "text", text: "播放列表已显示！" }], structuredContent: { playlistId }, }; } );

structuredContent 

用于将结构化数据传递给 Widget，实现组件数据的“注水”（hydration）。

---

2. MCP 资源注册

资源 URI 必须以 ui:// 开头，并与 _meta 中指定的模板 URI 一致。
资源内容需包含 mimeType 与 text，类型应为 text/html+skybridge，并包含脚本加载代码：

server.registerResource( "spotify-playlist-widget", "ui://widget/spotify-playlist.html", {}, async () => ({ contents: [ { uri: "ui://widget/spotify-playlist.html", mimeType: "text/html+skybridge", text: '<script src="dist/playlist.js"></script>', }, ], }) );

---

四、理解 window.openai API 与 Widgets

Widget 实际上就是一个单页 React 应用。
当它在支持 Apps SDK 的客户端中运行时，可访问 window.openai API，用于与 LLM 交互。

常见功能包括：

1. 数据注水（Hydration）

在 MCP 工具中返回的 structuredContent 可通过 window.openai.toolOutput 读取：

const { columns } = window.openai.toolOutput;

这相当于 React 组件的 props，用于保持状态一致。

---

2. 状态持久化

可使用 window.openai.setWidgetState() 存储 UI 状态（类似浏览器的 localStorage）：

window.openai.setWidgetState({ tab: "overview" });

稍后可通过 window.openai.widgetState 读取。

---

3. 在 Widget 内调用工具

Widget 内可以直接调用 MCP 工具：

window.openai?.callTool("order_pizza", { order: "pepperoni", qty: 2 });

这在交互类应用中非常有用。

---

4. 向 LLM 发送消息

可通过 sendFollowupMessage 向 LLM 会话发送后续消息：

await window.openai?.sendFollowupMessage({ prompt: "帮我规划一下我收藏的披萨店品尝行程。", });

---

五、本地测试 Apps SDK

目前开发 Apps SDK 应用需要通过 ChatGPT 开发者模式 并公开服务器（如使用 ngrok）。
但你也可以使用 MCPJam Inspector 在本地调试，无需公网暴露。

通过 MCPJam，你可以：

• 本地连接 Apps SDK 服务器

• 可视化触发工具与资源

• 在 LLM 模拟环境中测试交互

---

六、部署 MCP 服务器

如果你已构建 Apps SDK 服务器，强烈推荐使用 Alpic 进行托管。
Alpic 提供专为 MCP 设计的云平台，支持：

• 快速部署、监控与扩展

• TypeScript 与 Python 支持

• 内置使用分析仪表盘

你还可以直接使用 Alpic 的 Apps SDK 模板 一键创建项目。

---

🔧 简易框架推荐（含链接）

现在，为了让开发更简单，已经陆续出现了一些开源框架。下面介绍三个不错的选择：

1. Chat.js（JavaScript + React）
   GitHub 链接：https://github.com/DooiLabs/Chat.js

2. FastApps（Python + React）
   GitHub 链接：https://github.com/DooiLabs/FastApps

3. chatgpt-apps-sdk-nextjs-starter（Next.js 启动模板）
   GitHub 链接：https://github.com/vercel-labs/chatgpt-apps-sdk-nextjs-starter