← 返回目录

OpenAI Apps SDK Examples

官方

教程 / 资源合集

OpenAI 官方 Apps SDK 示例集合，演示如何构建带交互式界面的 MCP 服务器

这是教程或资源合集，本身不能安装到客户端使用。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 133 / 438
Stars: ★ 2.4k 非常热门
传输方式: SSE · Streamable HTTP
运行环境: Node.js 18+ · Python 3.10+
凭据: 可选 API Key
许可证: MIT
最近提交: 5 个月前

59FMRS · C

OpenAI 官方维护的 Apps SDK/MCP 示例仓库，提供多个可运行的 Node/Python 服务器示例（Pizzaz、Kitchen Sink Lite、Solar System、Authenticated、Shopping Cart），配合前端组件构建脚手架，用于教学与二次开发，而非直接面向最终用户的生产服务。

最强项 · 文档质量 15/20 最弱项 · 可靠性 8/20

可靠性

8/20

安全与权限

13/20

维护活跃度

12/20

文档质量

15/20

安装易用性

11/20

查看各项评分依据

可靠性 8/20: README 描述了多个并行的 MCP 服务器实现（Node/Python，Pizzaz、Solar System、Kitchen Sink、Shopping Cart、Authenticated），并给出了构建（pnpm run build）、静态资源服务（pnpm run serve）与各服务器启动命令，happy path 看起来自洽。但未提供服务器清单（manifest not cached），未见任何 CI 工作流或提交的测试文件用于验证工具列表/调用与实际行为一致，也没有描述错误处理或异常路径。根据静态评审规则，缺乏可验证的执行证据（CI + 覆盖关键路径的测试）时可靠性不得超过 12 分，故给出 8 分，反映『流程可信但完全未经验证』的状态。
安全与权限 13/20: 仓库提到了针对 ngrok 隧道的 DNS rebinding 防护（需设置 MCP_ALLOWED_HOSTS / MCP_ALLOWED_ORIGINS），这是积极的安全信号；Authenticated 示例声明支持『不同级别的 OAuth』但未展示具体的凭据存储、作用域限制或最小权限设计细节；Shopping Cart 示例明确说明状态未做服务器端持久化，仅为演示机制，且文档中提醒生产环境需自行处理，体现了如实的风险披露。未发现秘钥泄露、破坏性操作无确认、隐蔽数据外传等红线问题。但由于服务器清单未缓存，无法核实工具的实际权限范围与数据边界，扣分处理，给 13 分。
维护活跃度 12/20: 该仓库为 OpenAI 官方仓库，MIT 许可证明确，star 数（2296）和开放 issue 数（135）表明有一定活跃度，且未被归档。但 README 未提供发布节奏、版本号策略、安全响应渠道等信息；Contributing 部分明确声明『可能不会审查所有建议』，暗示对外部贡献的响应有限。缺乏可验证的维护治理证据，给 12 分。
文档质量 15/20: 文档层次较为完整：先决条件、依赖安装、构建与静态资源服务步骤、每个子服务器（Node/Python 各例）的独立运行命令、ChatGPT 开发者模式接入与 ngrok 隧道配置、DNS rebinding 环境变量设置、生产部署所需的环境变量（BASE_URL/API_BASE_URL）均有说明，且包含已知的 Chrome 142 本地网络访问问题的排障步骤。但缺少工具参数/JSON Schema 的具体说明、速率限制、成本方面的信息，且部分服务器（如 Authenticated 的 OAuth 细节）描述较浅，故给 15 分。
安装易用性 11/20: 安装步骤具体且可执行：pnpm install → pnpm run build → pnpm run serve → 启动所选的语言/服务器组合 → 如需 ChatGPT 测试则额外配置 ngrok 与允许的 host/origin 环境变量。步骤数量较多，涉及多语言环境（Node 与 Python 虚拟环境）、多服务协同（静态资源服务器 + MCP 服务器）以及额外的隧道与环境变量配置，属于典型的『可运行但较繁琐』模式。由于没有 CI 或测试来验证这些步骤在全新环境下确实可无缝走通，按静态评审规则上限为 15 分，结合步骤复杂度给 11 分。

静态评测 · 未实际运行收录于 2026-08-26

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

希望学习 Apps SDK/MCP 组件化开发模式的前端与后端开发者
计划为 ChatGPT 构建自定义连接器应用的团队
需要参考真实代码示例（Node 与 Python 双语言）来理解 widget 渲染与状态同步机制的工程师

不适合谁

需要开箱即用的生产级 MCP 服务（这是示例/脚手架代码，非托管服务）
只想直接使用某个具体业务功能而不涉及开发的最终用户
需要非 ChatGPT 宿主（如 Claude Desktop）官方支持的场景，本仓库示例围绕 Apps SDK/ChatGPT 设计

所需权限

运行本地 HTTP 服务（默认端口 4444 用于静态资源，8000 用于各 MCP 服务器）
Authenticated 示例服务器需要配置 OAuth 相关凭据以演示鉴权工具调用
若通过 ngrok 等工具将本地服务暴露到公网，需要授权隧道访问并设置允许的 Host/Origin

风险与副作用

示例代码定位为学习起点，未包含生产级的持久化、鉴权强化等能力（如购物车状态仅演示机制，未做服务端持久化）
通过 ngrok 暴露本地服务到公网时，若配置不当（如未限制 MCP_ALLOWED_HOSTS/ORIGINS）可能带来未授权访问风险
Python Pizzaz 服务器使用 functools.lru_cache 缓存 widget HTML，重新构建或修改 assets 后需重启服务器，否则可能提供过期界面

安装接入

准备工作

运行环境：Node.js 18+ · Python 3.10+

其他可选配置项（4 个）

MCP_ALLOWED_HOSTS 可选通过 ngrok 等隧道访问 Python MCP 服务器时需允许的隧道主机名，设为你的 ngrok 域名（如 <custom_endpoint>.ngrok-free.app）。

MCP_ALLOWED_ORIGINS 可选 Python MCP SDK 的 DNS 重绑定保护所需的允许来源，设为隧道的 https 地址。

BASE_URL 可选部署 MCP 服务器时设置，用于生成指向托管静态资源的 widget HTML，填你的服务器公开地址。

API_BASE_URL 可选客户端 widget 用来构造完整 API URL 的基础地址，填你的 API 服务地址。

克隆仓库并安装依赖：pnpm install && pre-commit install（也可用 npm/yarn）。
构建组件资源包：pnpm run build，产物输出到 assets/ 目录。
启动静态资源服务：pnpm run serve（默认监听 http://localhost:4444，已启用 CORS）。
根据需要启动某个示例 MCP 服务器，例如 Pizzaz Node 版：cd pizzaz_server_node && pnpm start；或 Python 版服务器（如 Pizzaz、Kitchen Sink、Solar System、Authenticated、Shopping Cart）需先创建虚拟环境并安装对应 requirements.txt，再用 uvicorn <module>:app --port 8000 启动。
如需接入 ChatGPT，需先在设置中开启开发者模式（Developer Mode），然后在 Settings > Connectors 中添加连接器；若服务器运行在本地，可用 ngrok 等工具暴露公网地址（如 https://<endpoint>.ngrok-free.app/mcp）。
使用 ngrok 等隧道时，Python MCP SDK 会做 DNS 重绑定保护，需要提前设置环境变量 MCP_ALLOWED_HOSTS 与 MCP_ALLOWED_ORIGINS 为隧道域名。
部署到云端时需设置环境变量 BASE_URL（用于生成引用静态资源的 widget HTML）和 API_BASE_URL（供客户端 widget 构造完整 API 请求地址）。

验证是否装好

启动任一示例 MCP 服务器（如 pizzaz_server_node 运行 pnpm start，Python 服务器用 uvicorn 启动后经 ngrok 暴露），在 ChatGPT 开发者模式下于 Settings > Connectors 添加该连接器，然后提问“镇上最好吃的披萨有哪些？”并确认返回了 Pizzaz 小组件，即证明连接成功。

常见排障

若使用 Chrome 142 及以上版本看不到 widget 界面，需要在 chrome://flags 中禁用 local-network-access-check 并重启浏览器
确保先执行 `pnpm run build` 并用 `pnpm run serve` 启动静态资源服务，再启动 MCP 服务器，否则 widget 无法加载
修改或重新构建 assets 后，需重启 Python Pizzaz 服务器以清除 lru_cache 缓存
通过 ngrok 等隧道连接 ChatGPT 时，若报 DNS 重绑定保护错误，需设置 MCP_ALLOWED_HOSTS 与 MCP_ALLOWED_ORIGINS 环境变量为隧道域名

试试这样问

连接成功后，可以直接对 AI 助手这样说：

镇上最好吃的披萨有哪些？
展示一下太阳系 3D 模型
往购物车里加一份披萨并查看当前购物车状态
演示 kitchen sink 小组件的工具调用和宿主 API

使用场景

学习 Apps SDK 与 MCP 协议如何协同为 ChatGPT 渲染富交互界面

以 Pizzaz、Kitchen Sink、Solar System 等示例为起点，开发自定义的 ChatGPT 连接器应用

参考购物车示例学习如何用 widgetSessionId 在多轮工具调用间维护共享状态

参考鉴权示例学习如何为工具调用配置不同级别的 OAuth 权限

支持客户端

ChatGPT

依据项目文档列出，未经本站实测。

详细介绍

这是 OpenAI 官方仓库，收录了一系列示例 MCP 服务器与配套 UI 组件（widget），用于展示如何为 ChatGPT 构建基于 Apps SDK 的应用。仓库包含多个可独立运行的示例服务器：Pizzaz（Node 与 Python 双实现，展示列表、轮播、地图等视图及购物结账流程）、Kitchen Sink Lite（Node 与 Python，演示 window.openai 全部宿主 API，包括读取/写入 widget 状态、从组件内调用工具、请求切换显示模式等）、Solar System（Python，3D 太阳系可视化）、Authenticated（Python，演示不同级别的 OAuth 鉴权工具调用）、Shopping Cart（Python，演示如何用 widgetSessionId 在多轮工具调用间保持购物车状态）。仓库还提供 Vite 构建脚手架，将组件源码打包为可被 MCP 服务器直接引用的静态 HTML/JS/CSS 资源。定位是开发者学习和二次开发的起点，而非面向最终用户的生产服务。