Flint MCP Server
Provides tools for compiling chart specifications into Chart.js configurations and rendering them server-side to PNG.
Supports storing rendered chart artifacts in MinIO (S3-compatible object storage) with signed URL delivery.
Provides tools for compiling chart specifications into Plotly specs for use in Plotly-based visualizations.
Provides tools for compiling chart specifications into Vega-Lite/Vega specs and rendering them server-side to SVG.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Flint MCP Serverrender a bar chart of revenue by region as a PNG with the economist theme"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Flint 后端(NestJS)
Flint 后端把一份语义化图表描述(ChartAssemblyInput)编译成 5 种图表库的原生 spec,
并把其中 3 种在服务端无头渲染成 SVG / PNG,通过 REST 和 MCP 两条通道交付给
前端页面与 Agent 平台。
一句话:输入是"画什么"(数据 + 语义 + 图表意图),输出是"能直接看的图"或"可交付的产物链接"。

图与可编辑源文件都在本目录
docs/(系统拓扑 / 编译时序 / 编译管线 / 模块地图)。
能力一览
能力 | 说明 |
编译 | 5 个后端: |
服务端渲染 |
|
主题 | 10 套预设(nyt / economist / swiss / nature / mckinsey / datawrapper / powerbi / powerbi-light / pop / cartoon) |
产物交付 | 内联返回 或 产物 URL;存储支持本地磁盘( |
MCP | Streamable HTTP,5 个工具 + 3 个资源 + 2 个提示词,可直接接入 QwenPaw / Claude 等平台 |
配置 |
|
Related MCP server: Viz MCP Server
快速开始
前置:Node.js ≥ 18(验证版本 22.x)。
cd backend
npm install
# 仓库里已带一份可用的 .env;也可从样例复制
cp .env.example .env
# 开发模式(watch)
npm run start:dev
# 生产模式
npm run build && npm run start:prod启动后:
REST:
http://localhost:3000/apiMCP(Streamable HTTP):
http://localhost:3000/mcp健康检查:
curl http://localhost:3000/api/health
启动日志会打印当前生效的交付配置,便于确认 .env 是否被读取:
Flint backend listening on http://localhost:3000/api
MCP (Streamable HTTP) endpoint: http://localhost:3000/mcp
Artifact delivery: url | store: fs(./output/artifacts) | ttl: 604800s | auth: off配置(.env)
由 @nestjs/config 加载,优先级:shell 环境变量 > .env.local > .env。
变量 | 默认 | 说明 |
|
| 服务端口 |
|
| 存储类型: |
|
| fs 模式的产物目录 |
|
|
|
|
| 产物有效期(秒),默认 7 天 |
|
| 单产物上限(16MiB) |
| 空 | 对外 HTTPS 域名;反向代理/隧道部署时必填,否则用请求头推导 |
| 空 | 填写后 |
| 空 |
|
| 空 | 对象存储凭证 |
|
| MinIO / 阿里云 OSS 保持 true |
|
| 对象 key 前缀 |
完整样例见 .env.example。s3 配置缺失会在启动时直接报错。
HTTP 接口
所有 REST 路由挂在全局前缀 /api 下;/mcp 不走该前缀。
方法 | 路径 | 说明 |
GET |
| 健康检查 |
POST |
|
|
POST |
|
|
GET |
| 取产物(Bearer 或 |
GET |
| 模板注册表(支持矩阵) |
GET |
| 主题清单(含 |
POST |
| MCP Streamable HTTP(无状态,JSON-RPC over HTTP) |
后端命名两套写法都接受:vegalite / vega-lite、chartjs / chart.js。

渲染示例
# 1) 交付一个可下载的产物(默认 delivery=url)
curl -X POST http://localhost:3000/api/flint/render \
-H 'content-type: application/json' \
-d '{
"backend": "echarts",
"format": "png",
"input": {
"data": { "values": [{ "region": "华北", "revenue": 1284 }, { "region": "华东", "revenue": 976 }] },
"semantic_types": { "region": "Category", "revenue": "Quantity" },
"chart_spec": {
"chartType": "Bar Chart",
"title": "各区域收入对比",
"encodings": { "x": { "field": "region" }, "y": { "field": "revenue" } },
"baseSize": { "width": 480, "height": 300 }
},
"theme_spec": "economist"
}
}'
# → {"artifactId":"20260911-...","url":"http://localhost:3000/api/flint/artifacts/...?exp=...&sig=...",...}
# 2) 直接拿二进制(delivery=inline)
curl -X POST http://localhost:3000/api/flint/render \
-H 'content-type: application/json' -o chart.svg \
-d '{"backend":"vegalite","format":"svg","delivery":"inline","input":{...}}'MCP 接入
服务端内置 MCP Server(Streamable HTTP,无状态):每次 POST 新建实例, 不持有会话,天然可横向扩展。
工具 | 作用 |
| 编译 + 渲染; |
| 只编译,返回后端原生 spec + warnings |
| 只校验,返回 valid / warnings / errors |
| 列出模板与编码通道 |
| 列出主题与适用后端 |
资源:flint://agent-skill(图表编写规范)、flint://theme-skill(主题规范)、
flint://artifacts/{id}(按 id 读回产物)。提示词:author_flint_chart、author_flint_theme。
以 QwenPaw 为例(智能体 → MCP → 新建):
{
"mcpServers": {
"flint": {
"transport": "streamable_http",
"url": "http://localhost:3000/mcp"
}
}
}平台在别的机器时把 url 换成可访问的地址;若配置了 FLINT_MCP_AUTH_TOKEN,
客户端需要带 Authorization: Bearer <token>。
渲染管线

校验:数据必须是内联
data.values(HTTP 服务不读服务器本地文件)、 行数 ≤ 10 万、单元格必须是标量、baseSize/canvasSize必须是 1–4000 的数字。规范化:Waterfall 的
total/合计自动归一化为end; 非 vegalite 后端收到theme_spec会做主题映射,无法解析则返回theme-unknownwarning。编译:调用
flint-chart的assemble*(),拆出_warnings/_width/_height。补齐:ECharts / Chart.js 原本丢弃
title/subtitle,这里注入option.title与options.plugins.title。渲染:Vega-Lite→Vega→SVG;ECharts SSR→SVG;Chart.js→PNG。
baseSize作为画布目标下限;输出与 PNG 倍率受 4000px 上限约束 (越界返回output-clamped/scale-clampedwarning)。交付:写入 artifact 服务(fs 或 s3),返回摘要 + 可下载 URL。
字体:assets/fonts 内置 Liberation Sans(与 Arial 度量一致)与 DejaVu,
中文按系统字体回退;文本测量用 @napi-rs/canvas,保证 SVG/PNG 与浏览器一致。
主题映射范围
后端 | 主题支持 |
| 完整(布局 + 视觉,由 Flint 组装器实现) |
| 视觉 token:系列调色板、画布背景、文字/网格/轴颜色、字体 |
主题 token 从 Flint 的 ThemeSpec 的 ink / type 中解析,
支持预设 id、{ extends, ...覆盖 } 与完全自定义三种写法。

完整图册(3 后端 × 10 主题)见 ../examples/theme-gallery/index.html, 重新生成:
node scripts/generate-theme-gallery.js。
目录结构

src/
├── main.ts # 入口:全局前缀 /api、CORS、body 限制、挂载 /mcp、启动日志
├── app.module.ts # 根模块;ConfigModule 自动加载 .env
├── health.controller.ts # GET /api/health
├── flint/
│ ├── flint.controller.ts # 编译 / 模板 / 主题 路由
│ ├── render.controller.ts # 渲染 / 产物下载 路由(挂载在 /api/flint)
│ ├── flint.service.ts # 编译与渲染的业务入口(薄封装)
│ ├── flint.types.ts # FlintBackend 定义与别名归一化
│ ├── dto/ # class-validator 请求体校验
│ ├── render/
│ │ ├── render-core.ts # 三个后端的无头渲染 + 尺寸/背景处理
│ │ ├── flint-assemble.ts # 校验、编译、Waterfall/主题/标题规范化
│ │ ├── render.types.ts # 后端枚举与安全上限
│ │ ├── theme.tokens.ts # ThemeSpec → 设计 token
│ │ ├── theme-map.ts # token → ECharts / Chart.js 注入
│ │ ├── render-fonts.ts # 字体注册与 Vega 文本测量
│ │ └── esm-loader.ts # 在 CJS 运行时加载 ESM 包(vega/vega-lite)
│ └── artifacts/
│ ├── artifact.service.ts # 产物读写、id、过期、签名 URL
│ ├── artifact.store.ts # fs / s3 两种存储适配器
│ ├── artifact.config.ts # 环境变量解析
│ ├── artifact.types.ts # 存储接口类型
│ └── public-url.ts # 从请求头推导对外 base URL
├── mcp/
│ ├── mcp-http.ts # Express Router 挂载 /mcp(stateless Streamable HTTP)
│ ├── mcp-server.ts # 工具 / 资源 / 提示词注册
│ ├── mcp-schemas.ts # 工具入参 zod schema(拍平的 ChartAssemblyInput)
│ └── mcp-constants.ts # /mcp 路径与 body 上限
assets/
├── fonts/ # Liberation / DejaVu 字体
└── skills/ # agent 编写图表/主题的规范(MCP 资源)
skill-flint-chart/ # 可选的 agent skill(让 agent 把图直接贴进回复)
scripts/generate-theme-gallery.js # 生成 3 后端 × 10 主题对比图册
docs/
├── images/ # README 用图:4 张架构图 + 主题对比图
└── diagrams/ # 架构图的可编辑 HTML 源文件与截图脚本常用命令
命令 | 说明 |
| 开发模式(watch) |
| 编译到 |
| 运行构建产物 |
| 类型检查 |
| 生成主题对比图册 → |
仓库级脚本(在仓库根执行):
命令 | 说明 |
| 生成 Windows x64 离线部署包(含依赖体检) |
| 只体检某个目录的平台二进制/符号链接 |
验收自检
curl http://localhost:3000/api/health
# 原生模块可加载(渲染依赖)
node -e "require('@napi-rs/canvas'); console.log('canvas ok')"
node -e "require('@resvg/resvg-js'); console.log('resvg ok')"
# 编译(五后端)
curl -s -X POST http://localhost:3000/api/flint/compile \
-H 'content-type: application/json' \
-d '{"backend":"vega-lite","input":{"data":{"values":[{"c":"A","v":1}]},"semantic_types":{"c":"Category","v":"Quantity"},"chart_spec":{"chartType":"Bar Chart","encodings":{"x":{"field":"c"},"y":{"field":"v"}}}}}' | head -c 200
# 渲染 + 产物下载
curl -s -X POST http://localhost:3000/api/flint/render \
-H 'content-type: application/json' \
-d '{"backend":"chartjs","format":"png","input":{"data":{"values":[{"c":"A","v":1},{"c":"B","v":2}]},"semantic_types":{"c":"Category","v":"Quantity"},"chart_spec":{"chartType":"Bar Chart","encodings":{"x":{"field":"c"},"y":{"field":"v"}}}}}'
# MCP 工具面
curl -s -X POST http://localhost:3000/mcp \
-H 'content-type: application/json' -H 'accept: application/json, text/event-stream' \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'部署
单机 / 生产
npm run build && npm run start:prod反向代理需透传
x-forwarded-proto/x-forwarded-host,否则产物 URL 会指向内网地址;生产建议配置
FLINT_PUBLIC_BASE_URL(HTTPS)与FLINT_MCP_AUTH_TOKEN;多副本部署请把
FLINT_ARTIFACT_STORE设为s3,不要依赖本地磁盘。
常见问题
现象 | 原因 / 处理 |
| 配置在进程启动时读取,改完需重启后端 |
| 配置了 |
产物链接 401 / 404 | 签名过期或产物已过 TTL;重新渲染即可 |
| 依赖不完整或是别的平台版本;重新 |
| 同上,缺 |
启动报 | 端口被占用,改 |
| 检查是否传了未知主题(会返回 |
Waterfall 合计柱浮高 | 用 |
已知边界
服务端渲染仅支持
vegalite/echarts/chartjs;plotly/excel只能编译,需要在客户端/Excel 侧渲染;chartjs没有 SVG 输出,只能 PNG;ECharts 的 SVG 每次渲染带随机类名(字节不确定),PNG 是确定的;
主题只映射视觉 token,布局/几何仍由各后端自己的布局引擎决定。
接入qwenpaw


This server cannot be deployed
Maintenance
Related MCP Connectors
Create, inspect, manage, and render charts and data visualizations as SVG/PNG or interactive embeds.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Generate production-ready chart code (Recharts, Chart.js, ECharts, Plotly) from a prompt.
Renders interactive Chart.js charts and dashboards inline in AI conversations. Supports bar, line, area, pie, doughnut, scatter, and radar charts with multi-chart dashboard grids.
Related MCP Servers
- AlicenseAqualityDmaintenanceEnables AI agents to generate and render charts as PNG, SVG, or WebP images directly in chat interfaces. Supports Chart.js specifications and natural language descriptions for creating visualizations from data.34 npm1MIT
- AlicenseAqualityCmaintenanceEnables AI agents to create data visualizations like bar charts, line charts, pie charts, scatter plots, and histograms, returning inline SVG or PNG files.5MIT
- AlicenseNot gradedqualityNot gradedmaintenanceEnables AI agents to generate beautiful, presentation-ready charts (SVG + PNG) with zero setup, supporting various chart types and styling options.25 npmMIT
- AlicenseBqualityDmaintenanceEnables AI agents to render branded charts as inline images and persistent hosted URLs, supporting explicit chart types and automatic chart suggestion from data.243 npmMIT