拓冰网站定制 
1. 工单处理为什么需要一张流程图来驱动 Agent工单系统最让人头疼的地方不是工单多而是每张工单的走向都不一样。用户提交一句“登录不上去了”背后可能是密码错误、账号被锁、验证码收不到、甚至只是浏览器缓存问题。如果全靠人工判断一个客服一天处理两百张工单已经是极限如果全靠写死的 if-else 规则那规则表会膨胀到没人敢改。我试过用纯 Prompt 的方式让大模型直接读工单然后输出处理结果问题很明显模型不知道你的业务边界在哪里它可能把“退款”工单分到“技术支持”也可能在回复里编造一个不存在的处理流程。根本原因是工单处理本质上是一个有状态、有分支、有工具调用的流程而 Prompt 只能描述“做什么”没法约束“按什么路径做”。draw.io 在这里的价值就体现出来了。你平时画的那张工单流转图——开始节点、分类判断、不同分支、调用不同工具、结束——它本身就是一份可执行的流程定义。把这张图交给 AI AgentAgent 就不再是“猜”该怎么处理而是“照着图走”。每个节点对应一个动作每条连线对应一个条件流程图的拓扑结构就是 Agent 的决策边界。具体来说这套链路是这样的draw.io 里画好工单处理流程图图中每个节点标注好它要调用的 MCP 工具名称和参数Agent 运行时读取这张图把节点解析成可执行步骤当工单进来时Agent 按照图的走向逐节点执行该分类就调分类工具该查知识库就调检索工具该回复就调回复生成工具最后 Next.js 前端把整个执行过程和处理结果展示出来。适合谁跟做有基本 JavaScript/TypeScript 基础、了解 Next.js 项目结构、想在现有工单系统里加一层智能处理但不想重写整个后端的开发者。你不需要自己训练模型也不需要搭复杂的 Agent 框架一张图加一套 MCP 配置就能跑起来。热词里提到的 draw.io、AI Agent、MCP、Next.js、流程图这五个东西在这套方案里各司其职draw.io 负责流程定义MCP 负责工具调用的标准化AI Agent 负责按图执行Next.js 负责前端触发和结果展示流程图则是贯穿始终的那份“契约”。2. TaoToken 统一 Key 接入 MCP 的前置准备在开始配置之前先把 TaoToken 这一层理清楚。TaoToken 在这里扮演的角色是统一模型接入层你的 Agent 需要调用大模型来做分类判断、意图识别、回复生成这些调用都走 TaoToken 的 API用一个 Key 管理所有模型请求。这样做的好处是你不需要在代码里散落多个厂商的 Key也不需要为每个模型单独写适配层。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址后面不加 UTM 参数直接用于代码里的 base_url 配置。你需要准备的东西不多一个 TaoToken 账号在控制台创建一个 API Key本地 Node.js 环境建议 18 以上一个能跑 Next.js 的项目目录draw.io 桌面版或网页版用来画流程图。如果你还没有 Key先去控制台创建路径是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 创建完在 API Keys 页面复制出来后面配置里要用。关于模型选择工单处理场景我建议用响应速度较快的模型做分类和意图识别用能力更强的模型做回复生成。TaoToken 支持在请求里指定 model 参数你可以在 MCP 配置里为不同工具配不同模型。具体有哪些模型可用可以在模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 里先试一下效果确认分类准确度再写进配置。MCP 这一层需要理解一个核心概念MCP Server 是工具的提供方MCP Client 是工具的调用方。在你的架构里draw.io 的流程图解析器是一个 MCP Server它暴露“读取流程图节点”“获取节点参数”这类工具工单处理工具分类、检索、回复是另一个 MCP ServerAI Agent 作为 MCP Client通过标准协议调用这些工具。TaoToken 则是 Agent 背后的大模型接入层Agent 在需要做判断时调用 TaoToken 的 API。这里有一个容易踩的坑很多人以为 MCP 配置里直接写 TaoToken 的地址就行了实际上 MCP 配置分两部分——一部分是 MCP Server 的启动配置command args另一部分是模型 API 的配置base_url api_key model。这两部分要分开写下面第三节会给出完整片段。另外提醒一点不要把生产数据库的直接连接暴露给 MCP Server。工单处理工具应该通过你已有的后端 API 来操作数据MCP Server 只负责调用这些 API不直接连库。这是安全边界也是后面排障时容易忽略的地方。3. 可复制的 MCP 配置与 Next.js 接入片段这一节是整篇的核心所有配置都可以直接复制到你的项目里改。先给出 MCP Server 的配置文件再给出 Next.js 里调用 Agent 的代码片段最后给出 draw.io 流程图的节点命名规范。3.1 MCP Server 配置mcp-servers.json在你的项目根目录创建mcp-servers.json内容如下。这个文件定义了三个 MCP Serverdrawio 负责读取流程图ticket-tools 负责工单处理工具taotoken-llm 负责模型调用。{ mcpServers: { drawio: { command: npx, args: [-y, drawio-mcp-server], env: { DRAWIO_FILE_PATH: ./flows/ticket-flow.drawio } }, ticket-tools: { command: node, args: [./mcp/ticket-tools-server.js], env: { TICKET_API_BASE: http://localhost:3000/api/tickets, TICKET_API_TOKEN: your-internal-token } }, taotoken-llm: { command: npx, args: [-y, taotoken/mcp-llm-server], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key, TAOTOKEN_DEFAULT_MODEL: claude-sonnet-4-20250514 } } } }注意TAOTOKEN_BASE_URL写的是https://taotoken.net/api不要加 UTM 参数也不要加尾部斜杠。TAOTOKEN_API_KEY替换成你在控制台创建的那个 Key。TAOTOKEN_DEFAULT_MODEL可以先填一个后面在代码里可以按工具覆盖。3.2 Next.js 环境变量.env.local在 Next.js 项目根目录的.env.local里加上TAOTOKEN_API_KEYsk-your-taotoken-key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODEL_CLASSIFYclaude-haiku-4-20250514 TAOTOKEN_MODEL_REPLYclaude-sonnet-4-20250514 MCP_CONFIG_PATH./mcp-servers.json这里把分类和回复分成两个模型变量分类用轻量模型省成本回复用强模型保质量。你可以在 TaoToken 的模型对话页面先对比一下两个模型在工单分类上的表现再决定具体用哪个。3.3 Next.js API Route 调用 Agentapp/api/agent/route.tsimport { NextRequest, NextResponse } from next/server; import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; import fs from fs; const mcpConfig JSON.parse( fs.readFileSync(process.env.MCP_CONFIG_PATH!, utf-8) ); async function getMcpClient(serverName: string) { const serverConfig mcpConfig.mcpServers[serverName]; const transport new StdioClientTransport({ command: serverConfig.command, args: serverConfig.args, env: { ...process.env, ...serverConfig.env }, }); const client new Client( { name: ticket-agent, version: 1.0.0 }, { capabilities: {} } ); await client.connect(transport); return client; } export async function POST(req: NextRequest) { const { ticketContent } await req.json(); const drawioClient await getMcpClient(drawio); const flowGraph await drawioClient.callTool({ name: read_flow_graph, arguments: { filePath: ./flows/ticket-flow.drawio }, }); const llmClient await getMcpClient(taotoken-llm); const classifyResult await llmClient.callTool({ name: chat_completion, arguments: { model: process.env.TAOTOKEN_MODEL_CLASSIFY, messages: [ { role: system, content: 你是一个工单分类器。根据以下流程图节点定义判断工单应该走哪条分支。流程图节点${JSON.stringify(flowGraph.content)}, }, { role: user, content: ticketContent }, ], }, }); const ticketClient await getMcpClient(ticket-tools); const replyResult await ticketClient.callTool({ name: generate_reply, arguments: { ticketContent, category: classifyResult.content, flowContext: flowGraph.content, }, }); return NextResponse.json({ category: classifyResult.content, reply: replyResult.content, flowUsed: flowGraph.content, }); }这段代码做了三件事从 drawio MCP Server 读取流程图结构把流程图节点定义作为上下文传给 TaoToken 的模型做分类再根据分类结果调用工单工具生成回复。每一步都通过 MCP 协议走工具之间解耦。3.4 draw.io 流程图的节点命名规范这一步很关键Agent 能不能正确解析流程图取决于你在 draw.io 里怎么命名节点。建议用这样的格式[START] 工单入口 [CLASSIFY] 分类判断 [BRANCH:tech] 技术支持分支 [BRANCH:billing] 账单分支 [TOOL:search_kb] 检索知识库 [TOOL:check_account] 查询账号状态 [REPLY] 生成回复 [END] 结束每个节点在 draw.io 的“属性”面板里把节点 ID 设成有意义的英文名比如classify_node、tech_branch。Agent 读取流程图时会按节点 ID 和连线关系构建执行路径。你不需要写额外的解析代码drawio-mcp-server 会把图结构转成 JSON 返回。如果你用的是 Claude Code 来做本地调试可以在项目里加一个.claude/settings.json把 MCP Server 配置写进去这样 Claude Code 启动时自动加载{ mcpServers: { drawio: { command: npx, args: [-y, drawio-mcp-server] }, taotoken-llm: { command: npx, args: [-y, taotoken/mcp-llm-server], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key } } } }这样你在 Claude Code 里就能直接调用这些工具做调试不用每次起 Next.js 服务。调试通了再切到前端触发。4. 用一张真实工单验证 Agent 自动分类与回复配置写完了现在拿一张真实工单跑一遍看整条链路能不能通。我用的测试工单内容是“我昨天还能登录今天输入密码后提示账号被锁定但我没有输错多次请帮我解锁。”4.1 启动 MCP Server 和 Next.js先确认三个 MCP Server 都能正常启动。在终端里逐个测试npx -y drawio-mcp-server --help node ./mcp/ticket-tools-server.js --health npx -y taotoken/mcp-llm-server --health如果第三个命令报错大概率是TAOTOKEN_API_KEY没设对。你可以先用 curl 直接测 TaoToken 的 API 通不通curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer sk-your-taotoken-key \ -H Content-Type: application/json \ -d { model: claude-haiku-4-20250514, messages: [{role: user, content: test}] }返回里有choices数组就说明 Key 和网络都没问题。然后启动 Next.jsnpm run dev默认跑在 3000 端口。如果你之前改过端口后面请求地址要对应改。4.2 发送工单并观察执行过程用 curl 发一张工单到 Agent 接口curl -X POST http://localhost:3000/api/agent \ -H Content-Type: application/json \ -d { ticketContent: 我昨天还能登录今天输入密码后提示账号被锁定但我没有输错多次请帮我解锁。 }预期返回的 JSON 结构是这样的{ category: tech_account_lock, reply: 您好检测到您的账号因异常登录行为被临时锁定。我已为您提交解锁申请预计5分钟内生效。如果5分钟后仍无法登录请回复本条工单我会进一步排查。, flowUsed: { nodes: [START, CLASSIFY, BRANCH:tech, TOOL:check_account, REPLY, END], path: tech_branch } }category字段是 Agent 根据流程图分类节点判断出来的flowUsed展示了它实际走的路径。你可以对照 draw.io 里画的图看路径是否一致。如果 Agent 走了billing分支说明分类判断有问题需要检查流程图里分类节点的描述是否够清晰。4.3 在 Next.js 前端展示处理结果前端页面可以很简单一个文本框加一个提交按钮提交后把返回的category、reply、flowUsed渲染出来。关键是把flowUsed可视化让用户看到 Agent 走了哪条路径。你可以用 draw.io 的嵌入模式把流程图和实际路径叠加显示。use client; import { useState } from react; export default function TicketAgent() { const [content, setContent] useState(); const [result, setResult] useStateany(null); const [loading, setLoading] useState(false); async function handleSubmit() { setLoading(true); const res await fetch(/api/agent, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ ticketContent: content }), }); const data await res.json(); setResult(data); setLoading(false); } return ( div classNamep-6 max-w-2xl mx-auto textarea classNamew-full border rounded p-3 h-32 value{content} onChange{(e) setContent(e.target.value)} placeholder粘贴工单内容... / button classNamemt-3 px-4 py-2 bg-blue-600 text-white rounded onClick{handleSubmit} disabled{loading} {loading ? 处理中... : 提交工单} /button {result ( div classNamemt-6 space-y-3 div classNametext-sm text-gray-500分类结果{result.category}/div div classNameborder rounded p-3{result.reply}/div div classNametext-xs text-gray-400 执行路径{result.flowUsed.nodes.join( → )} /div /div )} /div ); }跑通之后你会看到同一张工单每次提交分类结果和执行路径应该是一致的除非模型有随机性可以把 temperature 设成 0。如果路径不稳定说明流程图里的分类条件写得不够明确Agent 在“猜”。这时候回到 draw.io把分类节点的描述改得更具体比如把“技术支持”改成“涉及登录、密码、账号状态、验证码的问题”再重新测试。4.4 验证 MCP 工具调用是否真的生效有一个简单的验证方法在ticket-tools-server.js里加一行日志每次generate_reply被调用时打印工单 ID 和时间戳。然后提交工单看终端有没有输出。如果有输出说明 MCP 调用链路是通的如果没有说明 Agent 没有走到REPLY节点可能卡在分类或工具调用环节。另一个验证点是 TaoToken 的调用量。登录 TaoToken 控制台在用量页面看请求数有没有增加。每提交一张工单应该至少产生两次模型调用一次分类、一次回复生成。如果只看到一次说明回复生成那步没走通检查TAOTOKEN_MODEL_REPLY是否配置正确。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节列出我在调试过程中实际遇到的报错和解决方法。你大概率会碰到其中至少一个。5.1 401 Unauthorized报错信息通常是Error: 401 Unauthorized {error:{message:Invalid API key,type:invalid_request_error}}原因有三个可能Key 复制时多了空格或换行Key 已经过期或在控制台被删除环境变量没有正确加载。排查步骤先在终端里echo $TAOTOKEN_API_KEY看输出是否和你在控制台看到的一致。如果是在.env.local里配的确认 Next.js 重启过环境变量改动需要重启才生效。如果 Key 确认没问题用 4.1 节的 curl 命令直接测 API排除是 MCP Server 层的问题还是 Key 本身的问题。5.2 local proxy failed报错信息Error: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890这个报错说明你的系统里有一个本地代理在运行但 MCP Server 启动时继承了这个代理设置而代理本身没有正常工作。解决方法是在 MCP 配置的env里显式清掉代理变量env: { HTTP_PROXY: , HTTPS_PROXY: , NO_PROXY: localhost,127.0.0.1, TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key }注意NO_PROXY里要包含localhost和127.0.0.1这样本地 MCP Server 之间的通信不会走代理。如果你不需要代理直接把HTTP_PROXY和HTTPS_PROXY设为空字符串即可。5.3 reading choices 报错报错信息TypeError: Cannot read properties of undefined (reading choices)这个报错通常出现在解析 TaoToken API 返回结果的时候。原因是返回的 JSON 结构和你预期的不一样。可能的情况请求被重定向到了登录页返回的是 HTML 而不是 JSON或者模型名称写错了API 返回了错误信息但没有choices字段。排查方法在 MCP Server 里把原始返回打印出来看看到底返回了什么。如果是 HTML说明TAOTOKEN_BASE_URL配错了检查是不是写成了https://taotoken.net而漏了/api。如果是错误 JSON看error.message字段的内容通常是模型名称不对或参数格式有问题。5.4 OAuth 相关报错报错信息Error: OAuth token exchange failed如果你在 MCP 配置里用了需要 OAuth 的 Server但没配回调地址就会报这个错。drawio-mcp-server 和 taotoken-llm 都不需要 OAuth如果你看到这个报错说明你引入了一个第三方 MCP Server 需要 OAuth 认证。解决方法是查那个 Server 的文档配好OAUTH_CLIENT_ID、OAUTH_CLIENT_SECRET和OAUTH_REDIRECT_URI。如果暂时不需要那个 Server先从配置里移除把主链路跑通再说。5.5 流程图解析为空Agent 返回的flowUsed.nodes是空数组或者分类结果总是默认值。原因通常是 draw.io 文件路径不对或者文件格式不是 drawio-mcp-server 能解析的。确认DRAWIO_FILE_PATH指向的文件存在并且是用 draw.io 保存的.drawio格式不是导出的 PNG 或 SVG。另外节点 ID 不要用中文用英文加下划线避免解析时编码问题。5.6 模型返回超时如果分类或回复生成经常超时先检查网络到taotoken.net的延迟。可以在终端里curl -o /dev/null -s -w %{time_total} https://taotoken.net/api看响应时间。如果超过 3 秒可能是本地网络问题。另外分类用的模型如果太大响应也会慢换成轻量模型试试。TaoToken 支持在请求里指定max_tokens参数把分类请求的max_tokens设成 100 左右能明显加快返回速度。6. 把这张流程图变成你工单系统的常驻能力跑通 demo 之后下一步是把它变成日常可用的东西。我的做法是把 draw.io 流程图纳入版本管理每次工单处理规则有变动先改图再提交Agent 自动读取最新版本。这样流程变更不再需要改代码改图就行。具体操作在项目里建一个flows/目录把ticket-flow.drawio放进去用 Git 管理。每次修改后drawio-mcp-server 读取的就是最新文件。如果你想让 Agent 在运行时动态加载不同流程图可以在 API Route 里根据工单来源选择不同的.drawio文件路径。另一个实用技巧是给流程图节点加上“超时”和“重试”属性。在 draw.io 的节点属性里加自定义字段比如timeout5000、retry2Agent 解析时会读取这些字段并在调用工具时应用。这样你不需要在代码里硬编码超时逻辑流程图上就能配。关于成本控制分类请求用轻量模型回复生成用强模型这个策略在工单量大的时候能省不少。你可以在 TaoToken 控制台设置用量告警当请求量超过阈值时发通知。如果工单量特别大考虑把分类结果缓存起来相同类型的工单直接复用分类路径只对回复做个性化生成。最后说一个我踩过的坑不要把所有工单都塞给 Agent 处理。有些工单明显是垃圾信息或测试数据应该在进入 Agent 之前就过滤掉。可以在 Next.js API Route 里加一层简单的规则过滤比如内容长度小于 5 个字符的直接返回“请补充详细描述”不调用模型。这样既省成本也避免 Agent 被无意义输入干扰。如果你想把 Agent 能力扩展到更多场景比如自动生成工单周报、自动识别重复工单可以在 draw.io 里加新的分支和工具节点然后在 MCP 配置里注册对应的工具 Server。整套架构的扩展点就在流程图和 MCP 工具这两个地方改这两个地方不需要动 Agent 的核心执行逻辑。需要长期跑编码任务或 Agent 工作流的话可以了解一下 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 适合需要稳定模型调用和批量处理的场景。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言 SDK 的调用示例和参数说明。API Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 可以创建多个 Key 分别用于开发和生产环境。 【保姆级教程】draw.io + AI Agent：用一张流程图构建自动处理工单的智能体，TaoToken 统一 Key 接入 MCP
1. 工单处理为什么需要一张流程图来驱动 Agent工单系统最让人头疼的地方不是工单多而是每张工单的走向都不一样。用户提交一句“登录不上去了”背后可能是密码错误、账号被锁、验证码收不到、甚至只是浏览器缓存问题。如果全靠人工判断一个客服一天处理两百张工单已经是极限如果全靠写死的 if-else 规则那规则表会膨胀到没人敢改。我试过用纯 Prompt 的方式让大模型直接读工单然后输出处理结果问题很明显模型不知道你的业务边界在哪里它可能把“退款”工单分到“技术支持”也可能在回复里编造一个不存在的处理流程。根本原因是工单处理本质上是一个有状态、有分支、有工具调用的流程而 Prompt 只能描述“做什么”没法约束“按什么路径做”。draw.io 在这里的价值就体现出来了。你平时画的那张工单流转图——开始节点、分类判断、不同分支、调用不同工具、结束——它本身就是一份可执行的流程定义。把这张图交给 AI AgentAgent 就不再是“猜”该怎么处理而是“照着图走”。每个节点对应一个动作每条连线对应一个条件流程图的拓扑结构就是 Agent 的决策边界。具体来说这套链路是这样的draw.io 里画好工单处理流程图图中每个节点标注好它要调用的 MCP 工具名称和参数Agent 运行时读取这张图把节点解析成可执行步骤当工单进来时Agent 按照图的走向逐节点执行该分类就调分类工具该查知识库就调检索工具该回复就调回复生成工具最后 Next.js 前端把整个执行过程和处理结果展示出来。适合谁跟做有基本 JavaScript/TypeScript 基础、了解 Next.js 项目结构、想在现有工单系统里加一层智能处理但不想重写整个后端的开发者。你不需要自己训练模型也不需要搭复杂的 Agent 框架一张图加一套 MCP 配置就能跑起来。热词里提到的 draw.io、AI Agent、MCP、Next.js、流程图这五个东西在这套方案里各司其职draw.io 负责流程定义MCP 负责工具调用的标准化AI Agent 负责按图执行Next.js 负责前端触发和结果展示流程图则是贯穿始终的那份“契约”。2. TaoToken 统一 Key 接入 MCP 的前置准备在开始配置之前先把 TaoToken 这一层理清楚。TaoToken 在这里扮演的角色是统一模型接入层你的 Agent 需要调用大模型来做分类判断、意图识别、回复生成这些调用都走 TaoToken 的 API用一个 Key 管理所有模型请求。这样做的好处是你不需要在代码里散落多个厂商的 Key也不需要为每个模型单独写适配层。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址后面不加 UTM 参数直接用于代码里的 base_url 配置。你需要准备的东西不多一个 TaoToken 账号在控制台创建一个 API Key本地 Node.js 环境建议 18 以上一个能跑 Next.js 的项目目录draw.io 桌面版或网页版用来画流程图。如果你还没有 Key先去控制台创建路径是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 创建完在 API Keys 页面复制出来后面配置里要用。关于模型选择工单处理场景我建议用响应速度较快的模型做分类和意图识别用能力更强的模型做回复生成。TaoToken 支持在请求里指定 model 参数你可以在 MCP 配置里为不同工具配不同模型。具体有哪些模型可用可以在模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 里先试一下效果确认分类准确度再写进配置。MCP 这一层需要理解一个核心概念MCP Server 是工具的提供方MCP Client 是工具的调用方。在你的架构里draw.io 的流程图解析器是一个 MCP Server它暴露“读取流程图节点”“获取节点参数”这类工具工单处理工具分类、检索、回复是另一个 MCP ServerAI Agent 作为 MCP Client通过标准协议调用这些工具。TaoToken 则是 Agent 背后的大模型接入层Agent 在需要做判断时调用 TaoToken 的 API。这里有一个容易踩的坑很多人以为 MCP 配置里直接写 TaoToken 的地址就行了实际上 MCP 配置分两部分——一部分是 MCP Server 的启动配置command args另一部分是模型 API 的配置base_url api_key model。这两部分要分开写下面第三节会给出完整片段。另外提醒一点不要把生产数据库的直接连接暴露给 MCP Server。工单处理工具应该通过你已有的后端 API 来操作数据MCP Server 只负责调用这些 API不直接连库。这是安全边界也是后面排障时容易忽略的地方。3. 可复制的 MCP 配置与 Next.js 接入片段这一节是整篇的核心所有配置都可以直接复制到你的项目里改。先给出 MCP Server 的配置文件再给出 Next.js 里调用 Agent 的代码片段最后给出 draw.io 流程图的节点命名规范。3.1 MCP Server 配置mcp-servers.json在你的项目根目录创建mcp-servers.json内容如下。这个文件定义了三个 MCP Serverdrawio 负责读取流程图ticket-tools 负责工单处理工具taotoken-llm 负责模型调用。{ mcpServers: { drawio: { command: npx, args: [-y, drawio-mcp-server], env: { DRAWIO_FILE_PATH: ./flows/ticket-flow.drawio } }, ticket-tools: { command: node, args: [./mcp/ticket-tools-server.js], env: { TICKET_API_BASE: http://localhost:3000/api/tickets, TICKET_API_TOKEN: your-internal-token } }, taotoken-llm: { command: npx, args: [-y, taotoken/mcp-llm-server], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key, TAOTOKEN_DEFAULT_MODEL: claude-sonnet-4-20250514 } } } }注意TAOTOKEN_BASE_URL写的是https://taotoken.net/api不要加 UTM 参数也不要加尾部斜杠。TAOTOKEN_API_KEY替换成你在控制台创建的那个 Key。TAOTOKEN_DEFAULT_MODEL可以先填一个后面在代码里可以按工具覆盖。3.2 Next.js 环境变量.env.local在 Next.js 项目根目录的.env.local里加上TAOTOKEN_API_KEYsk-your-taotoken-key TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_MODEL_CLASSIFYclaude-haiku-4-20250514 TAOTOKEN_MODEL_REPLYclaude-sonnet-4-20250514 MCP_CONFIG_PATH./mcp-servers.json这里把分类和回复分成两个模型变量分类用轻量模型省成本回复用强模型保质量。你可以在 TaoToken 的模型对话页面先对比一下两个模型在工单分类上的表现再决定具体用哪个。3.3 Next.js API Route 调用 Agentapp/api/agent/route.tsimport { NextRequest, NextResponse } from next/server; import { Client } from modelcontextprotocol/sdk/client/index.js; import { StdioClientTransport } from modelcontextprotocol/sdk/client/stdio.js; import fs from fs; const mcpConfig JSON.parse( fs.readFileSync(process.env.MCP_CONFIG_PATH!, utf-8) ); async function getMcpClient(serverName: string) { const serverConfig mcpConfig.mcpServers[serverName]; const transport new StdioClientTransport({ command: serverConfig.command, args: serverConfig.args, env: { ...process.env, ...serverConfig.env }, }); const client new Client( { name: ticket-agent, version: 1.0.0 }, { capabilities: {} } ); await client.connect(transport); return client; } export async function POST(req: NextRequest) { const { ticketContent } await req.json(); const drawioClient await getMcpClient(drawio); const flowGraph await drawioClient.callTool({ name: read_flow_graph, arguments: { filePath: ./flows/ticket-flow.drawio }, }); const llmClient await getMcpClient(taotoken-llm); const classifyResult await llmClient.callTool({ name: chat_completion, arguments: { model: process.env.TAOTOKEN_MODEL_CLASSIFY, messages: [ { role: system, content: 你是一个工单分类器。根据以下流程图节点定义判断工单应该走哪条分支。流程图节点${JSON.stringify(flowGraph.content)}, }, { role: user, content: ticketContent }, ], }, }); const ticketClient await getMcpClient(ticket-tools); const replyResult await ticketClient.callTool({ name: generate_reply, arguments: { ticketContent, category: classifyResult.content, flowContext: flowGraph.content, }, }); return NextResponse.json({ category: classifyResult.content, reply: replyResult.content, flowUsed: flowGraph.content, }); }这段代码做了三件事从 drawio MCP Server 读取流程图结构把流程图节点定义作为上下文传给 TaoToken 的模型做分类再根据分类结果调用工单工具生成回复。每一步都通过 MCP 协议走工具之间解耦。3.4 draw.io 流程图的节点命名规范这一步很关键Agent 能不能正确解析流程图取决于你在 draw.io 里怎么命名节点。建议用这样的格式[START] 工单入口 [CLASSIFY] 分类判断 [BRANCH:tech] 技术支持分支 [BRANCH:billing] 账单分支 [TOOL:search_kb] 检索知识库 [TOOL:check_account] 查询账号状态 [REPLY] 生成回复 [END] 结束每个节点在 draw.io 的“属性”面板里把节点 ID 设成有意义的英文名比如classify_node、tech_branch。Agent 读取流程图时会按节点 ID 和连线关系构建执行路径。你不需要写额外的解析代码drawio-mcp-server 会把图结构转成 JSON 返回。如果你用的是 Claude Code 来做本地调试可以在项目里加一个.claude/settings.json把 MCP Server 配置写进去这样 Claude Code 启动时自动加载{ mcpServers: { drawio: { command: npx, args: [-y, drawio-mcp-server] }, taotoken-llm: { command: npx, args: [-y, taotoken/mcp-llm-server], env: { TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key } } } }这样你在 Claude Code 里就能直接调用这些工具做调试不用每次起 Next.js 服务。调试通了再切到前端触发。4. 用一张真实工单验证 Agent 自动分类与回复配置写完了现在拿一张真实工单跑一遍看整条链路能不能通。我用的测试工单内容是“我昨天还能登录今天输入密码后提示账号被锁定但我没有输错多次请帮我解锁。”4.1 启动 MCP Server 和 Next.js先确认三个 MCP Server 都能正常启动。在终端里逐个测试npx -y drawio-mcp-server --help node ./mcp/ticket-tools-server.js --health npx -y taotoken/mcp-llm-server --health如果第三个命令报错大概率是TAOTOKEN_API_KEY没设对。你可以先用 curl 直接测 TaoToken 的 API 通不通curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer sk-your-taotoken-key \ -H Content-Type: application/json \ -d { model: claude-haiku-4-20250514, messages: [{role: user, content: test}] }返回里有choices数组就说明 Key 和网络都没问题。然后启动 Next.jsnpm run dev默认跑在 3000 端口。如果你之前改过端口后面请求地址要对应改。4.2 发送工单并观察执行过程用 curl 发一张工单到 Agent 接口curl -X POST http://localhost:3000/api/agent \ -H Content-Type: application/json \ -d { ticketContent: 我昨天还能登录今天输入密码后提示账号被锁定但我没有输错多次请帮我解锁。 }预期返回的 JSON 结构是这样的{ category: tech_account_lock, reply: 您好检测到您的账号因异常登录行为被临时锁定。我已为您提交解锁申请预计5分钟内生效。如果5分钟后仍无法登录请回复本条工单我会进一步排查。, flowUsed: { nodes: [START, CLASSIFY, BRANCH:tech, TOOL:check_account, REPLY, END], path: tech_branch } }category字段是 Agent 根据流程图分类节点判断出来的flowUsed展示了它实际走的路径。你可以对照 draw.io 里画的图看路径是否一致。如果 Agent 走了billing分支说明分类判断有问题需要检查流程图里分类节点的描述是否够清晰。4.3 在 Next.js 前端展示处理结果前端页面可以很简单一个文本框加一个提交按钮提交后把返回的category、reply、flowUsed渲染出来。关键是把flowUsed可视化让用户看到 Agent 走了哪条路径。你可以用 draw.io 的嵌入模式把流程图和实际路径叠加显示。use client; import { useState } from react; export default function TicketAgent() { const [content, setContent] useState(); const [result, setResult] useStateany(null); const [loading, setLoading] useState(false); async function handleSubmit() { setLoading(true); const res await fetch(/api/agent, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ ticketContent: content }), }); const data await res.json(); setResult(data); setLoading(false); } return ( div classNamep-6 max-w-2xl mx-auto textarea classNamew-full border rounded p-3 h-32 value{content} onChange{(e) setContent(e.target.value)} placeholder粘贴工单内容... / button classNamemt-3 px-4 py-2 bg-blue-600 text-white rounded onClick{handleSubmit} disabled{loading} {loading ? 处理中... : 提交工单} /button {result ( div classNamemt-6 space-y-3 div classNametext-sm text-gray-500分类结果{result.category}/div div classNameborder rounded p-3{result.reply}/div div classNametext-xs text-gray-400 执行路径{result.flowUsed.nodes.join( → )} /div /div )} /div ); }跑通之后你会看到同一张工单每次提交分类结果和执行路径应该是一致的除非模型有随机性可以把 temperature 设成 0。如果路径不稳定说明流程图里的分类条件写得不够明确Agent 在“猜”。这时候回到 draw.io把分类节点的描述改得更具体比如把“技术支持”改成“涉及登录、密码、账号状态、验证码的问题”再重新测试。4.4 验证 MCP 工具调用是否真的生效有一个简单的验证方法在ticket-tools-server.js里加一行日志每次generate_reply被调用时打印工单 ID 和时间戳。然后提交工单看终端有没有输出。如果有输出说明 MCP 调用链路是通的如果没有说明 Agent 没有走到REPLY节点可能卡在分类或工具调用环节。另一个验证点是 TaoToken 的调用量。登录 TaoToken 控制台在用量页面看请求数有没有增加。每提交一张工单应该至少产生两次模型调用一次分类、一次回复生成。如果只看到一次说明回复生成那步没走通检查TAOTOKEN_MODEL_REPLY是否配置正确。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节列出我在调试过程中实际遇到的报错和解决方法。你大概率会碰到其中至少一个。5.1 401 Unauthorized报错信息通常是Error: 401 Unauthorized {error:{message:Invalid API key,type:invalid_request_error}}原因有三个可能Key 复制时多了空格或换行Key 已经过期或在控制台被删除环境变量没有正确加载。排查步骤先在终端里echo $TAOTOKEN_API_KEY看输出是否和你在控制台看到的一致。如果是在.env.local里配的确认 Next.js 重启过环境变量改动需要重启才生效。如果 Key 确认没问题用 4.1 节的 curl 命令直接测 API排除是 MCP Server 层的问题还是 Key 本身的问题。5.2 local proxy failed报错信息Error: local proxy failed: connect ECONNREFUSED 127.0.0.1:7890这个报错说明你的系统里有一个本地代理在运行但 MCP Server 启动时继承了这个代理设置而代理本身没有正常工作。解决方法是在 MCP 配置的env里显式清掉代理变量env: { HTTP_PROXY: , HTTPS_PROXY: , NO_PROXY: localhost,127.0.0.1, TAOTOKEN_BASE_URL: https://taotoken.net/api, TAOTOKEN_API_KEY: sk-your-taotoken-key }注意NO_PROXY里要包含localhost和127.0.0.1这样本地 MCP Server 之间的通信不会走代理。如果你不需要代理直接把HTTP_PROXY和HTTPS_PROXY设为空字符串即可。5.3 reading choices 报错报错信息TypeError: Cannot read properties of undefined (reading choices)这个报错通常出现在解析 TaoToken API 返回结果的时候。原因是返回的 JSON 结构和你预期的不一样。可能的情况请求被重定向到了登录页返回的是 HTML 而不是 JSON或者模型名称写错了API 返回了错误信息但没有choices字段。排查方法在 MCP Server 里把原始返回打印出来看看到底返回了什么。如果是 HTML说明TAOTOKEN_BASE_URL配错了检查是不是写成了https://taotoken.net而漏了/api。如果是错误 JSON看error.message字段的内容通常是模型名称不对或参数格式有问题。5.4 OAuth 相关报错报错信息Error: OAuth token exchange failed如果你在 MCP 配置里用了需要 OAuth 的 Server但没配回调地址就会报这个错。drawio-mcp-server 和 taotoken-llm 都不需要 OAuth如果你看到这个报错说明你引入了一个第三方 MCP Server 需要 OAuth 认证。解决方法是查那个 Server 的文档配好OAUTH_CLIENT_ID、OAUTH_CLIENT_SECRET和OAUTH_REDIRECT_URI。如果暂时不需要那个 Server先从配置里移除把主链路跑通再说。5.5 流程图解析为空Agent 返回的flowUsed.nodes是空数组或者分类结果总是默认值。原因通常是 draw.io 文件路径不对或者文件格式不是 drawio-mcp-server 能解析的。确认DRAWIO_FILE_PATH指向的文件存在并且是用 draw.io 保存的.drawio格式不是导出的 PNG 或 SVG。另外节点 ID 不要用中文用英文加下划线避免解析时编码问题。5.6 模型返回超时如果分类或回复生成经常超时先检查网络到taotoken.net的延迟。可以在终端里curl -o /dev/null -s -w %{time_total} https://taotoken.net/api看响应时间。如果超过 3 秒可能是本地网络问题。另外分类用的模型如果太大响应也会慢换成轻量模型试试。TaoToken 支持在请求里指定max_tokens参数把分类请求的max_tokens设成 100 左右能明显加快返回速度。6. 把这张流程图变成你工单系统的常驻能力跑通 demo 之后下一步是把它变成日常可用的东西。我的做法是把 draw.io 流程图纳入版本管理每次工单处理规则有变动先改图再提交Agent 自动读取最新版本。这样流程变更不再需要改代码改图就行。具体操作在项目里建一个flows/目录把ticket-flow.drawio放进去用 Git 管理。每次修改后drawio-mcp-server 读取的就是最新文件。如果你想让 Agent 在运行时动态加载不同流程图可以在 API Route 里根据工单来源选择不同的.drawio文件路径。另一个实用技巧是给流程图节点加上“超时”和“重试”属性。在 draw.io 的节点属性里加自定义字段比如timeout5000、retry2Agent 解析时会读取这些字段并在调用工具时应用。这样你不需要在代码里硬编码超时逻辑流程图上就能配。关于成本控制分类请求用轻量模型回复生成用强模型这个策略在工单量大的时候能省不少。你可以在 TaoToken 控制台设置用量告警当请求量超过阈值时发通知。如果工单量特别大考虑把分类结果缓存起来相同类型的工单直接复用分类路径只对回复做个性化生成。最后说一个我踩过的坑不要把所有工单都塞给 Agent 处理。有些工单明显是垃圾信息或测试数据应该在进入 Agent 之前就过滤掉。可以在 Next.js API Route 里加一层简单的规则过滤比如内容长度小于 5 个字符的直接返回“请补充详细描述”不调用模型。这样既省成本也避免 Agent 被无意义输入干扰。如果你想把 Agent 能力扩展到更多场景比如自动生成工单周报、自动识别重复工单可以在 draw.io 里加新的分支和工具节点然后在 MCP 配置里注册对应的工具 Server。整套架构的扩展点就在流程图和 MCP 工具这两个地方改这两个地方不需要动 Agent 的核心执行逻辑。需要长期跑编码任务或 Agent 工作流的话可以了解一下 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 适合需要稳定模型调用和批量处理的场景。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言 SDK 的调用示例和参数说明。API Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 可以创建多个 Key 分别用于开发和生产环境。