场景 051 · Codex Use Case

将应用接入 ChatGPT

围绕一个明确用户结果,定义工具、搭建 MCP 服务和可选 widget,在 ChatGPT 中连接验证并迭代。

IntegrationsCode
Bring your app to ChatGPTIntegrationsCode

原文核对:2026-10-13 · 中文正文 · 英文提示词与演示

场景定位

围绕一个明确用户结果,定义工具、搭建 MCP 服务和可选 widget,在 ChatGPT 中连接验证并迭代。

难度
高级
时间跨度
1 小时

适合用于

  • 规划首个 ChatGPT 应用。
  • 适度搭建 MCP 服务、工具元数据和 widget。
  • 从本地 HTTPS 测试到 ChatGPT 自定义 MCP 验证的紧密循环。

相关工具

ChatGPT Apps

规划工具、连接 MCP 资源并遵循当前构建流程。

ChatGPT Apps ↗
OpenAI Docs

编码或选架构前获取官方 Apps SDK 指南。

OpenAI Docs ↗
Vercel

通过精选技能和官方 MCP 获取 Vercel 生态指导。

Vercel ↗

起步提示词

英文原文 · 可复制后按实际材料修改

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

构建什么

MCP 插件有三个部分:

  • MCP 服务:定义工具、返回数据、执行认证并指向 UI 资源。
  • 可选 Web 组件:在 ChatGPT iframe 中渲染,可用 React 或原生 HTML/CSS/JavaScript。
  • 模型:根据元数据决定何时调用工具。

Codex 可承担这些重复工程工作:

  • 规划工具接口与元数据。
  • 搭建服务和 widget。
  • 连接本地运行脚本。
  • 分阶段加入认证和部署修改。
  • 编写证明插件在 ChatGPT 中可用的验证循环。

为何适合 Codex

  • 服务、可选 UI 和模型调用可以清晰拆分。
  • 明确、受控且易验证的任务适合 Codex。
  • 技能和 AGENTS.md 提供可复用指令与项目规则。

安装用法参阅技能文档。

使用方法

前置条件

  • 先解决一个用户核心需求。
  • 提前选择 TypeScript/Python 服务端,以及 React 或轻量原生 widget。
  • 确定 ngrok、Cloudflare Tunnel 等开发 HTTPS 路径。
  • 部分设置仍沿用旧连接名称,本地测试时将其理解为已注册 MCP 服务。
  1. 围绕一个结果提出 3–5 个名称、描述、输入输出明确的工具。
  2. 决定首版仅数据还是需要 widget,优先沿用仓库模式再添加依赖。
  3. 本地 HTTPS 运行,通过 Add custom MCP server 连接,在 ChatGPT 测试直接、间接和负面提示词。
  4. 迭代元数据、状态、structuredContent 与 _meta,直到核心读取稳定。
  5. 仅用户专属数据或写操作需要时加入 OAuth 2.1,避免复杂化匿名只读路径。
  6. 准备稳定 /mcp 托管预览,验证流式传输和 UI 资源,分享或提交前审阅上线清单。

提示词示例

有效提示词应包含:

  • 明确用户结果。
  • 具体服务端与 widget 技术栈。
  • 小型工具集,每个工具职责单一。
  • 匿名首版或关联账号、写入的认证要求。
  • 用于 ChatGPT 测试的 HTTPS 隧道或托管路径。
  • 应运行的命令、测试提示词和返回证据。

将规划、实现、认证、部署、提交和打磨拆成小里程碑,不要一次要求全部完成。

先规划插件

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs to plan an MCP-backed plugin 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 MCP-backed plugin.

Stack:

- TypeScript MCP server
- React widget
- Vite build
- Local HTTPS via ngrok

Constraints:

- Keep the plugin 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 MCP server in ChatGPT using Add custom MCP server
- List the exact prompts to test

核心流程可用后再加认证

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs to add auth to this plugin's MCP server.

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 such as Auth0 or Stytch.
- Document scopes, token checks, and the custom MCP server test flow in ChatGPT.

Output:

- Auth flow summary
- Server changes
- Required environment variables
- End-to-end test plan

准备部署与审查

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs and @vercel to prepare this plugin for a hosted preview.

Requirements:

- Expose a stable HTTPS /mcp endpoint.
- Keep streaming responses working on /mcp.
- Host widget assets correctly.
- Add a launch-readiness checklist covering metadata, tool hints, privacy, and test prompts.

Output:

- Deployment plan
- Preview URL or hosting steps
- Review checklist
- Remaining risks

上线准备

  • 用户能理解一个明确结果。
  • 工具少且元数据、输入输出明确。
  • MCP 端到端可用,structuredContent 简洁,widget 专属数据保留在 _meta。
  • 需要的 widget 在 ChatGPT 正确渲染。
  • 自定义 MCP 已连接,本地 HTTPS 测试循环可用。
  • 直接、间接和负面提示词的对话及工具数据符合预期。
  • 仅必要的数据或写操作加入认证。
  • 分享提交前审阅部署、元数据、工具提示、隐私和测试提示词。

常见问题

  • 不要一次移植整个产品;先做一个结果、3–5 个工具和窄范围 widget。
  • 避免巨大实现提示词;拆成规划、搭建、认证、部署、审阅。
  • 先明确工具契约与响应 schema,再写 UI。
  • 结合 $chatgpt-apps 和 $openai-docs 获取当前官方依据。
  • 尽早编写工具描述和参数文档,并回放提示词验证。
  • 先证明匿名或只读路径可用,再为必要工具加入 OAuth。
  • 完成前必须在 ChatGPT 连接服务,检查工具数据和真实对话流程。

技术栈

需要默认选项用途
组件框架ReactReact ↗适合有状态组件,尤其是需要筛选、表格或多步骤交互的 UI。
托管VercelVercel ↗提供快速部署、预览环境、自动 HTTPS,以及清晰的 MCP 端点托管路径。
展开英文原文对照

Build one narrow ChatGPT app outcome end to end: define the tools, scaffold the MCP server and optional widget, connect it in ChatGPT, and iterate until the core flow works.

What you build

Every MCP-backed plugin has three parts:

  • An MCP server that defines tools, returns data, enforces auth, and points ChatGPT at any UI resources.
  • An optional web component that renders inside a ChatGPT iframe. You can build it with React or with plain HTML, CSS, and JavaScript.
  • A model that decides when to call the plugin’s tools based on the metadata you provide.

Codex is most useful when it owns the repetitive engineering work around those parts:

  • Planning the tool surface and metadata.
  • Scaffolding the server and widget.
  • Wiring local run scripts.
  • Adding auth and deployment changes in focused passes.
  • Writing the verification loop that proves the plugin works in ChatGPT.

Why Codex is a strong fit

  • MCP-backed plugins split cleanly into a server, optional UI, and model-driven tool calls.
  • Codex prompting works best when the task is explicit, scoped, and straightforward to verify, which matches plugin-building work well.
  • Skills and AGENTS.md give Codex the reusable instructions and project rules it needs to stay grounded.

To learn more about how to install and use skills, see our skills documentation.

How to use

Prerequisites

  • Start with one core user outcome instead of trying to port an entire product into chat.
  • Choose the stack up front: TypeScript or Python for the server, and React or plain HTML, CSS, and JavaScript for the widget.
  • Decide what HTTPS path you will use during development, such as ngrok or Cloudflare Tunnel.
  • Some settings still use older terms for an MCP server connection. During local testing, treat those labels as referring to the registered server.
  1. Start with one narrow plugin outcome and ask Codex to propose three to five tools with clear names, descriptions, inputs, and outputs.
  2. Decide whether v1 can stay data-only or needs a widget, then scaffold the MCP server and optional widget using existing repository patterns before adding dependencies.
  3. Run the MCP server locally behind HTTPS, connect it in ChatGPT with Add custom MCP server, and test it with a small direct, indirect, and negative prompt set.
  4. Iterate on metadata, state handling, structuredContent, and _meta payloads until the core read flow behaves reliably inside ChatGPT.
  5. Add OAuth 2.1 only when user-specific data or write actions require it, without complicating anonymous or read-only flows.
  6. Prepare a hosted preview with a stable /mcp endpoint, verify streaming and UI asset hosting, and review the launch checklist before sharing or submitting the plugin.

Suggested prompts

Strong prompts for this workflow share the same ingredients:

  • One clear outcome: say what the plugin should help the user do inside ChatGPT.
  • A concrete stack: say whether you want TypeScript or Python on the server, and whether the widget should use React or stay lightweight.
  • Explicit tool boundaries: ask Codex to propose or build a small set of tools with one job per tool.
  • Auth expectations: state whether the first version can be anonymous or whether it needs linked accounts and write actions.
  • A local development path: mention the tunnel or hosting path you expect for HTTPS testing in ChatGPT.
  • Verification steps: tell Codex what commands to run, what prompts to test, and what evidence to report back.

Avoid one giant prompt that asks for planning, implementation, auth, deployment, submission, and polish in one pass. Split the work into smaller milestones instead.

Plan the Plugin Before You Scaffold It

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs to plan an MCP-backed plugin 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

Scaffold the First Working Version

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs to scaffold the first version of this MCP-backed plugin.

Stack:

- TypeScript MCP server
- React widget
- Vite build
- Local HTTPS via ngrok

Constraints:

- Keep the plugin 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 MCP server in ChatGPT using Add custom MCP server
- List the exact prompts to test

Add Auth Only After the Core Flow Works

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs to add auth to this plugin's MCP server.

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 such as Auth0 or Stytch.
- Document scopes, token checks, and the custom MCP server test flow in ChatGPT.

Output:

- Auth flow summary
- Server changes
- Required environment variables
- End-to-end test plan

Prepare the Plugin for Deployment and Review

官方提示词

英文原文 · 可复制后按实际材料修改

Use $chatgpt-apps with $openai-docs and @vercel to prepare this plugin for a hosted preview.

Requirements:

- Expose a stable HTTPS /mcp endpoint.
- Keep streaming responses working on /mcp.
- Host widget assets correctly.
- Add a launch-readiness checklist covering metadata, tool hints, privacy, and test prompts.

Output:

- Deployment plan
- Preview URL or hosting steps
- Review checklist
- Remaining risks

Launch readiness

  • The plugin has one narrow outcome that users can understand.
  • The tool set stays small and has explicit metadata, inputs, and outputs.
  • The MCP server works end to end and returns concise structuredContent, reserving widget-only data for _meta.
  • The widget, if needed, renders correctly inside ChatGPT.
  • A local HTTPS testing loop works with the custom MCP server connected in ChatGPT.
  • A small direct, indirect, and negative prompt set passes with the expected conversation flow and tool payloads.
  • Auth is added only where user-specific data or write actions require it.
  • A deployment plan and launch-readiness review cover metadata, tool hints, privacy, and test prompts before the plugin is shared or submitted.

Common pitfalls

  • Asking Codex to port the whole product into ChatGPT. Better move: ask for one core user outcome, three to five tools, and one narrow widget.
  • Starting with a giant implementation prompt. Better move: split the work into planning, scaffold, auth, deployment, and review passes.
  • Writing UI before the tool contract is clear. Better move: plan the tool surface and response schema first, then build the widget.
  • Skipping official docs grounding. Better move: pair $chatgpt-apps with $openai-docs so the scaffold follows current plugin guidance.
  • Treating metadata as an afterthought. Better move: write tool descriptions and parameter docs early, then replay a prompt set against them.
  • Adding auth before proving the anonymous or read-only path. Better move: get the core tool flow working first, then add OAuth for the tools that actually need it.
  • Declaring the plugin done before testing inside ChatGPT. Better move: connect the custom MCP server in ChatGPT, inspect tool payloads, and verify the real conversation flow.