x402-dataviz-mcp

Name: x402-dataviz-mcp
Author: liminalpepe

本地服务

github.com/liminalpepe数据与分析013 周前更新

代码仓库

关于 x402-dataviz-mcp

x402-dataviz-mcp 是将结构化数据转换为柱状图、折线图和面积图 SVG 的 MCP 服务，适用于需要图表输出的 Agent 和应用，并支持明暗主题且无需 API 密钥。

主要功能

01渲染柱状图、折线图和面积图
02以 SVG 格式返回图表
03支持明暗主题
04展示多个数据系列

适用场景

01根据结构化数据生成 SVG 图表
02为报告创建主题图表
03可视化多个命名数据系列

MCP 相关

向 MCP 客户端提供 `render_chart` 工具。该工具接收图表类型、结构化数据和可选主题，并返回 SVG 字符串。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "liminalpepe-x402-dataviz": {
      "command": "npx",
      "args": [
        "-y",
        "x402-dataviz-mcp"
      ]
    }
  }
}

启动命令npx -y x402-dataviz-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmx402-dataviz-mcp0.1.0stdio

工具

收录的工具列表 · 更新于 2 周前

参数	类型	必填	说明
data	array	是	非空数据点数组
type	enum	是	图表类型：bar、line 或 areabar \| line \| area
theme	enum	否	可选主题，默认为 "light"light \| dark
title	string	否	可选图表标题

详细介绍

x402-dataviz-mcp

一个免费的 MCP（模型上下文协议）服务，可根据结构化数据绘制柱状图、折线图和面积图，并返回简洁、经过精心设计的 SVG。无需 API 密钥、无需付费，也没有限流把戏——任何 MCP 客户端都可以调用的 MCP 工具。

这是一个付费、受 x402 保护的 HTTP API 的开放漏斗双生版本：

x402-dataviz-poc.theliminalguy.workers.dev — POST /chart，通过 x402 支付协议在 Base 上每次调用支付 0.01 USDC，适用于生产环境／高调用量或非 MCP（纯 HTTP）场景。渲染器相同、输出相同，只是按次计费，而 MCP 调用免费。

为什么要做这个项目

截至撰写本文时，x402 Bazaar 上约有 14,800 个 Agent 可付费 API，但在“结构化数据 → 简洁图表图像”方面完全没有覆盖。这个 MCP 服务是填补这一空白的免费／本地方案——通过 MCP 免费试用；需要大批量使用或在 MCP 客户端之外使用时，则使用付费 HTTP 端点。

功能

一个工具 render_chart，接收图表类型和结构化数据点，并返回渲染后的 SVG 字符串。图表由手工实现（无需无头浏览器、原生二进制文件或大型图表框架）——仅通过字符串构建 SVG，因此速度快，且没有运行时依赖风险。

真正的差异化之处在于设计标准：真实的分类颜色调色板（经过色盲友好性验证，而非凭目测）、经过考量的间距、末端带圆角的细线条、柱条之间 2px 的表面间隙、带环形描边的折线标记、直接标注末端，以及完整的浅色／深色主题支持——而不是通用图表库那种默认的蓝／红／绿配色。

安装与运行

npx x402-dataviz-mcp

或者将其添加到 MCP 客户端配置中（例如 Claude Desktop 的 claude_desktop_config.json）：

{
  "mcpServers": {
    "dataviz": {
      "command": "npx",
      "args": ["-y", "x402-dataviz-mcp"]
    }
  }
}

工具：`render_chart`

输入：

{
  "type": "bar" | "line" | "area",
  "title": "optional string",
  "theme": "light" | "dark",       // defaults to "light"
  "data": [
    { "x": "Q1", "values": { "Revenue": 128000, "Cost": 84000 } },
    { "x": "Q2", "values": { "Revenue": 146500, "Cost": 91200 } }
  ]
}

values 可以包含一个或多个命名数据系列；系列颜色按照固定且经过色盲友好性验证的顺序分配（绝不动态生成或循环使用）。存在 2 个或更多系列时会自动渲染图例；单个系列无需图例（标题已经标明系列名称）。

输出：作为 MCP 工具文本内容的 SVG 字符串，用于渲染请求的图表。

本地开发

npm install
npm run dev      # runs src/index.ts directly on stdio via tsx
npm run build    # compiles to dist/ for the published npm package

何时改用付费 HTTP 双生版本

在以下情况下，请使用付费 Worker 上的 POST /chart，而不是此 MCP 服务：

你从 MCP 客户端之外调用（纯 HTTP，任意语言）。
你需要在生产环境／高调用量场景下使用，并希望按次付费，而不是依赖免费工具长期可用。
你的 Agent 已支持 x402（例如通过 x402-fetch / x402-axios），并且可以为每个请求在 Base 上支付 0.01 USDC。

两种调用方式都会调用完全相同的 renderChart() 函数——输出逐字节相同。