1. 为什么图表 MCP 值得单独接一次mcp-server-chart 能做什么如果你已经在用 Claude Code、Cline 或者 Codex 这类支持 MCP 的客户端大概率遇到过一种尴尬模型能帮你把数据算得明明白白但一到「把结果画出来」就掉链子——要么给你一段 ECharts 配置让你自己贴到 HTML 里要么干脆用 ASCII 字符拼个歪歪扭扭的柱状图。mcp-server-chart 就是来解决这个断层的。mcp-server-chart 是 AntV 团队开源的一个图表类 MCP Server底层基于 AntV 的图表渲染能力对外暴露成标准 MCP 工具。它把「生成图表」这件事拆成了 25 个以上的独立工具函数模型只要按工具名和参数调用就能直接拿到一张可访问的图片 URL。你不需要写前端、不需要引 CDN、不需要调 canvas模型说「画个柱状图」工具返回一个链接浏览器打开就是图。它支持的图表类型覆盖得相当全我按使用频率分个类类别工具名典型用途对比类generate_bar_chart / generate_column_chart横向、纵向数值对比趋势类generate_line_chart / generate_area_chart时间序列、连续变量趋势占比类generate_pie_chart / generate_liquid_chart份额、百分比可视化分布类generate_histogram_chart / generate_boxplot_chart / generate_violin_chart数据分布、离群点关系类generate_scatter_chart / generate_network_graph / generate_sankey_chart相关性、节点关系、流向结构类generate_mind_map / generate_organization_chart / generate_treemap_chart思维导图、组织架构、层级流程类generate_flow_diagram / generate_fishbone_diagram流程图、鱼骨图地理类generate_district_map / generate_path_map / generate_pin_map行政区、路径、POI 分布其他generate_radar_chart / generate_funnel_chart / generate_venn_chart / generate_word_cloud_chart / generate_dual_axes_chart多维、漏斗、集合、词云、双轴这个清单基本把日常汇报、数据分析、产品文档里会用到的图都包了。适合谁用三类人最直接一是做数据分析、经常要把结论可视化的同学二是写技术文档、需要配架构图或流程图的工程师三是搭 Agent 工作流、想让模型自动出图的产品或研发。你只要有一个支持 MCP 的客户端加上一个能调模型的 Key整条链路就能跑通。这里有个关键点mcp-server-chart 本身只负责「画图」它不负责「理解你的话」。理解需求、决定调哪个工具、填什么参数这些是模型干的活。所以你需要一个稳定的模型调用通道。我这次用的是 TaoToken 的统一 Key 和 API 通道把模型调用和图表 MCP 串在一起下面从安装到验证一步步来。2. 前置准备npm 安装 mcp-server-chart 与 TaoToken 统一 Key 配置先说环境。mcp-server-chart 是个 Node 包所以本机得有 Node.js建议 18 以上我用的是 20 LTS。检查一下node -v npm -v版本没问题就全局装。全局装的好处是命令行直接能敲mcp-server-chart不用每次找路径npm install -g antv/mcp-server-chart装完验证一下命令是否存在mcp-server-chart --help如果能看到 transport 相关的参数说明说明装好了。这里踩过一个坑有些同学 npm 全局目录没配好装完提示 command not found。解决办法是npm config get prefix看一下全局路径把它加到 PATH 里或者干脆用npx antv/mcp-server-chart直接跑省去全局安装。接下来是模型通道。mcp-server-chart 只画图但你的客户端里那个「大脑」得能调模型。我用 TaoToken 的统一 Key好处是一个 Key 走通对话、编码、Agent 多种场景不用在多个平台之间来回切。获取方式很简单登录官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 进控制台创建 API Key。拿到 Key 之后记下两个东西后面配置要用Base URLhttps://taotoken.net/apiAPI Key形如sk-xxxxxxxx的那串如果你用的是 Claude Code 这类工具它需要的是 Anthropic 兼容的接入点TaoToken 的文档里有对应说明地址在 https://taotoken.net/api-keys 和 https://taotoken.net/doc 照着填就行。模型 ID 这块做图表生成这种任务选一个指令跟随能力强的就行比如 claude 系列或者 gpt 系列都可以具体以你控制台里能选的为准。环境变量建议单独放别硬编码在配置里。Linux/macOS 下export TAOTOKEN_API_KEYsk-你的key export TAOTOKEN_BASE_URLhttps://taotoken.net/apiWindows PowerShell$env:TAOTOKEN_API_KEYsk-你的key $env:TAOTOKEN_BASE_URLhttps://taotoken.net/api这样客户端配置里引用变量名即可Key 不会散落在多个文件里。到这一步画图的工具和调模型的通道都齐了下面进配置。3. 可复制配置把 mcp-server-chart 挂到 MCP 客户端mcp-server-chart 支持两种传输方式启动命令不一样配置里要对应上# SSE 方式地址是 http://localhost:1122/sse mcp-server-chart --transport sse # Streamable HTTP 方式地址是 http://localhost:1122/mcp mcp-server-chart --transport streamable我推荐用 streamable因为新版 MCP 客户端对它的支持更统一。下面给三种常见客户端的配置片段你按自己用的挑一个。Claude Code / Claude Desktop 的 settings 配置放在 MCP servers 配置段里{ mcpServers: { mcp-server-chart: { command: mcp-server-chart, args: [--transport, streamable], env: { TAOTOKEN_API_KEY: sk-你的key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }Cline 的 MCP 配置Cline 里叫 MCP Servers格式类似{ mcpServers: { chart: { command: npx, args: [-y, antv/mcp-server-chart, --transport, streamable], env: { TAOTOKEN_API_KEY: sk-你的key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }Codex 的 auth.json 场景Codex 走的是 OpenAI 兼容通道配置里要写全三件套——Base URL、Key、Model ID。auth.json 大致长这样{ base_url: https://taotoken.net/api, api_key: sk-你的key, model: claude-3-5-sonnet }注意 model 字段填你控制台里实际可用的模型 ID别照抄。三件套缺一不可Base URL 决定请求打到哪Key 决定能不能过鉴权Model ID 决定用哪个模型来理解你的画图需求。如果你用的是 CC Switch 这类管理工具逻辑一样把上面三件套填进对应字段即可。配置完重启客户端让 MCP Server 重新加载。这里有个细节mcp-server-chart 启动后会占用 1122 端口如果这个端口被别的进程占了启动会失败。用lsof -i:1122macOS/Linux或netstat -ano | findstr 1122Windows查一下冲突就换端口或杀掉占用进程。配置写完后客户端里应该能看到 chart 这个 MCP Server 处于 connected 状态展开能看到 25 个以上的工具列表。看到工具列表说明挂载成功可以进验证了。4. 验证请求一次柱状图与折线图的完整调用验证分两层先确认 MCP 工具能被列出和调用再确认模型能通过 TaoToken 通道驱动它出图。第一层用官方 SDK 写个最小调用脚本。先装依赖npm i modelcontextprotocol/sdk然后写一个test-chart.mjsimport { Client } from modelcontextprotocol/sdk/client/index.js; import { StreamableHTTPClientTransport } from modelcontextprotocol/sdk/client/streamableHttp.js; const mcpUrl http://localhost:1122/mcp; const transport new StreamableHTTPClientTransport(new URL(mcpUrl)); const client new Client({ name: chart-test, version: 1.0.0 }); client.onerror (err) console.error(client error:, err); await client.connect(transport); // 列出所有可用工具 const tools await client.listTools(); console.log(可用工具数量:, tools.tools.length); console.log(工具名:, tools.tools.map(t t.name).join(, )); // 调用柱状图工具 const barResult await client.callTool({ name: generate_bar_chart, arguments: { data: [ { category: 一月, value: 120 }, { category: 二月, value: 200 }, { category: 三月, value: 150 }, { category: 四月, value: 280 } ], title: 季度销售对比 } }); console.log(柱状图结果:, JSON.stringify(barResult, null, 2)); // 调用折线图工具 const lineResult await client.callTool({ name: generate_line_chart, arguments: { data: [ { time: 2024-01, value: 30 }, { time: 2024-02, value: 55 }, { time: 2024-03, value: 48 }, { time: 2024-04, value: 72 } ], title: 月度活跃趋势 } }); console.log(折线图结果:, JSON.stringify(lineResult, null, 2)); await client.close();跑之前确保 mcp-server-chart 已经在 streamable 模式下启动。执行node test-chart.mjs成功的话你会先看到工具数量应该是 25 个以上然后两个 callTool 的返回里各带一个图片 URL。把 URL 复制到浏览器打开能看到渲染好的柱状图和折线图就说明 MCP 链路本身通了。第二层让模型来驱动。在你的 MCP 客户端里比如 Claude Code直接输入一句自然语言帮我用 generate_bar_chart 画一张图数据是产品A 320、产品B 480、产品C 260、产品D 410标题叫「各产品销量对比」。模型会自己决定调用哪个工具、怎么填参数然后返回图片链接。这一步能跑通说明 TaoToken 的模型通道 mcp-server-chart 的图表能力完整串起来了。我实测下来从输入到出图大概几秒返回的 URL 是可直接访问的不需要额外鉴权。如果你想让模型自动选图可以更口语化一点「把下面这组数据画成最合适的图……」模型会根据数据特征挑柱状图还是折线图。这也是 MCP 的价值——工具是模型自己选的你只管描述需求。5. 常见报错排查401、local proxy failed、reading choices 怎么解接入过程里最容易卡在几个固定报错上我按遇到频率排一下。401 Unauthorized。这个基本是 Key 的问题。先确认三件事Key 有没有复制全前后别带空格、Base URL 是不是https://taotoken.net/api注意结尾没有多余斜杠、Key 有没有过期或被禁用。如果配置里用的是环境变量引用检查变量名拼写是否一致。还有一种情况是客户端缓存了旧 Key改完配置要完全重启客户端不是刷新页面。local proxy failed / connection refused。这个通常指向 mcp-server-chart 没起来或者端口不对。先确认mcp-server-chart --transport streamable这个进程在跑再确认配置里的 URL 是http://localhost:1122/mcpstreamable而不是/sse。两种 transport 的路径不能混用混了就连不上。如果端口被占换端口启动配置里的 URL 同步改。reading choices / Cannot read properties of undefined (reading choices)。这个报错一般出在模型返回结构不符合预期的时候根因往往是 Base URL 或 Model ID 填错了导致请求打到了不兼容的端点返回体里没有 choices 字段。检查三件套Base URL 是不是 TaoToken 的、Model ID 是不是控制台里真实存在的、请求格式是不是 OpenAI 兼容。把 Model ID 换成明确可用的再试。OAuth 相关报错。有些客户端默认走 OAuth 流程但 TaoToken 用的是 API Key 鉴权两者不匹配就会报 OAuth 错误。解决办法是在客户端配置里显式指定用 API Key 模式别让它去走 OAuth。Claude Code 里对应的是接入方式选择选 API Key 那一项。工具列表为空。MCP Server 连上了但 listTools 返回空多半是版本问题。npm install -g antv/mcp-server-chart装的时候可能装到了旧版本用npm view antv/mcp-server-chart version看下最新版然后npm install -g antv/mcp-server-chartlatest升级。升级完重启客户端。图片 URL 打不开。返回的 URL 是临时链接有有效期过期了就打不开重新调一次工具即可。如果一直打不开检查本机网络能不能访问外网图片服务这个和 MCP 本身无关。排查顺序建议固定成先看 mcp-server-chart 进程在不在 → 再看端口和 URL 对不对 → 再看 Key 和 Base URL → 最后看 Model ID。按这个顺序走大部分问题五分钟内能定位。6. 把图表 MCP 用进日常工作流几个实用建议跑通之后真正提升效率的是把它嵌进日常流程。我自己的用法是数据分析阶段让模型先算算完直接说「画成柱状图」一步到位不用再开 Excel 或写 ECharts。写技术文档时流程类的内容让模型生成 flow_diagram结构类的内容生成 mind_map配图效率比手画高很多。如果你要做长期编码或搭 Agent 工作流建议把模型通道固定下来。TaoToken 的 Coding Plan 适合这种持续调用的场景地址在 https://taotoken.net/coding-plan 一个 Key 覆盖多种模型省得每次换工具就换配置。想先体验模型对话效果的可以去 https://taotoken.net/chat 试试确认模型理解能力符合预期再往工作流里接。还有个小技巧mcp-server-chart 的工具参数里data 字段的结构在不同图表类型下略有差异比如柱状图用 category/value折线图用 time/value。你不用记直接问模型「generate_line_chart 需要什么参数」它会告诉你。或者让模型自己填你只给原始数据它负责映射。最后提醒一句图表 MCP 生成的是图片链接不是可编辑的源文件。如果你需要后续二次编辑得让模型同时输出底层数据或配置。这个取舍在接入前想清楚能省不少返工。整条链路跑通后你会发现「让模型出图」这件事从以前的半自动变成了全自动剩下的就是多试几种图表类型找到最适合你数据的那几种。