数据可视化解决方案：MCP Server Chart 的私有化部署实践

zaizaizhao
1,433 阅读3分钟

背景与挑战

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 TD
A[前端ai client应用] --> B[MCP Server Chart MiniO]
B --> C[MinIO 对象存储]
        
%% 前端应用模块
A1[数据请求] --> A
A2[图表展示] --> A
A3[用户交互] --> 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| B
B -.->|图片上传| C
C -.->|返回URL| B
B -.->|响应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 的请求服务器指向本地部署的实例：

  1. 通过.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 build
npm 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 接口。

使用方式

  1. 安装cli工具并查看使用规范
npm i mcp-swagger-server -g
mcp-swagger-server --help

  1. 启动mcp-server-chart-minio项目

  1. 使用cli工具进行opneapi规范->mcp转化
mcp-swagger-server -t streamable -p 3322 -o http://localhost:5000/api/docs-json

  1. mcp client配置

测试接口

通过claude 4生成的测试脚本进行接口测试，已经全部通过所有图表的绘制，开箱即用

结论

MCP Server Chart MinIO 提供了一个完整的私有化数据可视化解决方案。如果您觉得有用，请给mcp-server-chart-minio 和mcp-swagger-server一个❤️吧。

avatar
文章
阅读
粉丝