使用说明
本地MCP图表生成系统-
使用模型上下文协议和Docker实现隐私优先的人工智能图表可视化
概述
一个自托管的图表生成系统，使人工智能助手能够在没有外部API依赖关系的情况下本地创建可视化。使用模型上下文协议（MCP）、Docker和Python构建。
主要特点：
- ✅ 25+图表类型（饼图、条形图、折线图、散点图、雷达图等）
- ✅ 100%本地部署-无外部API
- ✅ 用于自定义代理的Python SDK集成
- ✅ Claude AI桌面兼容
- ✅ 以隐私为中心的架构
建筑
┌─────────────────────────────────────┐
│ User / AI Assistant │
│ (Claude Desktop / Python Agent) │
└─────────────┬───────────────────────┘
│
↓
┌─────────────────────────────────────┐
│ MCP Server (stdio protocol) │
│ @antv/mcp-server-chart │
└─────────────┬───────────────────────┘
│ HTTP
↓
┌─────────────────────────────────────┐
│ Docker Container │
│ GPT-Vis-SSR Rendering Service │
│ Port: 3000 │
└─────────────┬───────────────────────┘
│
↓
Chart Image
快速开始
先决条件
- 已安装Docker桌面
- Node.js和npm（适用于npx）
- Python 3.8+（用于Python集成）
步骤1：启动渲染服务
docker run -p 3000:3000 \
-e RENDERED_IMAGE_HOST_PATH=http://localhost:3000/charts \
ghcr.io/yaonyan/gpt-vis-mcp:latest-http
保持此终端运行。
步骤2：配置MCP客户端
对于Claude Desktop：
编辑配置文件：
- 雨衣：
~/Library/Application Support/Claude/claude_desktop_config.json - 窗户：
%APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": ["-y", "@antv/mcp-server-chart"],
"env": {
"VIS_REQUEST_SERVER": "http://localhost:3000/generate"
}
}
}
}
重新启动克劳德桌面。
对于Python：
pip install mcp
步骤3：生成图表！
问克劳德： “制作一个饼图，显示：苹果40%，橙子35%，香蕉25%”
或者使用Python：
python examples/generate_chart.py
Python集成
安装
pip install mcp
示例：生成图表
import asyncio
from mcp import ClientSession, StdioServerParameters
from mcp.client.stdio import stdio_client
async def generate_chart():
server_params = StdioServerParameters(
command="npx",
args=["-y", "@antv/mcp-server-chart"],
env={"VIS_REQUEST_SERVER": "http://localhost:3000/generate"}
)
async with stdio_client(server_params) as (read, write):
async with ClientSession(read, write) as session:
await session.initialize()
result = await session.call_tool(
"generate_pie_chart",
arguments={
"data": [
{"category": "Python", "value": 45},
{"category": "JavaScript", "value": 35},
{"category": "Java", "value": 20}
],
"title": "Programming Languages"
}
)
chart_url = result.content[0].text
print(f"Chart URL: {chart_url}")
return chart_url
asyncio.run(generate_chart())
支持的图表类型
| 图表类型 | 描述 | 用例 |
|---|---|---|
| 饼图 | 比例数据 | 市场份额，百分比 |
| 条形图 | 横向比较 | 类别排名 |
| 列 | 垂直比较 | 时间序列，组 |
| 线条 | 随时间变化的趋势 | 股价、增长 |
| 面积 | 累积趋势 | 随时间变化的总数 |
| 散点 | 相关性 | 数据关系 |
| 雷达 | 多维 | 性能指标 |
| 柱状图 | 分布 | 数据频率 |
| 箱线图 | 统计摘要 | 数据分布 |
| 漏斗 | 工艺阶段 | 转化率 |
| +15更多 |
完整列表：区域、条形图、箱线图、列图、双轴图、鱼骨图、流图、漏斗图、直方图、线图、液体图、思维导图、网络图、组织图、饼图、雷达图、散点图、树状图、venn图、小提琴图、词云图
项目结构
mcp-chart-system/
├── README.md
├── examples/
│ ├── generate_chart.py # Basic Python example
│ ├── advanced_examples.py # Multiple chart types
│ └── generated_charts/ # Sample outputs
├── docker/
│ └── docker-compose.yaml # Alternative deployment
└── docs/
├── architecture.md
└── api-reference.md
🔧 高级配置
自定义端口
docker run -p 8080:3000 \
-e RENDERED_IMAGE_HOST_PATH=http://localhost:8080/charts \
ghcr.io/yaonyan/gpt-vis-mcp:latest-http
更新配置：
{
"env": {
"VIS_REQUEST_SERVER": "http://localhost:8080/generate"
}
}
Docker编写部署
services:
rendering:
image: ghcr.io/yaonyan/gpt-vis-mcp:latest-http
ports:
- "3000:3000"
environment:
- RENDERED_IMAGE_HOST_PATH=http://localhost:3000/charts
测试
测试渲染服务
curl -X POST http://localhost:3000/generate \
-H "Content-Type: application/json" \
-d '{
"type": "pie",
"data": [
{"category": "A", "value": 30},
{"category": "B", "value": 70}
]
}'
预期响应：
{
"success": true,
"resultObj": "http://localhost:3000/charts/chart_xxxxx.png"
}
技术栈
- 集装箱化： 码头工人
- MCP服务器： @antv/mcp服务器图表（Node.js）
- 致使： GPT-Vis SSR（AntV可视化库）
- Python SDK： mcp（异步/等待）
- 协议： 模型上下文协议（MCP）
- API REST（HTTP/JSON）
📈 演出
- 图表生成： <2秒
- 内存使用情况： ~200MB（Docker容器）
- 并发请求： 支持多代同时运行
- 输出格式： PNG图像
隐私和安全
- ✅ 100%本地处理
- ✅ 没有外部API调用
- ✅ 未向第三方发送数据
- ✅ 自托管渲染
- ✅ 开源组件
