1. 本地 Next.js 应用接 ChatGPT Dev Mode 时endpoint 到底该填什么ChatGPT Dev Mode 是 OpenAI 给开发者留的一个“车库模式”你不需要把应用发布到 Store只要在设置里打开 Developer Mode填一个 MCP 服务器的 URLChatGPT 就会把它当成带 UI 的外部工具——能调用你注册的 tools、加载你的 widget并把结果直接渲染在聊天窗口里。它适合谁适合正在用 Apps SDK 写 Next.js 模板、手里已经有一个/mcproute-handler、但被“鉴权 endpoint 到底填哪个域名”卡住的开发者。我先把最容易踩的坑说清楚ChatGPT 跑在云端它访问不到你的http://localhost:3000/mcp。你在本地npm run dev起来的 Next.js 服务对 ChatGPT 来说是不存在的。所以 Dev Mode 表单里那个 MCP URL 字段必须是一个公网可达的 HTTPS 地址并且路径要精确指向/mcp。这一步和“把 endpoint 改到 TaoToken”是两件事前者解决 ChatGPT 怎么找到你的应用后者解决你的应用在调用模型能力时走哪条统一通道、用哪个 Key。很多教程把这两件事混在一起讲结果读者填完 URL 发现握手失败又去怀疑 Key来回折腾。这篇要解决的真实场景是这样的你有一个 Next.js 16 的 Apps SDK 模板app/mcp/route.ts里已经用server.registerTool(...)注册了工具本地http://localhost:3000能打开 UI/mcp也能返回能力清单。现在你想让 ChatGPT Dev Mode 连上它同时把应用内部调用模型的那段 endpoint 从默认地址改成 TaoToken 的统一入口用同一个 Key 管理。我会给出可复制的配置片段、一次完整的本地联调验证以及握手失败时按报错定位的方法。需要提前说明的是Dev Mode 截至 2025 年底在带 Apps SDK 的套餐上可用但企业账户有时需要管理员在工作空间级别启用。如果你在 Settings 里翻不到 Developer Mode 开关先别怀疑代码先去确认账号和工作区权限。这是排查顺序里的第一步不是最后一步。2. 接入前的 TaoToken 准备Base URL、Key 与 Model ID 三件套在动 ChatGPT 界面之前先把应用侧要用的东西备齐。TaoToken 在这里扮演的角色是统一通道你的 Next.js 应用不管是调对话模型、还是跑 coding agent都通过同一个 Base URL 和同一个 Key 出去省得在多个供应商之间来回换配置。官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 根地址是 https://taotoken.net/api 这个不加 UTM。你需要准备的三件套是Base URLhttps://taotoken.net/apiAPI Key在控制台创建形如sk-...只显示一次复制好Model ID按你实际要用的模型填比如对话场景填对应的对话模型标识编码场景填对应的编码模型标识创建 Key 的入口在控制台路径是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。如果你只是想先验证模型通不通可以用模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 快速发一条消息确认 Key 有效再去改代码。长期跑编码或 Agent 任务的话Coding Plan 页在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。这里有个顺序建议先在模型对话页确认 Key 能用再回到 Next.js 项目里改.env.local。因为如果你一上来就改代码然后握手失败你分不清是 Key 的问题、endpoint 的问题还是隧道的问题。先用一个独立的最小请求把 Key 验证掉后面排查范围就小一半。关于 Key 的存放别硬编码进route.ts。Next.js 项目里放.env.local变量名用TAOTOKEN_API_KEY然后在服务端读取。客户端组件读不到这个变量是正常的也不该读到——Key 只在服务端 route-handler 或 server action 里用。这一点在 MCP 场景下尤其重要因为/mcp是服务端路由天然适合放这类调用。另外提醒一句TaoToken 是统一调用通道不是让你拿它替代编辑器也不是让你把生产数据库直连出去。它解决的是“请求从哪出去、用哪个 Key”的问题业务逻辑、工具 schema、widget 渲染还是你自己的代码说了算。3. 可复制配置把 endpoint 改到 TaoToken 并接上 Dev Mode这一节给可直接粘贴的片段。分两块一块是 Next.js 应用侧调用模型时的 endpoint 配置一块是 ChatGPT Dev Mode 表单里要填的 MCP URL。两者别搞混。先看应用侧的配置。在项目根目录建.env.local# .env.local TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_API_KEYsk-你的Key TAOTOKEN_MODEL_ID你的模型ID MCP_PUBLIC_URLhttps://your-dev-domain.example.com/mcp然后在app/mcp/route.ts里把调用模型的那段 endpoint 指向 TaoToken。下面是一个精简示例重点是baseURL和apiKey的读取方式// app/mcp/route.ts import { NextRequest, NextResponse } from next/server; const BASE_URL process.env.TAOTOKEN_BASE_URL!; const API_KEY process.env.TAOTOKEN_API_KEY!; const MODEL_ID process.env.TAOTOKEN_MODEL_ID!; async function callModel(prompt: string) { const res await fetch(${BASE_URL}/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY}, }, body: JSON.stringify({ model: MODEL_ID, messages: [{ role: user, content: prompt }], }), }); if (!res.ok) { const text await res.text(); throw new Error(model call failed: ${res.status} ${text}); } return res.json(); } export async function GET(req: NextRequest) { console.log([MCP] handshake from:, req.headers.get(user-agent)); const manifest { name: GiftGenius (dev), version: 0.1.0, tools: [ { name: ping_dev, title: Ping GiftGenius dev, description: 检查 Dev 服务器是否存活。, inputSchema: { type: object, properties: {} }, }, ], }; return NextResponse.json(manifest); } export async function POST(req: NextRequest) { const body await req.json(); if (body?.method tools/call body?.params?.name ping_dev) { return NextResponse.json({ content: [{ type: text, text: GiftGenius dev is alive }], }); } return NextResponse.json({ error: unknown method }, { status: 400 }); }如果你用的是 Codex 的auth.json或 Cline MCP 配置思路一样把 Base URL、Key、Model ID 三件套填全。以 Cline 的 MCP 配置为例片段长这样{ mcpServers: { giftgenius-dev: { url: https://your-dev-domain.example.com/mcp, env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-你的Key, TAOTOKEN_MODEL_ID: 你的模型ID } } } }注意这里url是 MCP 服务器地址env里才是模型通道的三件套别把两者写反。如果你用 CC Switch 管理多套配置也是同样的字段结构切换时只换 Key 和 Model IDBase URL 保持不变。再看 ChatGPT Dev Mode 表单侧。打开 Settings → Apps Connectors启用 Developer Mode 后点 Create三个字段这样填字段填什么注意NameGiftGenius (dev)一眼看出是本地开发版Description根据兴趣推荐礼物创意影响模型何时召回你的 AppMCP URLhttps://your-dev-domain.example.com/mcp必须 https必须带 /mcp这个 MCP URL 从哪来它是你本地http://localhost:3000/mcp经过隧道或部署后暴露出来的公网地址。隧道怎么配是另一件事这里假设你已经有一个指向/mcp的 HTTPS 地址。如果你还没有先把上面这套配置过一遍等地址就绪再回来填。4. 验证请求启动应用、触发工具调用、确认结果经统一通道返回配置填完接下来是联调验证。目标很明确启动应用、触发一次工具调用、确认请求经 TaoToken 统一通道返回预期结果。第一步启动本地服务。在项目根目录npm run devNext.js 16 默认监听 3000 端口。终端里应该能看到类似MCP server running at http://localhost:3000/mcp的提示。先在浏览器打开http://localhost:3000确认 UI 正常再访问http://localhost:3000/mcp看是否返回能力清单 JSON。这一步是本地自检和 ChatGPT 无关但必须先过。第二步确认隧道把/mcp暴露成了公网 HTTPS。用 curl 从外部验证一次curl -s https://your-dev-domain.example.com/mcp | head -c 300如果返回的是你GET里那段 manifest JSON说明 ChatGPT 能看到的地址是通的。如果返回 404 或超时先别去 ChatGPT 里试问题在隧道或路由。第三步在 ChatGPT 里创建连接器。填完 Name、Description、MCP URL 后点 Create。此时 ChatGPT 会以 MCP 客户端身份访问你的/mcp期待收到 tools 和 resources 列表。握手成功的话连接器会出现在应用列表里卡片上能看到发现的工具。同时你运行npm run dev的终端里应该打印出[MCP] handshake from: ...这行日志——这是最直接的“请求真的打进来了”的证据。第四步触发工具调用。打开一个新聊天点输入框旁的 “”在 Apps/Tools 菜单里选中 GiftGenius (dev)然后发一条请求比如“给一位喜欢太空与咖啡的开发者推荐礼物预算 40 美元”。如果模板里注册了ping_dev你也可以直接说“调用 ping_dev 检查一下”。预期结果是聊天里出现来自你代码的卡片或文本内容是GiftGenius dev is alive。第五步确认模型调用走了 TaoToken。这一步是本文的重点。当你的工具逻辑里调用了callModel去看npm run dev的终端日志或者临时在callModel里加一行console.log(calling, BASE_URL, MODEL_ID)。你应该看到打印出来的是https://taotoken.net/api和你配置的 Model ID而不是某个默认地址。如果模型返回了内容说明请求确实经统一通道出去了并且 Key 有效。把这几步串起来一次完整的验证链路就是本地 dev 服务器 → 隧道 → ChatGPT 握手 → 聊天触发工具 → 工具内部调模型走 TaoToken → 结果渲染回聊天。任何一环断了下一节的排查表能帮你定位。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth联调时最常见的几类报错我按现象、原因、处理列出来对照着看。401 Unauthorized。现象是工具调用返回 401或者模型调用直接失败。原因通常是 Key 没读到、Key 写错、或者.env.local改了但没重启 dev 服务器。Next.js 读环境变量是在启动时改完.env.local必须重启npm run dev。另外确认Authorization头是Bearer sk-...格式中间有空格。如果 Key 是从控制台复制的注意别把首尾空格带进去。local proxy failed。这个报错通常出现在你试图让 ChatGPT 直接访问localhost或内网地址时。ChatGPT 在云端访问不到你的本地端口任何指向http://localhost:3000/mcp的配置都会失败。处理方式是确认 MCP URL 字段填的是公网 HTTPS 地址并且隧道进程还活着。隧道断了但表单没改也会报类似的连接失败。reading choices 或 cannot read properties of undefined (reading choices)。这是模型返回结构和你解析代码不匹配的典型症状。常见原因是请求根本没成功返回的是错误 JSON但你的代码直接去读data.choices[0]。处理方式是在解析前先判断res.ok把错误响应体打出来。上面callModel里的if (!res.ok)那段就是干这个的。看到真实错误信息比盯着choices报错猜半天有用得多。OAuth 相关报错。如果你在连接器创建阶段看到 OAuth 或授权失败先确认你的/mcp是否需要鉴权。Dev Mode 下最简单的做法是本地开发版不加 OAuth等要上 Store 再补。如果模板默认带了鉴权中间件检查它是否把 ChatGPT 的握手请求也拦了。握手请求是 GET工具调用是 POST鉴权逻辑要能区分。握手成功但聊天里看不到工具。现象是连接器创建成功但聊天里选不到或调用不了。原因多半是工具 schema 改了但没刷新缓存。回到 Apps Connectors选中你的连接器点 Refresh 或 Refresh schema让 ChatGPT 重新拉一次/mcp。改inputSchema、改工具名、加新工具都要刷新。App unavailable / App broken 横幅。这几乎总是三件事之一dev 服务器挂了、隧道关了或 URL 变了、/mcp返回错误或超时。按这个顺序查先看npm run dev终端有没有报错再用 curl 打一次公网/mcp最后看 ChatGPT 侧。记住你有三处潜在故障点——你的代码、隧道、ChatGPT问题出在 ChatGPT 的概率通常最低。6. 把 Dev Mode 当实验室后续怎么走Dev Mode 是你的车库不是展示橱窗。在这里你可以每五分钟改一次工具 schema可以填一个假 URL 看 ChatGPT 怎么报错可以把ping_dev这种测试工具留在代码里。等你把工具定义打磨清楚、widget 渲染稳定了再考虑走 Store 那条路。现在这个阶段重点是让“本地代码 → 隧道 → ChatGPT → TaoToken 统一通道”这条链路跑顺。如果你还没配隧道先把本文的配置片段存下来等 HTTPS 地址就绪再回来填表单。如果你已经跑通了握手下一步可以试着加一个真实工具比如根据预算和兴趣返回礼物列表让callModel真正参与进来观察请求经 TaoToken 返回后结果是怎么被包装成 widget 渲染到聊天里的。这个循环跑顺了后面接更复杂的 Agent 任务就是同一套骨架。需要再确认 Key 或看接入细节的话API Keys 页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。想先验证模型通不通用模型对话页最快要长期跑编码或 Agent再看 Coding Plan。