掘金 人工智能 14小时前
数据可视化解决方案:MCP Server Chart 的私有化部署实践
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文分享了在内网环境中,基于阿里巴巴开源的@antv/gpt-vis-ssr和MinIO搭建MCP Server Chart图表渲染服务的实践。该方案解决了公司项目无法直接使用阿里提供的图表渲染服务的问题,提供了企业级、私有化的数据可视化解决方案。文章详细介绍了项目架构、技术栈、MinIO的选择原因、部署配置以及接口测试,并提供了详细的部署指南,最终实现了开箱即用的图表渲染服务。

💡 项目背景:由于公司项目部署在内网,无法直接使用MCP Server Chart的图表渲染服务,因此需要搭建私有化的解决方案。

🛠️ 技术选型:项目核心技术栈包括NestJS、@antv/gpt-vis-ssr、MinIO、TypeScript和Swagger/OpenAPI,其中MinIO被选为对象存储服务,因为它具有企业级可靠性、S3兼容性和高性能等优势,并且公司已部署MinIO。

⚙️ 部署配置:通过配置环境变量和.env文件,将mcp-server-chart的请求服务器指向本地部署的实例。提供了两种部署方式:部署MinIO后启动服务,以及使用mcp-swagger-server直接部署。

✅ 效果验证:通过Claude 4生成的测试脚本进行接口测试,所有图表均已成功绘制,证明该方案开箱即用,满足了内网环境下的数据可视化需求。

背景与挑战

MCP Server Chart的图表渲染服务由阿里提供,而公司项目部署在内网,无法使用该服务。我就基于 @antv/gpt-vis-ssr 阿里巴巴开源的服务端图表渲染引擎在内部系统搭建了一套后端服务链接

Github项目地址:github.com/zaizaizhao/…

项目架构概览

核心技术栈

系统架构图

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 是目前最流行的开源对象存储解决方案,具有以下优势:

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-miniomcp-swagger-server一个❤️吧。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

MCP Server Chart AntV MinIO 数据可视化 私有化部署
相关文章