背景与挑战
MCP Server Chart的图表渲染服务由阿里提供,而公司项目部署在内网,无法使用该服务。我就基于 @antv/gpt-vis-ssr 阿里巴巴开源的服务端图表渲染引擎在内部系统搭建了一套后端服务链接。
Github项目地址:github.com/zaizaizhao/…
项目架构概览
核心技术栈
- NestJS:企业级 Node.js 框架,提供强大的模块化和依赖注入@antv/gpt-vis-ssr:阿里巴巴开源的服务端图表渲染引擎MinIO:高性能对象存储,AWS S3 兼容TypeScript:类型安全的开发体验Swagger/OpenAPI:完整的API文档和测试界面
系统架构图
graph TDA[前端ai client应用] --> B[MCP Server Chart MiniO]B --> C[MinIO 对象存储] %% 前端应用模块A1[数据请求] --> AA2[图表展示] --> AA3[用户交互] --> A %% MCP Server 核心功能B --> B3[类型转换服务]B --> B4[API 文档<br/>Swagger/OpenAPI] %% MinIO 存储功能C --> C1[图片文件存储]C --> C2[预签名URL生成]C --> C3[访问权限控制]C --> C4[S3兼容接口] %% 数据流向A -.->|HTTP POST| BB -.->|图片上传| CC -.->|返回URL| BB -.->|响应JSON| A %% 样式定义 classDef frontend fill:#e1f5fe,stroke:#01579b,stroke-width:2px classDef backend fill:#f3e5f5,stroke:#4a148c,stroke-width:2px classDef storage fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px classDef process fill:#fff3e0,stroke:#e65100,stroke-width:2px class A,A1,A2,A3 frontend class B,B1,B2,B3,B4 backend class C,C1,C2,C3,C4 storage
为什么选择 MinIO?
1. 企业级可靠性
MinIO 是目前最流行的开源对象存储解决方案,具有以下优势:
- 高可用性:支持分布式部署,99.9999999999% (12个9) 的数据持久性S3 兼容:完整的 Amazon S3 API 兼容性,无缝迁移高性能:针对现代硬件优化,支持 NVMe 和 SSD最重要的优势是:公司本来就部署了minio作为分布式存储服务
2. 私有化部署友好
# 一键启动 MinIO 服务docker run -d \ -p 9000:9000 \ -p 9001:9001 \ --name minio \ -v minio-data:/data \ -e "MINIO_ROOT_USER=admin" \ -e "MINIO_ROOT_PASSWORD=password123" \ minio/minio server /data --console-address ":9001"
与 MCP Server Chart 的集成
通过查看原始 mcp-server-chart 源码配置
我们发现,我们需要配置VIS_REQUEST_SERVER
属性
import process from "node:process";/** * Get the VIS_REQUEST_SERVER from environment variables. */export function getVisRequestServer() { return ( process.env.VIS_REQUEST_SERVER || "https://antv-studio.alipay.com/api/gpt-vis" );}/** * Get the `SERVICE_ID` from environment variables. */export function getServiceIdentifier() { return process.env.SERVICE_ID;}
私有化部署配置
将 mcp-server-chart
的请求服务器指向本地部署的实例:
- 通过
.env
文件配置VIS_REQUEST_SERVER = http://localhost:5000/api/chart/render
2. 设置环境变量
# 设置环境变量export VIS_REQUEST_SERVER="http://localhost:5000/api/chart/render"
效果
部署指南
部署方式1. 部署minio后启动服务
# 安装依赖npm install# 开发模式npm run start:dev# 生产模式npm run buildnpm run start:prod
启动服务后将生成的接口地址用于mcp-server-chart
部署方式2. 使用mcp-swagger-server直接部署,不需要使用mcp-server-chart
mcp-swagger-server是一个基于open api协议转化现有接口为mcp接口规范的cli工具。考虑到ai能力,这边在mcp-server-chart-minio重新定义了各个图表的接口分别转化为mcp 接口。
使用方式
- 安装cli工具并查看使用规范
npm i mcp-swagger-server -gmcp-swagger-server --help
- 启动mcp-server-chart-minio项目
- 使用cli工具进行opneapi规范->mcp转化
mcp-swagger-server -t streamable -p 3322 -o http://localhost:5000/api/docs-json
- mcp client配置
测试接口
通过claude 4生成的测试脚本进行接口测试,已经全部通过所有图表的绘制,开箱即用
结论
MCP Server Chart MinIO 提供了一个完整的私有化数据可视化解决方案。如果您觉得有用,请给mcp-server-chart-minio 和mcp-swagger-server一个❤️吧。