本文介绍如何使用 AntV MCP Server Chart 构建可视化智能体，实现大模型从自然语言生成 SQL 并自动创建专业图表。详细讲解环境准备、私有化部署、核心逻辑实现和智能渲染流程，支持25+种图表类型。开发者无需前端知识即可通过 MCP 协议实现大模型与可视化服务的无缝集成，显著提升图表生成准确性和自动化水平，满足企业级安全合规要求。

---

在大模型驱动的智能数据时代，图表生成（Chart Generation）的准确性严重依赖对数据结构和可视化意图的深度理解。传统方法往往依赖复杂的 Prompt 工程或繁琐的手动编码，不仅效率低下，还难以适配多样化的数据格式与图表需求。

本文将带你基于 AntV MCP Server Chart 构建一个“可视化智能体”——让大模型不仅能“读懂数据”，还能“画出专业图表”，显著提升图表生成的准确性与自动化水平！

---

🎬 运行效果

🎯 核心价值

• 无需前端知识：开发者无需掌握 D3、ECharts 或 AntV 前端语法。
• 25+ 图表类型开箱即用：覆盖柱状图、折线图、桑基图、词云、组织架构图等主流可视化场景。
• 支持私有化部署：保障数据安全，适配企业内网环境。
• MCP 协议标准化调用：通过 Model Context Protocol 实现大模型与可视化服务的无缝集成。

---

🧭 本文结构概览

1. 环境准备：搭建 MCP-Hub 与图表渲染服务
2. 私有化部署：配置 AntV MCP Server Chart + GPT-VIS-API + MinIO
3. 核心逻辑：大模型如何生成 SQL 与推荐图表类型
4. 智能渲染：通过 React Agent 调用 MCP 工具生成图表
5. 总结与推荐：总结&完整代码获取

---

1️⃣ 环境准备：搭建 MCP 工具中枢

1.1 安装 MCP-Hub

MCP-Hub 是一个开源的 MCP（Model Context Protocol）工具聚合平台，用于统一管理、注册和调用各类 MCP 服务。

docker run -d \  --name mcphub \  -p 3300:3000 \  --add-host host.docker.internal:host-gateway \  samanhappy/mcphub

访问地址：http://localhost:3300
默认账号：admin / admin123

国内加速配置（推荐）

• Python 包源：https://mirrors.aliyun.com/pypi/simple
• NPM 源：https://registry.npmmirror.com

2️⃣ 服务部署：构建私有化图表生成引擎

2.1 部署 MinIO 对象存储（用于图表持久化）

MinIO 作为轻量级 S3 兼容对象存储，用于保存生成的图表图片。

docker run -d \  --name minio \  -p 19000:9000 \  -p 19001:9001 \  -v "$(pwd)/volume/minio/data:/data" \  -e MINIO_ROOT_USER=admin \  -e MINIO_ROOT_PASSWORD=12345678 \  minio/minio:RELEASE.2025-04-22T22-12-26Z \  server /data --console-address ":9001"

配置步骤：

• 访问控制台：http://localhost:19001
• 创建 Bucket：chart-images
• 设置 Bucket 为 public 可读
• 生成 Access Key 与 Secret Key（用于后续服务认证）

2.2 部署 GPT-VIS-API（图表渲染服务）

我开源的项目: https://github.com/apconw/gpt-vis-api

GPT-VIS-API 是专为私有化场景设计的轻量级图表生成服务，接收结构化数据，调用 AntV 渲染图表，并将结果上传至 MinIO，返回带签名的图片 URL。

docker run -d \  --name gpt-vis-api \  -p 3100:3000 \  --add-host host.docker.internal:host-gateway \  -e MINIO_ENDPOINT=host.docker.internal \  -e MINIO_PORT=19000 \  -e MINIO_USE_SSL=false \  -e MINIO_ACCESS_KEY=your-access-key \  -e MINIO_SECRET_KEY=your-secret-key \  -e MINIO_BUCKET=chart-images \  -e MINIO_PUBLIC_DOMAIN="http://localhost:19000" \  crpi-7xkxsdc0iki61l0q.cn-hangzhou.personal.cr.aliyuncs.com/apconw/gpt-vis-api:0.0.1

注意：生产环境中需将 host.docker.internal 替换为实际服务器 IP。

验证服务是否正常

curl -X POST http://localhost:3100/generate \  -H "Content-Type: application/json" \  -d '{    "type": "line",    "data": [      {"time": "2025-05", "value": 512},      {"time": "2025-06", "value": 1024}    ]  }'

✅ 成功响应应包含类似：

{  "url": "http://localhost:19000/chart-images/chart-abc123.png?Expires=..."}

2.3 安装 AntV MCP Server Chart

通过 MCP-Hub 注册 AntV 图表工具：

npx -y @antv/mcp-server-chart

并在 MCP-Hub 中配置环境变量：

VIS_REQUEST_SERVER=http://host.docker.internal:3100/generate

此配置使 AntV MCP 工具将图表渲染请求转发至 GPT-VIS-API。⚠️官方工具图片渲染默认使用公网服务.这里配置解决了私有化部署问题!!

配置

3️⃣ 核心逻辑：大模型生成 SQL 与推荐图表类型

通过结构化 Prompt 引导大模型完成两项关键任务：

• 生成可执行的 SQL 查询
• 根据查询结果语义推荐最合适的图表类型

3.1 Prompt 设计要点

• 明确角色：专业 DBA + BI 分析师
• 提供上下文：表结构、表关系、当前时间
• 约束输出：仅返回 JSON，包含 sql_query 和 chart_type
• 内置 25+ 图表类型定义（如 generate_line_chart, generate_sankey_chart 等）

3.2 输出示例

{  "sql_query": "SELECT DATE(created_at) AS day, COUNT(*) AS orders FROM orders GROUP BY day ORDER BY day;",  "chart_type": "generate_line_chart"}

3.3 核心代码片段（SQL 与图表推荐）

import jsonimport tracebackfrom langchain.prompts import ChatPromptTemplatefrom datetime import datetimeimport loggingfrom agent.text2sql.analysis.llm_util import get_llmlogger = logging.getLogger(__name__)def sql_generate(state):    llm = get_llm()    prompt = ChatPromptTemplate.from_template(        """        你是一位专业的数据库管理员（DBA），任务是根据提供的数据库结构、表关系以及用户需求，生成优化的MYSQL SQL查询语句，并推荐合适的可视化图表。                  ## 任务          - 根据用户问题生成一条优化的SQL语句。          - 根据查询生成逻辑从**图表定义**中选择最合适的图表类型。                  ## 约束条件         1. 你必须仅生成一条合法、可执行的SQL查询语句 —— 不得包含解释、Markdown、注释或额外文本。         2. **必须直接且完整地使用所提供的表结构和表关系来生成SQL语句**。         3. 你必须严格遵守数据类型、外键关系及表结构中定义的约束。         4. 使用适当的SQL子句（JOIN、WHERE、GROUP BY、HAVING、ORDER BY、LIMIT等）以确保准确性和性能。         5. 若问题涉及时序，请合理使用提供的“当前时间”上下文（例如用于相对日期计算）。         6. 不得假设表结构中未明确定义的列或表。         7. 如果用户问题模糊或者缺乏足够的信息以生成正确的查询，请返回：`NULL`               ## 提供的信息        - 表结构：{db_schema}        - 表关系：{table_relationship}        - 用户提问：{user_query}        - 当前时间：{current_time}                     ## 图表定义        - generate_area_chart: used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.        - generate_bar_chart: used to compare values across different categories, suitable for horizontal comparisons.        - generate_boxplot_chart: used to display the distribution of data, including the median, quartiles, and outliers.        - generate_column_chart: used to compare values across different categories, suitable for vertical comparisons.        - generate_district_map: Generate a district-map, used to show administrative divisions and data distribution.        - generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.        - generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.        - generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.        - generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.        - generate_histogram_chart: Generate a histogram, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.        - generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.        - generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.        - generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.        - generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.        - generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.        - generate_path_map: Generate a path-map, used to display route planning results for POIs.        - generate_pie_chart: Generate a pie chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.        - generate_pin_map: Generate a pin-map, used to show the distribution of POIs.        - generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.        - generate_sankey_chart: Generate a sankey chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.        - generate_scatter_chart: Generate a scatter plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.        - generate_treemap_chart: Generate a treemap, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.        - generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.        - generate_violin_chart: Generate a violin plot, used to display the distribution of data, combining features of boxplots and density plots to provide a more detailed view of the data distribution.        - generate_word_cloud_chart: Generate a word-cloud, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.        - generate_table: Generate a structured table, used to organize and present data in rows and columns, facilitating clear and concise information display for easy reading and analysis.                ## 输出格式        - 你**必须且只能**输出一个符合以下结构的 **纯 JSON 对象**，不得包含任何额外文本、注释、换行或 Markdown 格式：        ```json        {{            "sql_query": "生成的SQL语句字符串",            "chart_type": "推荐的图表类型字符串，如 \"generate_area_chart\""        }}    """    )    chain = prompt | llm    try:        response = chain.invoke(            {                "db_schema": state["db_info"],                "user_query": state["user_query"],                "table_relationship": state.get("table_relationship", []),                "current_time": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),            }        )        state["attempts"] += 1        clean_json_str = response.content.strip().removeprefix("```json").strip().removesuffix("```").strip()        state["generated_sql"] = json.loads(clean_json_str)["sql_query"]        # mcp-hub 服务默认添加前缀防止重复问题        state["chart_type"] = "mcp-server-chart-" + json.loads(clean_json_str)["chart_type"]    except Exception as e:        traceback.print_exception(e)        logger.error(f"Error in generating: {e}")        state["generated_sql"] = "No SQL query generated"    return state

4️⃣ 智能渲染：调用 MCP 工具生成图表

4.1 构建 React Agent

使用 LangGraph 的 create_react_agent 构建一个轻量级智能体，专门负责图表渲染：

• 动态过滤工具：仅加载当前所需的图表工具（如 mcp-server-chart-generate_line_chart），减少 Token 消耗与幻觉风险。
• 自动填充参数：根据数据结构推断 X/Y 轴、标题、图例等配置。
• 强制中文标签：确保图表可读性。

4.2 渲染流程

• 执行 SQL 获取结果数据
• 将数据与图表类型传入 Agent
• Agent 调用对应 MCP 工具
• 工具调用 GPT-VIS-API 生成图片并返回 URL 最终输出：图表

4.3 核心代码片段（图表渲染）

import osfrom langchain_mcp_adapters.client import MultiServerMCPClientfrom langchain_openai import ChatOpenAIfrom langgraph.prebuilt import create_react_agentasync def data_render_ant(state: AgentState):    client = MultiServerMCPClient({        "mcphub-sse": {            "url": os.getenv("MCP_HUB_DATABASE_QA_GROUP_URL"),            "transport": "streamable_http",        }    })    chart_type = state["chart_type"]    tools = await client.get_tools()    tools = [tool for tool in tools if tool.name == chart_type]    llm = ChatOpenAI(        model=os.getenv("MODEL_NAME", "qwen-plus"),        temperature=float(os.getenv("MODEL_TEMPERATURE", 0.75)),        base_url=os.getenv("MODEL_BASE_URL"),        api_key=os.getenv("MODEL_API_KEY"),        streaming=True,    )    result_data = state["execution_result"]    chart_agent = create_react_agent(        model=llm,        tools=tools,        prompt=f"""            你是一位经验丰富的BI专家，擅长根据数据特征自动选择最合适的MCP图表工具，并完成图表渲染。            ### 任务步骤            1. **分析数据特征**：理解输入的原始数据结构（如维度、指标、数据类型、数据量等）。            2. **选择最优图表类型**：基于数据特征，从MCP图表库中选择最适合的图表工具。            3. **读取工具Schema**：获取所选MCP图表工具的参数配置规范（JSON Schema）。            4. **填充参数**：根据原始数据和可视化目标，按Schema要求填充图表参数。            5. **生成图表**：调用MCP工具渲染图表，并返回图表链接。                        ### 输入数据            {result_data}                        ### 要求            - 不要解释图表内容或生成文字说明。            - 必须返回符合格式的图表链接。            - 图表需清晰表达数据关系，符合可视化最佳实践。            - x轴和y轴的标签必须使用中文显示。                        ### 返回格式             [图表](https://example.com/chart.png)        """,    )    result = await chart_agent.ainvoke(        {"messages": [("user", "根据输入数据选择合适的MCP图表工具进行渲染")]},        config={"configurable": {"thread_id": "chart-render"}},    )    state["chart_url"] = result["messages"][-1].content    return state

5️⃣ 总结

✅ 本文成果

• 成功构建端到端的 “自然语言 → SQL → 图表” 自动化流水线
• 实现大模型与专业可视化能力的 标准化对接
• 支持完全私有化部署，满足企业级安全合规要求

📚 完整代码

**参考我的开源项目:**git@github.com:apconw/sanic-web.git

🌈 项目亮点

• ✅ 集成 MCP 多智能体架构
• ✅ 支持 Dify / LangChain / LlamaIndex / Ollama / vLLM / Neo4j
• ✅ 前端采用 Vue3 + TypeScript + Vite5，现代化交互体验
• ✅ 内置 ECharts / AntV 图表问答 + CSV 表格问答
• ✅ 支持对接主流 RAG 系统 与 Text2SQL 引擎
• ✅ 轻量级 Sanic 后端，适合快速部署与二次开发
• ✅ 项目已被蚂蚁官方推荐收录

AntV

运行效果:

智能问答

如何学习AI大模型 ？

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。【保证100%免费】🆓

CSDN粉丝独家福利

这份完整版的 AI 大模型学习资料已经上传CSDN，朋友们如果需要可以扫描下方二维码&点击下方CSDN官方认证链接免费领取 【保证100%免费】

读者福利： 👉👉CSDN大礼包：《最新AI大模型学习资源包》免费分享 👈👈

（👆👆👆安全链接，放心点击）

对于0基础小白入门：

如果你是零基础小白，想快速入门大模型是可以考虑的。

一方面是学习时间相对较短，学习内容更全面更集中。
二方面是可以根据这些资料规划好学习计划和方向。

👉1.大模型入门学习思维导图👈

要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。

对于从来没有接触过AI大模型的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。（全套教程文末领取哈）

👉2.AGI大模型配套视频👈

很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，每个章节都是当前板块的精华浓缩。

👉3.大模型实际应用报告合集👈

这套包含640份报告的合集，涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师，还是对AI大模型感兴趣的爱好者，这套报告合集都将为您提供宝贵的信息和启示。（全套教程文末领取哈）

👉4.大模型实战项目&项目源码👈

光学理论是没用的，要学会跟着一起做，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战项目来学习。（全套教程文末领取哈）

👉5.大模型经典学习电子书👈

随着人工智能技术的飞速发展，AI大模型已经成为了当今科技领域的一大热点。这些大型预训练模型，如GPT-3、BERT、XLNet等，以其强大的语言理解和生成能力，正在改变我们对人工智能的认识。 那以下这些PDF籍就是非常不错的学习资源。（全套教程文末领取哈）

👉6.大模型面试题&答案👈

截至目前大模型已经超过200个，在大模型纵横的时代，不仅大模型技术越来越卷，就连大模型相关的岗位和面试也开始越来越卷了。为了让大家更容易上车大模型算法赛道，我总结了大模型常考的面试题。（全套教程文末领取哈）

为什么分享这些资料?

只要你是真心想学AI大模型，我这份资料就可以无偿分享给你学习，我国在这方面的相关人才比较紧缺，大模型行业确实也需要更多的有志之士加入进来，我也真心希望帮助大家学好这门技术，如果日后有什么学习上的问题，欢迎找我交流，有技术上面的问题，我是很愿意去帮助大家的！

这些资料真的有用吗?

这份资料由我和鲁为民博士共同整理，鲁为民博士先后获得了北京清华大学学士和美国加州理工学院博士学位，在包括IEEE Transactions等学术期刊和诸多国际会议上发表了超过50篇学术论文、取得了多项美国和中国发明专利，同时还斩获了吴文俊人工智能科学技术奖。目前我正在和鲁博士共同进行人工智能的研究。

资料内容涵盖了从入门到进阶的各类视频教程和实战项目，无论你是小白还是有些技术基础的，这份资料都绝对能帮助你提升薪资待遇，转行大模型岗位。

CSDN粉丝独家福利

这份完整版的 AI 大模型学习资料已经上传CSDN，朋友们如果需要可以扫描下方二维码&点击下方CSDN官方认证链接免费领取 【保证100%免费】

读者福利： 👉👉CSDN大礼包：《最新AI大模型学习资源包》免费分享 👈👈

（👆👆👆安全链接，放心点击）