1. 为什么要在 Spring AI 里接 Antv 图表如果你正在用 Spring AI 做智能体大概率会遇到一个尴尬场景模型把数据分析得头头是道返回一大段文字结论但用户真正想要的是「一张能直接贴进周报的柱状图」。让模型输出 Markdown 表格勉强能用可一旦涉及多维度对比、占比分布纯文本就完全不够看了。Antv 的 mcp-server-chart 正好补上这一环。它把柱状图、饼图、折线图、面积图、雷达图等十几种图表能力封装成标准 MCP 工具Spring AI 的智能体只要按 MCP 协议调用就能拿到一张图片链接直接嵌到看板或文档里。整个过程不需要你手写 ECharts 配置也不用研究 G2 的渲染细节。这篇面向需要快速搭智能数据看板的 Java 开发者从零把链路跑通先起一个本地 MCP 图表服务再在 Spring AI 里注册工具最后用一句自然语言触发「数据查询 → 图表生成 → 链接返回」的闭环。全程可复制本地就能验证。适合谁有 Spring Boot 基础、想给智能体加可视化输出能力的后端同学或者正在做数据看板原型、不想被前端图表库拖住节奏的团队。2. 前置准备TaoToken 与 MCP 服务环境在写代码之前先把两个外部依赖理清楚模型调用通道和图表 MCP 服务。模型侧我用的是 TaoToken 提供的统一接入能力它兼容 OpenAI 风格的接口Spring AI 的 OpenAI Starter 可以直接对接省去自己维护多套鉴权的麻烦。你需要先在控制台创建一个 API Key后面配置里会用到。控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Key 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite图表侧需要 Node 环境建议 18全局装 Antv 的 MCP 服务npm install -g antv/mcp-server-chart装完后用 SSE 传输方式启动端口选 1122mcp-server-chart --transport sse --port 1122启动成功会看到监听日志。这个服务对外暴露的是标准 MCP 工具列表Spring AI 通过 SSE 连上去之后就能自动发现generate_bar_chart、generate_pie_chart这类工具不需要你手动声明每个图表的参数结构。注意MCP 服务默认只监听本地生产环境要放到内网并加访问控制别直接暴露到公网。3. Spring AI 侧的可复制配置3.1 依赖引入在pom.xml里加 Spring AI 的 MCP 客户端和 OpenAI Starter。版本按你项目实际对齐这里给一组可用组合dependency groupIdorg.springframework.ai/groupId artifactIdspring-ai-mcp-client-spring-boot-starter/artifactId version1.0.0/version /dependency dependency groupIdorg.springframework.ai/groupId artifactIdspring-ai-openai-spring-boot-starter/artifactId version1.0.0/version /dependency3.2 application.yml 配置把模型通道和 MCP 服务地址都写进配置。模型部分指向 TaoToken 的 API 地址Key 用环境变量注入别硬编码spring: ai: openai: base-url: https://taotoken.net/api api-key: ${TAOTOKEN_API_KEY} chat: options: model: gpt-4o-mini mcp: client: enabled: true name: antv-chart-client version: 1.0.0 type: SYNC sse: connections: antv-chart: url: http://localhost:1122这里type: SYNC表示同步调用图表生成通常几秒内返回同步足够。如果后面要批量出图可以换成异步客户端。3.3 注册 MCP 工具为 Spring AI 回调Spring AI 的 MCP 客户端会自动拉取服务端工具列表但要让智能体真正能调用需要把每个工具包装成FunctionCallback。下面这段是核心骨架Configuration public class McpToolConfig { Bean public ListFunctionCallback antvChartCallbacks(McpSyncClient mcpClient) { return mcpClient.listTools().tools().stream() .map(tool - new McpFunctionCallback(mcpClient, tool)) .collect(Collectors.toList()); } Bean public ChatClient chartChatClient(ChatClient.Builder builder, ListFunctionCallback antvChartCallbacks) { return builder .defaultFunctions(antvChartCallbacks.toArray(new FunctionCallback[0])) .defaultSystem(你是数据看板助手用户给出数据后优先调用图表工具生成可视化结果并返回图片链接。) .build(); } }McpFunctionCallback是 Spring AI 提供的适配器它把 MCP 工具的入参 schema 转成模型能理解的函数定义模型决定调用时回调会通过 MCP 客户端把请求转发给 Antv 服务。3.4 触发图表生成的服务方法写一个简单的 Service把用户输入直接交给 ChatClientService public class ChartService { private final ChatClient chatClient; public ChartService(ChatClient chartChatClient) { this.chatClient chartChatClient; } public String generate(String userInput) { return chatClient.prompt() .user(userInput) .call() .content(); } }到这里配置就齐了。模型负责理解「住宿费800、交通费200」这类自然语言把它转成图表工具需要的结构化参数MCP 服务负责渲染并返回图片地址。4. 验证请求与成功结果4.1 用 curl 先确认 MCP 服务活着在写 Java 调用之前先确认图表服务本身没问题。MCP 的 SSE 端点可以用 curl 探活curl -N http://localhost:1122/sse如果看到持续的事件流输出说明服务正常。按 CtrlC 退出即可。4.2 跑一个端到端请求启动 Spring Boot 应用后用一个测试接口或单元测试触发SpringBootTest class ChartServiceTest { Autowired private ChartService chartService; Test void shouldGenerateBarChart() { String input 请根据以下费用生成柱状图住宿费800元交通费200元伙食费700元通话费100元; String result chartService.generate(input); System.out.println(result); assertThat(result).contains(http); } }实测下来模型会先输出一段简短说明然后附带一个图片链接类似已为你生成费用统计柱状图 https://mdn.alipayobjects.com/one_clip/xxxxx.jpg把链接贴到浏览器能看到带标题、坐标轴和数据标签的柱状图。到这一步端到端链路就通了。4.3 换成饼图验证工具切换同一份数据把输入改成「生成饼图展示费用占比」模型会自动选择generate_pie_chart工具返回的图片就是饼图。这说明 MCP 工具发现和模型选择都在正常工作不需要你改任何代码。如果你想在对话里直接对比不同模型的图表生成效果可以走模型对话入口快速试https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite5. 本篇常见错排查5.1 启动报「No MCP client connections configured」多半是application.yml里spring.ai.mcp.client.enabled没设成 true或者sse.connections层级写错了。注意connections下面才是具体服务名别把 url 直接挂在 client 下。5.2 工具列表为空先确认mcp-server-chart进程还在跑端口没被占用。然后检查 Spring AI 连的地址是http://localhost:1122不要多加/sse或/mcp后缀——不同版本客户端对路径拼接处理不一样以你依赖版本的文档为准。如果列表仍为空把 MCP 客户端日志级别调到 DEBUG看握手阶段有没有报错。5.3 模型不调用工具只返回文字这是最常见的一类。原因通常是系统提示词没强调「必须调用图表工具」或者用的模型本身函数调用能力弱。解决办法有两个一是把defaultSystem写得更明确比如「任何涉及数据可视化的请求都必须调用图表工具禁止只返回文字描述」二是换一个函数调用支持更好的模型。另外确认defaultFunctions确实把回调注册进去了漏注册的话模型根本看不到工具。5.4 返回的图片链接打不开Antv 服务生成的图片默认有有效期过期链接会 403。如果你要把链接存进数据库长期展示建议在拿到链接后立刻下载转存到自己的对象存储而不是直接存原始链接。另外检查本地网络能否访问图片域名有些内网环境会拦截外部 CDN。5.5 中文数据导致图表乱码部分渲染环境缺少中文字体标题和标签会显示成方块。解决办法是在 MCP 服务启动时指定字体或者把图表标题改成英文。如果只是本地验证可以先忽略生产环境再统一处理字体挂载。6. 下一步把看板做成长期能力单次生成图表只是起点。如果你打算把这个能力沉淀成团队的数据看板服务建议往两个方向走一是把 MCP 工具调用封装成带缓存的接口相同数据指纹直接返回历史图片省掉重复渲染二是结合定时任务让智能体定期拉取数据库指标并自动出图形成「数据变化 → 图表更新」的自动化链路。对于需要长期跑编码和 Agent 任务的场景可以了解下 Coding Plan 的额度方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite如果你更习惯在 IDE 里直接调模型辅助开发Claude Code 的接入方式可以参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude-code-anthropicutm_campaignrewrite把上面这套配置跑通之后你手里就有了一个「会画图的智能体」。接下来要做的无非是喂给它更真实的数据源以及把返回的图片链接接到你现有的看板前端里。