场景定位
围绕一个明确用户结果规划并构建 ChatGPT app：定义工具、搭建 MCP server 和可选 widget，在 ChatGPT developer mode 中连接、测试和迭代核心流程。
- 难度
- 高级
- 时间跨度
- 约 1 小时
适合用于
- 围绕单个用户结果规划第一个 ChatGPT app
- 搭建 MCP server、工具元数据和可选 widget，但避免过度构建
- 从本地 HTTPS 测试到 ChatGPT developer mode 验证的紧凑循环
Skills & Plugins
相关工具
Starter Prompt
起步提示词
Use $chatgpt-apps with $openai-docs to plan a ChatGPT app for [use case] in this repo.
Requirements:
- Start with one core user outcome.
- Propose 3-5 tools with clear names, descriptions, inputs, and outputs.
- Recommend whether v1 needs a widget or can start data-only.
- Prefer TypeScript for the MCP server and React for the widget.
- Call out auth, deployment, and test requirements.
Output:
- Tool plan
- Proposed file tree
- Golden prompt set
- Risks and open questions你要构建什么
每个 ChatGPT app 通常有三部分：定义 tools、返回数据、处理 auth 并指向 UI resource 的 MCP server；可选的 web component，在 ChatGPT iframe 里渲染；以及面向 app review、部署和用户体验的元数据与验证流程。
Codex 最适合接管这些重复工程工作：规划 tool surface 和 metadata，scaffold server 与 widget，写本地运行脚本，分阶段补 auth 和部署，并写出能证明 app 在 ChatGPT 中可用的验证循环。
为什么 Codex 适合
ChatGPT apps 天然拆成 server、可选 widget 和模型驱动的 tool calls。Codex 提示词在任务明确、范围小、容易验证时表现最好，这正好匹配 app 构建。
Skills 和 AGENTS.md 可以把可复用指令、官方文档 grounding、项目规则和验证步骤交给 Codex，让它在迭代过程中保持一致。
- 工具边界小且可测试。
- MCP server 和 widget 可以分别实现、验证和部署。
- 开发者模式提供了真实 ChatGPT 环境里的验证目标。
- review checklist 能转成明确的完成条件。
使用流程
先从一个 narrow app outcome 开始，要求 Codex 提出 3-5 个工具，每个工具都有清楚的名称、描述、输入和输出。
再决定 v1 是 data-only，还是需要 widget。不要一开始就把完整产品搬进 ChatGPT；先让一个核心读取或轻量写入流程跑通。
前置条件
- 选择一个核心用户结果。
- 选择 server stack：TypeScript 或 Python。
- 选择 widget stack：React，或纯 HTML/CSS/JavaScript。
- 确定本地 HTTPS 路径，例如 ngrok 或 Cloudflare Tunnel。
- 准备在 ChatGPT developer mode 中连接 app 的测试账号和说明。
建议提示词
强提示词通常包含清晰 outcome、具体 stack、工具边界、auth 与部署要求、以及验证方式。避免一个巨大 prompt 同时要求规划、实现、auth、部署、提交和 polish；把工作拆成 milestone 更稳。
发布就绪检查
- App 有一个用户一眼能理解的 narrow outcome。
- 工具集保持小而清晰，metadata、输入和输出明确。
- MCP server 能端到端运行，并返回简洁的 `structuredContent`。
- widget-only data 留在 `_meta`，不要污染模型需要理解的内容。
- 本地 HTTPS、托管 `/mcp` endpoint、streaming 和 widget assets 都经过验证。
常见陷阱
- 要求 Codex 把整个产品搬进 ChatGPT。更好的做法是从一个核心结果、3-5 个工具和一个窄 widget 开始。
- 用一个巨大 prompt 一次性做完所有阶段。更好的做法是规划、scaffold、auth、部署分阶段。
- 跳过官方文档 grounding。更好的做法是把 `$chatgpt-apps` 和 `$openai-docs` 一起使用。
- 没有在 ChatGPT developer mode 中验证。更好的做法是把真实连接、提示词和预期行为写进验收。
Prompt Library
建议提示词
先规划再 scaffold
Use $chatgpt-apps with $openai-docs to plan a ChatGPT app for [use case] in this repo.
Requirements:
- Start with one core user outcome.
- Propose 3-5 tools with clear names, descriptions, inputs, and outputs.
- Recommend whether v1 needs a widget or can start data-only.
- Prefer TypeScript for the MCP server and React for the widget.
- Call out auth, deployment, and test requirements.
Output:
- Tool plan
- Proposed file tree
- Golden prompt set
- Risks and open questions搭建第一版
Use $chatgpt-apps with $openai-docs to scaffold the first version of this ChatGPT app.
Stack:
- TypeScript MCP server
- React widget
- Vite build
- Local HTTPS via ngrok
Constraints:
- Keep the app narrow: one read flow and at most one write flow.
- Return concise structuredContent for the model and reserve widget-only data for _meta.
- Make tool handlers idempotent.
- Reuse existing repo patterns before adding dependencies.
Verification:
- Start the local server
- Explain how to connect the app in ChatGPT developer mode
- List the exact prompts to test核心流程跑通后再加 auth
Use $chatgpt-apps with $openai-docs to add auth to this ChatGPT app.
Requirements:
- Keep read-only tools anonymous if possible.
- Add OAuth 2.1 only for user-specific data or write actions.
- Use an existing identity provider if the repo already has one.
- Document callback URLs, scopes, env vars, and test account assumptions.
- Verify the app still works in ChatGPT developer mode after auth is added.准备部署和审核
Use $chatgpt-apps with $openai-docs and @vercel to prepare this ChatGPT app for a hosted preview.
Requirements:
- Expose a stable HTTPS /mcp endpoint.
- Keep streaming responses working on /mcp.
- Host widget assets correctly.
- Review app metadata, tool descriptions, and launch checklist.
- Return a deployment URL and the exact ChatGPT developer-mode verification steps.