---
title: "把你的應用接入 ChatGPT"
description: "說明如何把產品接入 ChatGPT：先選明確使用者結果，再設計少量 tools、MCP server 和可選 widget。"
verifiedAt: "2026-05-06"
---

import { Cards, Card } from 'fumadocs-ui/components/card';

把產品帶進 ChatGPT，不應該從“把整個產品搬進去”開始。更穩的做法是先選一個明確使用者結果，圍繞它設計少量 tools，搭建 MCP server，必要時再做 widget，然後在 ChatGPT developer mode 裡驗證核心流程。

> [!IMPORTANT]
> ChatGPT app 的 v1 目標要窄：一個使用者結果、少量 tools、清楚 metadata、可驗證的本地 HTTPS 測試路徑。

<Cards>
  <Card title="ChatGPT apps" href="https://developers.openai.com/codex/use-cases/chatgpt-apps">
    官方 Codex ChatGPT app 場景。
  </Card>
  <Card title="Apps SDK quickstart" href="https://developers.openai.com/apps-sdk/quickstart">
    當前 Apps SDK 構建入口。
  </Card>
  <Card title="MCP server" href="https://developers.openai.com/apps-sdk/build/mcp-server">
    先定義 tools 和 server contract，再做 widget。
  </Card>
</Cards>

## 構成

```mermaid
flowchart LR
    Outcome["core user outcome"] --> Tools["3-5 tools"]
    Tools --> MCP["MCP server"]
    MCP --> Widget["optional widget"]
    Widget --> Test["developer mode testing"]
    MCP --> Test
```

每個 ChatGPT app 通常由三部分組成：

- MCP server：定義 tools、返回資料、處理賬號連線，並指向 ChatGPT 需要載入的 UI resources。
- 可選 web component：在 ChatGPT iframe 中渲染，可以用 React，也可以用輕量 HTML/CSS/JS。
- model-driven tool calls：模型根據 metadata 決定何時呼叫 app tools。

Codex 適合負責：

- 規劃 tool surface 和 metadata。
- scaffold server 和 widget。
- 接好 local run scripts。
- 分階段加入 auth 和 deployment。
- 寫驗證 loop，證明 app 在 ChatGPT 裡能工作。

## 起始提示詞

```text
请结合 ChatGPT Apps SDK 官方文档，在这个 repo 中为 [use case] 规划一个 ChatGPT app。

要求：
- 先锁定一个核心用户结果
- 提出 3-5 个 tools，每个 tool 都有名称、说明、inputs、outputs
- 判断 v1 是否需要 widget，还是可以先 data-only
- MCP server 优先按 repo 现有 TypeScript / Python 模式实现
- 标出 auth、deployment、test requirements

输出：
- Tool plan
- Proposed file tree
- Golden prompt set
- Risks and open questions
```

這個 prompt 只要求規劃，不直接實現。先把 tools 和邊界講清楚，再 scaffold。

## 使用步驟

1. 從一個窄 outcome 開始，規劃 3 到 5 個 tools。
2. 判斷 v1 是否需要 widget。能 data-only 就先 data-only。
3. 按現有 repo patterns scaffold MCP server 和可選 widget。
4. 透過本地 HTTPS 路徑執行，例如 ngrok 或 Cloudflare Tunnel。
5. 在 ChatGPT developer mode 裡連線 app。
6. 用 small direct、indirect、negative prompt set 測試。
7. 迭代 metadata、state handling、`structuredContent` 和 `_meta` payloads。
8. 只有 user-specific data 或 write actions 需要時，再加入 OAuth。
9. 準備 hosted preview，保持穩定 `/mcp` endpoint。
10. 分享或提交前完成 launch checklist。

## Prompt 設計要點

強 prompt 通常包含：

- One clear outcome：app 要幫使用者完成什麼。
- Concrete stack：server 和 widget 使用什麼技術堆疊。
- Explicit tool boundaries：每個 tool 只做一件事。
- Auth expectations：第一版是否 anonymous / read-only。
- Local development path：如何用 HTTPS 接入 ChatGPT。
- Verification steps：測哪些 prompts、回報哪些 evidence。

避免一個 prompt 同時要求 planning、implementation、auth、deployment、submission 和 polish。更穩的 milestone 是：

1. Plan the app before scaffolding。
2. Scaffold the first working version。
3. Add auth only after the core flow works。
4. Prepare deployment and review。

## Launch Readiness

上線前至少確認：

- app 只有一個使用者一眼能看懂的窄 outcome。
- tool set 小而明確，metadata、inputs、outputs 都清楚。
- MCP server 能端到端工作，並返回簡潔 `structuredContent`。
- widget-only data 放在 `_meta`，不要塞進對話正文。
- widget 如有必要，能在 ChatGPT 內正確渲染。
- 本地 HTTPS 測試 loop 能透過 developer mode 跑通。
- direct、indirect、negative prompt set 都按預期觸發 conversation flow 和 tool payloads。
- 賬號連線只加在 user-specific data 或 write actions 真正需要的地方。
- deployment plan 覆蓋 metadata、tool hints、privacy 和 test prompts。

## 常見坑

- 讓 Codex 把整個產品搬進 ChatGPT。
- 一個巨大 prompt 覆蓋所有階段。
- tool contract 還沒清楚就寫 UI。
- 不讓 Codex 查當前官方 Apps SDK docs。
- metadata 最後才補。
- 核心 read flow 沒通就加賬號連線。
- 沒在 ChatGPT 裡測試就宣佈完成。

## 官方資料

- [ChatGPT apps use case](https://developers.openai.com/codex/use-cases/chatgpt-apps)
- [Apps SDK quickstart](https://developers.openai.com/apps-sdk/quickstart)
- [Build an MCP server](https://developers.openai.com/apps-sdk/build/mcp-server)
- [Testing](https://developers.openai.com/apps-sdk/deploy/testing)
- [Codex skills](https://developers.openai.com/codex/skills)
