Need
小工具框架
Default options
Why it's needed
這是具狀態小工具的理想預設選擇，尤其適合 UI 需要篩選器、表格或多步驟互動的情況。
Codex use case
將您的應用程式帶入 ChatGPT
將您的使用案例轉化為專為 ChatGPT 打造、目標明確的應用程式。
Difficulty 進階
Time horizon 1 小時
端對端建置一項範圍明確的 ChatGPT 應用程式成果：定義工具、建立 MCP 伺服器與選用小工具的骨架、將其連接至 ChatGPT，並持續反覆調整，直到核心流程順利運作。
最適合
- 以一項使用者成果為核心，規劃第一個 ChatGPT 應用程式
- 在不過度建置的情況下，建立 MCP 伺服器、工具中繼資料與選用小工具的骨架
- 建立從本機 HTTPS 測試到 ChatGPT 開發人員模式驗證的緊密迭代循環
Contents
將您的應用程式帶入 ChatGPT
將您的使用案例轉化為專為 ChatGPT 打造、目標明確的應用程式。
端對端建置一項範圍明確的 ChatGPT 應用程式成果：定義工具、建立 MCP 伺服器與選用小工具的骨架、將其連接至 ChatGPT，並持續反覆調整，直到核心流程順利運作。
進階
1 小時
端對端建置一項範圍明確的 ChatGPT 應用程式成果：定義工具、建立 MCP 伺服器與選用小工具的骨架、將其連接至 ChatGPT，並持續反覆調整，直到核心流程順利運作。
進階
1 小時
相關連結
最適合
- 以一項使用者成果為核心，規劃第一個 ChatGPT 應用程式
- 在不過度建置的情況下，建立 MCP 伺服器、工具中繼資料與選用小工具的骨架
- 建立從本機 HTTPS 測試到 ChatGPT 開發人員模式驗證的緊密迭代循環
技能與外掛程式
- 規劃工具、串接 MCP 資源，並遵循目前的 ChatGPT 應用程式建置流程。
- 在 Codex 撰寫程式碼或建議架構前，先取得最新的 Apps SDK 官方指引。
- 透過精選技能與官方 Vercel MCP 伺服器，將 Vercel 生態系統的指引導入 Codex。
| Skill | Why use it |
|---|---|
| ChatGPT Apps | 規劃工具、串接 MCP 資源，並遵循目前的 ChatGPT 應用程式建置流程。 |
| OpenAI Docs | 在 Codex 撰寫程式碼或建議架構前，先取得最新的 Apps SDK 官方指引。 |
| Vercel | 透過精選技能與官方 Vercel MCP 伺服器，將 Vercel 生態系統的指引導入 Codex。 |
起始提示詞
使用 $chatgpt-apps 搭配 $openai-docs，在此程式碼庫中為 [use case] 規劃一個 ChatGPT 應用程式。
要求：
- 先從一項核心使用者成果著手。
- 提出 3–5 個名稱、說明、輸入和輸出皆清楚明確的工具。
- 建議 v1 需要小工具，或可先僅提供資料。
- MCP 伺服器以 TypeScript 為優先，小工具則以 React 為優先。
- 明確指出身分驗證、部署和測試需求。
輸出：
- 工具規劃
- 建議的檔案樹狀結構
- 基準提示詞集
- 風險與待釐清問題
使用 $chatgpt-apps 搭配 $openai-docs，在此程式碼庫中為 [use case] 規劃一個 ChatGPT 應用程式。
要求：
- 先從一項核心使用者成果著手。
- 提出 3–5 個名稱、說明、輸入和輸出皆清楚明確的工具。
- 建議 v1 需要小工具，或可先僅提供資料。
- MCP 伺服器以 TypeScript 為優先，小工具則以 React 為優先。
- 明確指出身分驗證、部署和測試需求。
輸出：
- 工具規劃
- 建議的檔案樹狀結構
- 基準提示詞集
- 風險與待釐清問題
您將建置的內容
每個以 MCP 為後端的外掛程式都包含三個部分：
- 一個 MCP 伺服器，負責定義工具、傳回資料、執行身分驗證，並指示 ChatGPT 使用任何 UI 資源。
- 一個選用的網頁元件，會在 ChatGPT iframe 內呈現。您可以使用 React，或純 HTML、CSS 和 JavaScript 來建置。
- 一個模型，會根據您提供的中繼資料，決定何時呼叫外掛程式的工具。
Codex 最適合負責這些部分周邊的重複性工程工作：
- 規劃工具介面與中繼資料。
- 建立伺服器和小工具的骨架。
- 串接本機執行指令碼。
- 分階段專注處理身分驗證與部署變更。
- 編寫可證明外掛程式在 ChatGPT 中正常運作的驗證迴圈。
Codex 為何非常適合這項工作
- 以 MCP 為後端的外掛程式可清楚拆分為伺服器、選用 UI，以及由模型驅動的 工具呼叫。
- Codex 提示詞在任務明確、範圍清楚且 容易驗證時最有效，這些條件與外掛程式建置工作十分契合。
- 技能與
AGENTS.md可為 Codex 提供所需的可重複使用指示和專案規則，讓它始終有所依循。
如要進一步瞭解如何安裝及使用技能，請參閱我們的 技能文件。
使用方式
先決條件
- 先從一項核心使用者成果著手，不要嘗試將整個產品移植到對話中。
- 預先選定技術堆疊：伺服器使用 TypeScript 或 Python，小工具則使用 React，或純 HTML、CSS 和 JavaScript。
- 決定開發期間要使用的 HTTPS 路徑，例如
ngrok或 Cloudflare Tunnel。 - 有些設定仍以舊版術語指稱 MCP 伺服器連線。在 本機測試期間，請將這些標籤視為代表已註冊的伺服器。
- 先鎖定外掛程式的一項明確成果，並要求 Codex 提出 3 至 5 個工具，每個工具都要有清楚的名稱、說明、輸入和輸出。
- 先決定 v1 是否只需提供資料，或需要小工具；接著先依現有程式碼庫模式建立 MCP 伺服器與選用小工具的骨架，再新增相依套件。
- 透過 HTTPS 在本機執行 MCP 伺服器、在 ChatGPT 開發人員模式中連線至該伺服器，並使用一小組直接、間接及負向提示詞進行測試。
- 反覆調整中繼資料、狀態管理，以及
structuredContent和_meta承載資料，直到核心讀取流程能在 ChatGPT 中穩定運作。 - 只有在使用者專屬資料或寫入動作確實需要時，才加入 OAuth 2.1，避免讓匿名或唯讀流程變得複雜。
- 準備一個使用穩定
/mcp端點的託管預覽，驗證串流與 UI 資產託管，並在分享或提交外掛程式前檢閱上線檢查清單。
建議的提示詞
此工作流程的優質提示詞包含相同要素：
- 一項明確成果：說明外掛程式應協助使用者在 ChatGPT 中完成什麼。
- 具體的技術堆疊：說明伺服器要使用 TypeScript 或 Python，以及小工具要使用 React 或維持輕量化。
- 明確的工具界線：要求 Codex 提出或建置一小組工具，每個工具只負責一項工作。
- 身分驗證需求：說明第一個版本是否可供匿名使用，或是否需要連結帳戶並執行寫入動作。
- 本機開發路徑：說明預計用於在 ChatGPT 中進行 HTTPS 測試的通道或託管路徑。
- 驗證步驟：告訴 Codex 要執行哪些指令、測試哪些提示詞，以及應回報哪些佐證資料。
避免用一個內容龐雜的提示詞，要求一次完成規劃、實作、身分驗證、部署、提交和完善細節。請改將工作拆分為多個較小的里程碑。
建立外掛程式骨架前先進行規劃
使用 $chatgpt-apps 搭配 $openai-docs，在此程式碼庫中為 [use case] 規劃一個以 MCP 為後端的外掛程式。
要求：
- 先從一項核心使用者成果著手。
- 提出 3–5 個名稱、說明、輸入和輸出皆清楚明確的工具。
- 建議 v1 需要小工具，或可先僅提供資料。
- MCP 伺服器以 TypeScript 為優先，小工具則以 React 為優先。
- 明確指出身分驗證、部署和測試需求。
輸出：
- 工具規劃
- 建議的檔案樹狀結構
- 基準提示詞集
- 風險與待釐清問題
建立第一個可運作版本的骨架
使用 $chatgpt-apps 搭配 $openai-docs，為這個以 MCP 為基礎的外掛程式建立第一版架構。
技術堆疊：
- TypeScript MCP 伺服器
- React 小工具
- Vite 建置
- 透過 ngrok 提供本機 HTTPS
限制條件：
- 將外掛程式的範圍維持精簡：僅包含一個讀取流程，且最多一個寫入流程。
- 為模型傳回精簡的 structuredContent，並將僅供小工具使用的資料保留在 _meta 中。
- 讓工具處理常式具備冪等性。
- 新增相依性前，先沿用程式碼庫的既有模式。
驗證：
- 啟動本機伺服器
- 說明如何在 ChatGPT 開發人員模式中連接 MCP 伺服器
- 列出要測試的確切提示詞
核心流程正常運作後再新增身分驗證
使用 $chatgpt-apps 搭配 $openai-docs，為這個外掛程式的 MCP 伺服器新增身分驗證。
要求：
- 若可行，讓唯讀工具保持匿名存取。
- 僅針對特定使用者的資料或寫入動作新增 OAuth 2.1。
- 使用現有的身分識別提供者，例如 Auth0 或 Stytch。
- 以文件說明權限範圍、Token 檢查和開發人員模式測試流程。
輸出：
- 身分驗證流程摘要
- 伺服器變更
- 必要的環境變數
- 端對端測試計畫
準備外掛程式以進行部署與審查
使用 $chatgpt-apps 搭配 $openai-docs 和 @vercel，準備這個外掛程式的託管預覽版本。
要求：
- 提供穩定的 HTTPS /mcp 端點。
- 確保 /mcp 上的串流回應持續正常運作。
- 正確託管小工具資產。
- 新增上線準備檢查清單，涵蓋中繼資料、工具提示資訊、隱私權和測試提示詞。
輸出：
- 部署計畫
- 預覽 URL 或託管步驟
- 審查檢查清單
- 尚存風險
上線準備情況
- 外掛程式只聚焦於一項使用者容易理解的明確目標。
- 工具組維持精簡，且中繼資料、輸入和輸出都有明確定義。
- MCP 伺服器可端對端運作並傳回精簡的
structuredContent，僅供小工具使用的資料則保留於_meta。 - 如有需要，小工具能在 ChatGPT 內正確呈現。
- 本機 HTTPS 測試迴圈可透過 ChatGPT 開發人員模式正常運作。
- 一小組直接、間接與負向提示詞均能通過測試，且對話流程與工具承載資料符合預期。
- 只有在存取特定使用者的資料或執行寫入動作確實需要時，才新增身分驗證。
- 在外掛程式分享或提交前，部署計畫與上線準備審查涵蓋中繼資料、工具提示資訊、隱私權及測試提示詞。
常見陷阱
- 要求 Codex 將整個產品移植到 ChatGPT。較佳做法：要求它聚焦於使用者的一項核心目標、三至五個工具，以及一個用途單一的小工具。
- 一開始就使用龐大的實作提示詞。較佳做法：將工作拆分為規劃、建立初始架構、身分驗證、部署與審查等階段。
- 在工具規格尚未釐清前就編寫 UI。較佳做法：先規劃工具介面與回應結構描述，再建置小工具。
- 略過以官方文件為依據的步驟。較佳做法：搭配使用
$chatgpt-apps與$openai-docs，讓初始架構遵循現行的外掛程式指南。 - 把中繼資料留到最後才處理。較佳做法：及早撰寫工具說明與參數文件，再針對這些內容重新執行一組提示詞測試。
- 尚未確認匿名或唯讀路徑可行，就新增身分驗證。較佳做法：先讓核心工具流程正常運作，再為確實需要身分驗證的工具新增 OAuth。
- 尚未在 ChatGPT 內測試，就宣告外掛程式已完成。較佳做法：在開發人員模式中連接 MCP 伺服器、檢查工具承載資料，並驗證實際的 對話流程。
Tech stack
Need
Default options
Why it's needed
Need
託管服務
Default options
Why it's needed
可快速部署、提供預覽環境與自動 HTTPS，並有明確路徑可建立託管的 MCP 端點。
