CodeGym /課程 /ChatGPT Apps /Dev Mode 在 ChatGPT ...

Dev Mode 在 ChatGPT 中：連接本機應用程式

ChatGPT Apps

等級 2 , 課堂 3

開放

1. Developer Mode 到底是什麼（用專業的說法）

你對 Dev Mode 已略有了解，但現在重點是基於實際經驗拼出完整圖景。

在 ChatGPT 中，Developer Mode 是一種特殊模式，平台允許你直接連接你的應用，不必先發佈到 Store。你對 ChatGPT 說：「這是我的 MCP 伺服器的 URL」，而 ChatGPT 會把它當作帶 UI 的外部工具—可以呼叫它的工具、載入小工具，一切都在一般對話中完成。

回想架構，在 Dev Mode 下 ChatGPT 充當 MCP 用戶端，而你的 Next.js 樣板則是 MCP 伺服器。ChatGPT 與 /mcp 建立連線，並詢問：「你會做什麼？」（tools 與 resources 的清單），之後在對話過程中可以呼叫這些工具，並在 iframe 中顯示你的小工具。

務必將 Dev Mode 與 Store 區分開：

Dev Mode 是你個人的小「車庫」：可以大膽嘗試、頻繁變更工具結構，不必顧慮使用者。
Store 是展示櫥窗：送入的是穩定版本，通過審查，並具備政策與描述等完整內容。這是我們課程最後要去的地方，現在先在車庫裡動手做。

截至 2025 年底，帶 Apps SDK 的 Dev Mode 在所有 ChatGPT 方案均可使用，但在企業帳號中有時需要管理員在工作區層級啟用。如果設定中看不到 Developer Mode 的切換開關，這是首要檢查項目。

2. 在本講開始前我們已有什麼

在介面上點任何東西之前，先確認本機端已準備就緒。

首先，是 Next.js 的開發伺服器。你已在專案根目錄執行過：

npm run dev

預設情況下，Next.js 16 會監聽 3000 埠，因此你的 UI 可透過 http://localhost:3000 存取。

其次，MCP 路由。在 CodeGym Labs 的樣板中，MCP 伺服器以 route handler app/mcp/route.ts 實作。工具與資源在此檔案中註冊；當你在 Dev Mode 中連接應用時，ChatGPT 的第一批請求也會抵達這裡。

從架構角度，目前看起來是這樣：

你的瀏覽器 ──> http://localhost:3000 (Next.js dev, UI)
                           │
                           └── /mcp (Next.js 內部的 MCP 伺服器)

目前這裡和 ChatGPT 沒有任何連線—它在雲端，而你的 localhost 對它不可見。通道的詳細設定是下一講的主題。為求簡單，這裡先假設你已擁有指向 /mcp 的任何公開 HTTPS URL（例如透過 ngrok 或 Cloudflare Tunnel，依樣板的 README 設定）。

若你尚未建立通道—不打緊。現在先把 Dev Mode 的整個步驟鏈走一遍，等有了 HTTPS URL 後就知道要做什麼。

如果你已經有指向 /mcp 的 HTTPS URL，接下來可以逐步實作。
若尚未有—就將本講當作「介面導覽」：重點是理解步驟鏈，等下講設定好通道後再做實際啟動。

3. 在 ChatGPT 介面中啟用 Developer Mode

第一步—先讓 ChatGPT 顯示相關設定。請這樣做：

先以你要用來開發的那個帳號登入 ChatGPT 網頁版。按左下角（或右上角—UI 持續演進）個人頭像，選擇 Settings（設定）。

在設定中找到與應用相關的區塊：通常叫作 Apps & Connectors 或 Connected apps。開啟此區塊。在頁面底部（或於 Advanced / 進階分頁）會出現 Developer Mode 的切換開關。這就是你要啟用的選項。

啟用 Dev Mode 後，ChatGPT 通常會顯示「已啟用開發者模式」的通知。同一區塊會出現類似 Create、Create connector、New app 的按鈕—措辭可能略有不同，但重點是：你有了建立自有連接應用的入口。

如果在設定中完全看不到 Apps & Connectors 區塊或 Developer Mode 開關，請檢查：

你是否的確登入了要使用的那個 ChatGPT 帳號；
在企業帳號中，此模式可能需要由工作區管理員啟用。

有時只要登出再登入就行（Dev Mode 的經典「重連網路」）。

4. 建立自己的應用／連接器並填入 MCP URL

現在 Dev Mode 已啟用，我們來把你的 GiftGenius 註冊到 ChatGPT。以下是「實際上該怎麼做」的流程。如果 HTTPS URL 尚未設定，把這些步驟當作預演：先看看等通道就緒時我們要做什麼。

一切都在你剛去過的 ChatGPT 設定區塊完成。大致順序如下。

再次開啟 Settings → Apps & Connectors。裡面能看到既有連接應用清單（多半暫時是空的）與 Create／Add connector 按鈕。點下去—會開啟建立應用的表單。

表單通常包含三個關鍵欄位：

名稱（Name）。這是人類可讀的名稱，你和 ChatGPT 都會看到。對本課程來說，取名為 GiftGenius (dev) 很方便—一眼就知道這是本機的開發版。
描述（Description）。簡要說明應用做什麼、何時該使用。範例：「根據人的興趣挑選禮物點子」。這行日後會影響 discovery—模型會用它來判斷何時在聊天中推薦你的 App。
MCP 伺服器的 URL（有時標成 Connector URL、MCP endpoint、App URL 等）。這是最重要的欄位：把指向你應用的 /mcp 的公開 HTTPS URL 貼進來。

例如：

https://my-giftgenius-dev.ngrok.app/mcp

或是

https://giftgenius-dev.trycloudflare.com/mcp

此欄位的關鍵細節：

必須是 https://，否則 ChatGPT 會拒絕連線；
末尾必須有 /mcp，因為 MCP 伺服器就設在樣板中的該路徑；官方 Apps SDK 文件也正是這麼說明。

如何取得此 URL，我們會在下一講詳細說明（通道、Cloudflare、ngrok）。現在重點是理解概念：你的本機 http://localhost:3000/mcp 必須想辦法變成公開的 https://…/mcp，而你要把這個公開位址填入表單。

填完欄位後按下 Create／儲存。此時 ChatGPT 會與你的伺服器進行「握手」：向該 URL 發送 HTTP 請求，期待取得能力宣告（tools/resources 清單、後設資料），並檢查伺服器是否依 MCP 協定回應。若一切正常，連接器會出現在清單中，你會看到 ChatGPT 發現了哪些工具。下一節我們要解析握手過程究竟發生什麼，以及如何在日誌中看到它。

如果你尚未設定通道而貼了假的 URL，ChatGPT 會直接告訴你無法連上伺服器。這同樣有幫助：你會立刻知道錯誤顯示在何處、以何種方式呈現。

5. 底層發生了什麼：用白話理解 MCP 握手

表面上看起來像是一般的「依 URL 新增應用」表單。實際上更有意思，現在搞懂它很有幫助，之後比較好除錯。

你已看到在建立連接器時，ChatGPT 會打到你的 /mcp 並期待拿到宣告。我們把這段對話再拆細一點—對除錯非常有幫助。

按下 Create 之後，ChatGPT 會做幾件事。

首先，它以 MCP 用戶端身分連到你提供的 /mcp。依 MCP 協定，它預期該 HTTP endpoint 有伺服器，並實作基本能力：列出工具（list tools）、提供資源（小工具）、處理工具呼叫。

伺服器則以 JSON 結構描述以下內容：

伺服器名稱與版本；
工具清單：name、title、description、inputSchema 等；
資源清單：在哪取得你的小工具 HTML、MIME 類型、如何渲染等。

在 CodeGym 的 Next.js 樣板裡，以上邏輯已在 app/mcp/route.ts 實作：透過 SDK 類似呼叫 server.registerTool(...) 與 server.registerResource(...)。

若你想親眼看看握手過程，可以在 app/mcp/route.ts 加個簡單日誌。這更像是開發者除錯小技巧，你可先略過，之後想更深入時再回來：

// app/mcp/route.ts
import { NextRequest, NextResponse } from "next/server";
// 匯入你既有的 server / buildManifest

export async function GET(req: NextRequest) {
  console.log("[MCP] Handshake from ChatGPT:", req.headers.get("user-agent"));
  const manifest = buildManifestSomehow(); // 樣板中已經提供
  return NextResponse.json(manifest);
}

這個函式有點簡化（樣板結構可能不同），但概念很直覺：app/mcp/route.ts 是一般的 Next.js route handler，你可以記錄進來的請求。成功連上 Dev Mode 後，你會在執行 npm run dev 的終端機中看到這則日誌。

從協定角度可以用一張小圖來表示：

sequenceDiagram
    participant ChatGPT
    participant Tunnel as HTTPS URL (/mcp)
    participant NextDev as Next.js dev + MCP

    ChatGPT->>Tunnel: HTTP(S) 請求到 https://.../mcp
    Tunnel->>NextDev: 代理到 http://localhost:3000/mcp
    NextDev-->>Tunnel: 包含工具與資源的 JSON
    Tunnel-->>ChatGPT: 轉發回應
    ChatGPT->>ChatGPT: 快取 tools/resources 清單

你在 Dev Mode 表單中輸入的「只是一個 URL」，其實會引發一整段協定對話。

6. ChatGPT 在連接後如何「看見」你的應用

假設握手成功。接下來會怎樣？

首先，在 Apps & Connectors 設定區，你的 GiftGenius (dev) 會出現在已連接的應用清單中。卡片內會顯示名稱、描述與偵測到的工具清單。通常也有像 Refresh、Delete 等按鈕。當你要變更工具結構時，Refresh 很有用。

其次，應用會在聊天中可用。開啟新對話，按輸入框旁的「+」。依 UI 版本不同，會看到「More」、「Apps」、「Tools」等選單。你的 GiftGenius (dev) 應該會出現在清單中，你可以在該對話中明確選用它。

選用後，應用就「連接」到此對話。對你而言，會是這樣：

你輸入自然語句，例如：「幫太空迷挑一個預算 50$ 的禮物」；
ChatGPT 依描述與對話歷史判斷可以使用 GiftGenius，並呼叫你的一個 MCP 工具；
呼叫結果可能包含 HTML 小工具；它會直接在聊天中渲染成卡片／面板。

在 Dev Mode 下，你多半會先用選單或以名稱明指的方式來觸發應用。但要理解的是：在正式環境裡，ChatGPT 會根據描述與工具後設資料「主動推薦」你的 App。

為了更直觀，我們再看一張小表格：

你現在在哪裡	你會看到什麼	這代表什麼
Settings	GiftGenius (dev) 出現在應用清單	連接器已建立，MCP 正在運作
Chat → 「+」	GiftGenius (dev) 在 Apps/Tools 清單	可連接到目前對話
對話	文字 + GiftGenius 小工具／卡片	已透過 MCP 呼叫了工具

7. 開發循環：改動程式碼 → 在 ChatGPT 中看到

連上 App 只完成一半。另一半是理解如何在日常工作中運用 Dev Mode。

變更大致分為兩類：UI（小工具）變更，以及 MCP 邏輯／工具變更。

如果你只改 UI，例如在 app/page.tsx 調整標題或樣式，對 Next.js 而言就是一般前端。Dev 伺服器會重新載入模組，你在瀏覽器會看到 hot reload。在 ChatGPT 中，你的 UI 在 iframe 裡，但行為相似：下一次呼叫會渲染該小工具的工具時，ChatGPT 會載入更新後的 HTML。有時 HMR 會直接進到 iframe，有時只要在聊天中再次呼叫工具即可。快取

試著做個小改動來驗證。假設在 app/page.tsx 中，你有類似以下內容：

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius</h1>
      <p>這裡之後會出現禮物挑選功能。</p>
    </main>
  );
}

把標題與文字換一下：

export default function GiftGeniusWidget() {
  return (
    <main style={{ padding: 16 }}>
      <h1>GiftGenius (dev)</h1>
      <p>此版本運行於 Dev Mode。非正式選禮用途。</p>
    </main>
  );
}

儲存檔案，回到連上 GiftGenius 的對話，再次觸發應用（例如用同樣的選禮請求）。你應該會看到小工具中的標題已更新—這是 Next.js → 通道 → ChatGPT 這條鏈路正常運作的好兆頭。

如果你改的是MCP 部分—新增工具、修改 inputSchema、更名工具等—就會碰到 ChatGPT 的快取。首次連接 Dev Mode 時，ChatGPT 會記住工具清單，未必會自動帶入變更。此時要回到 Apps & Connectors，選你的 GiftGenius (dev)，按類似 Refresh schema／Refresh 的按鈕。之後 ChatGPT 會重新詢問你的 /mcp，並更新工具清單。

看似小事，但少了這步很容易踩坑：你已改了工具的程式碼，ChatGPT 卻始終看不到新參數。

8. 迷你實作：在 Dev Mode 中完成 GiftGenius 的第一個情境

讓我們把一切串起來。這裡假設你已有指向 /mcp 的任何可用 HTTPS URL（經通道或部署）。若暫時沒有—先讀一遍步驟，下講有了實際 URL 後再重做一次。

確認 npm run dev 已啟動且日誌沒有錯誤。若樣板有記錄，能看到類似「MCP server running at http://localhost:3000/mcp」會特別安心。
打開 ChatGPT，透過 Settings → Apps & Connectors → Advanced settings 啟用 Developer Mode。
建立新的連接器 GiftGenius (dev)，寫上簡短描述（「Helper for choosing gifts」），並填入類似 https://<你的網域>/mcp 的 URL。
確認 ChatGPT 已成功連上：你會在應用清單看到新的項目。若未成功—請查看開發伺服器與通道的日誌，這本身就很有幫助。
開啟新對話，按「+」，選你的 GiftGenius (dev)，然後提出請求：「幫一位喜歡太空與咖啡的開發者挑禮物，預算 40$」。
觀察目前樣板的行為：基本版本可能只會顯示簡單的卡片／小工具。這還不是「智慧選禮」，但能在聊天中看到來自你程式的內容—已是很大的進展。

額外練習：可以在 MCP 伺服器中加入一個純為檢查 Dev Mode 的測試工具。範例（不必現在就實作，先理解概念即可）：

// 於 app/mcp/route.ts 內，與其他 tools 並列
server.registerTool(
  "ping_dev",
  {
    title: "Ping GiftGenius dev",
    description: "檢查 Dev 伺服器是否存活。",
    inputSchema: { type: "object", properties: {} },
  },
  async () => ({
    content: [{ type: "text", text: "GiftGenius dev is alive ✅" }],
    structuredContent: {},
  })
);

我們會在工具模組中詳細解析 server.registerTool，此處先記住：透過 MCP 你描述「你的 App 會什麼」，而 Dev Mode 則是把 ChatGPT 指到宣告這些能力的 URL。

9. 到哪裡看錯誤，以及如何分辨是「我這邊壞了」還是「ChatGPT 那邊壞了」

沒有人喜歡在系統的「另一半」瞎找半小時的 bug，所以最好養成到正確地方查看的習慣。

若錯誤出現在建立連接器時。如果在建立連接器時 ChatGPT 顯示無法連接 App，第一步請看你自己的開發伺服器與通道日誌。如果執行 npm run dev 的終端機裡完全沒有打到 /mcp 的請求—問題在 ChatGPT → 通道這條路上。如果有請求，但伺服器回 500 或在主控台崩潰—問題在你的 MCP 程式碼。

若連接器已建立，但在聊天裡壞掉。當連接器已建立，聊天中偶爾出現「App unavailable / App broken」的提示，幾乎總是因為：

開發伺服器掛了（Next.js 不再監聽 3000 埠）；
通道關閉或 URL 更換；
MCP endpoint 回傳錯誤、逾時，或回應過慢。

另談 UI／小工具。若 UI 出問題（小工具不渲染、空白畫面、樣式怪異），也請打開瀏覽器 DevTools。小工具載入在 iframe 中，該 iframe 的主控台裡能看到 JavaScript／React 錯誤—就像一般網頁應用一樣。

隨著經驗累積，你會幾乎從錯誤的外觀就分辨出「像是通道問題」還是「像是 Next.js 問題」。暫時只要記得：你有三個潛在故障點—你的程式碼、通道，以及 ChatGPT；而問題出在 ChatGPT 的機率通常最低。

Insight

如果你看到這裡，且沒有付費通道，現在就可以買一個。反正你接下來幾天內也會買。提早準備，省點心力。

10. 使用 Dev Mode 時的常見錯誤

錯誤 #1：忘了啟用 Developer Mode，為了找 Create 按半小時。
有時開發者直接進 ChatGPT，打開 Apps & Connectors 設定，卻什麼也沒看到。若未啟用 Developer Mode，建立連接器的按鈕可能根本不會出現。特別是在新帳號或不同瀏覽器上，務必先檢查 Advanced settings 中的 Dev Mode 是否已開啟。

錯誤 #2：貼了沒有 /mcp 的 URL，或根本不是 MCP endpoint。
經典案例：在 URL 欄位貼上沒有 /mcp 的 https://myapp-dev.ngrok.app，或乾脆貼了登陸頁／其他服務的 URL。ChatGPT 會禮貌地依 MCP 協定去敲該位址，卻找不到預期的介面，最後回報連線錯誤。Next.js 樣板明確說明：要連的是指向 /mcp 的 URL—在 Dev Mode 中也應填寫這個位址。

錯誤 #3：嘗試直接使用 http://localhost:3000/mcp。
直覺會想把開發伺服器日誌中的 http://localhost:3000/mcp 貼到欄位裡。但 ChatGPT 跑在雲端，不在你的筆電上，無法存取你的 localhost。此外，ChatGPT 要求 HTTPS。沒有通道或遠端部署是行不通的。這不是 ChatGPT 的 bug，而是正常的網路隔離。

錯誤 #4：修改 MCP 結構後忘了 Refresh。
握手成功後，ChatGPT 會快取工具與後設資料清單，以避免每次都打伺服器。如果你新增了新工具或改了 inputSchema，而 ChatGPT 仍舊照舊行事，幾乎可以確定需要在 Apps & Connectors 區塊對連接器執行 Refresh。否則模型根本不知道工具已變更。

錯誤 #5：在開發伺服器未啟動時嘗試除錯 Dev Mode。
聽起來很基本，卻很常見：同學遠端設定 Dev Mode 與通道，但他終端機早就沒有在跑 npm run dev，或專案因語法錯誤而無法編譯。只要本機開發伺服器躺著，就沒必要追 Dev Mode 的錯誤。務必先讓 http://localhost:3000 在你的瀏覽器正常運作，再連上 ChatGPT。

錯誤 #6：以為 Dev Mode 是「另一個什麼都懂的模型」。
有時會覺得既然開了 Dev Mode，模型就會「知道」我們的應用一切細節。事實上 Dev Mode 並不改變模型本身，它只是讓模型可以存取你的 MCP 伺服器與工具。如果工具描述含糊、App 的描述不清或伺服器邏輯古怪，模型一樣會困惑，就像任何開發者面對文檔不良的 API 一樣。寫好後設資料與工具是後續模組的主題，但現在就應該記得這點。

錯誤 #7：把 Dev Mode 當成正式環境使用。
很容易心動：「反正我們在 Dev Mode 跑得不錯，就把連結給使用者，請他們用這個 URL 連 App。」問題在於 Dev Mode 並非為大量使用設計：通道不穩定、設定可能會壞，ChatGPT 也可能在沒有相容性保證的情況下變更 Dev Mode 行為。要面向真實使用者，請用 Store 與正式部署。Dev Mode 只屬於你的實驗室。

先前先前課堂

下一個下一堂課

留言

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION