microcharts

@microcharts/mcp

一个用于 microcharts 的 MCP 服务和 Vercel AI-SDK 工具集——让模型能够找到合适的词级图表，获取准确的接入方法，并将其渲染为带有真实替代文本的完整 SVG。

microcharts 的设计初衷是让模型能够 编写 图表。模型 调用 图表的方式如下：不是“输出一些语法，然后寄希望于客户端进行渲染”，而是通过工具调用返回库生成的真实静态 SVG，其 describeSeries 生成的可访问名称也会随之附上，确保内容准确无误。

• 在你的机器上运行。 通过 stdio 运行的服务，发布在 npm 上。没有托管服务；无需账户或密钥，数据也不会离开本机。
• 随处可用。 渲染工具返回自包含的 SVG，因此即使聊天界面无法运行 React，也能显示真实图表。
• 零配置。 npx @microcharts/mcp——此软件包内置了 @microcharts/react 的副本。

安装

将其添加到任何 MCP 客户端。对于 Claude Desktop（claude_desktop_config.json）或 Cursor（.cursor/mcp.json）：

{
  "mcpServers": {
    "microcharts": {
      "command": "npx",
      "args": ["-y", "@microcharts/mcp"]
    }
  }
}

就这么简单——客户端会按需通过 stdio 启动服务。

工具

find_microchart(question, dataShape?)

根据自然语言问题为目录中的图表排序。知道问题但还不知道该用哪种图表时，从这里开始。

find_microchart({ question: "is it trending?" })
→ [{ slug: "sparkline", name: "Sparkline", why: "inline trend", dataShape: "number[]" }, …]

get_microchart(slug)

提供接入单个图表所需的一切：导入路径、该图表的属性和共享属性、数据形状、适用与不适用场景的建议、可直接复制运行的示例，以及 sample——同一示例的 JSON 属性，可直接传给 render_microchart。

get_microchart({ slug: "bullet" })
→ {
    staticImport: "@microcharts/react/bullet",
    props: [...],
    example: { code: "<Bullet value={72} target={80} bands={[50, 90]} title=\"Quota\" />" },
    sample: { value: 72, target: 80, bands: [50, 90], title: "Quota" },
    …
  }

每种图表都有自己的数据形状——火花线图使用 number[]，点图使用 { label, value }[]，OHLC 图使用 { open, high, low, close }[]——因此 sample 是从“该选哪种图表”到“成功渲染”的最短路径。

render_microchart(type, data?, props?, format?)

渲染为完整、自包含的 SVG，并附上生成的替代文本。将序列传入 data；其他属性（value、target、curve、color、width）放在 props 中。

render_microchart({ type: "sparkline", data: [132, 148, 141, 165, 159, 182] })
→ {
    svg: "<svg …><style>…</style>…</svg>",
    summary: "Trending up 38%. Range 132 to 182. Last value 182.",
    mimeType: "image/svg+xml", width: 80, height: 20
  }

format 可以是 "svg"（默认值，内嵌样式——可用于任何界面）或 "bare"（不含 CSS，适用于已加载 @microcharts/react/styles.css 的页面）。

缺少数据或数据形状错误时，系统会直接指出图表名称，而不是将问题传给 React；因此调用方会收到 "dot-plot" needs \data`. Data shape: { label, value }[]. Call get_microchart("dot-plot") for a ready-to-render sample.`，而不是堆栈跟踪。过大的负载也会被拒绝——microchart 是词级标记。

它还提供两个资源：microcharts://catalog（所有图表及其元数据）和 microcharts://agent-setup（用于将 microcharts 接入代码库的提示词）。

在 Vercel AI SDK 中使用

相同的三项功能也以 AI-SDK 工具的形式提供（位于 /ai-sdk 子路径，因此核心部分不会引入 ai）：

import { microchartsTools } from "@microcharts/mcp/ai-sdk";
import { streamText } from "ai";

const result = streamText({
  model,
  tools: microchartsTools,
  prompt: "Summarise this quarter and show the revenue trend as a chart.",
});

这些函数也可直接导出——findChart、getChart、renderChart——如果你想在不使用工具包装器的情况下调用它们。

版本管理

此服务会打包图表目录，并使用 @microcharts/react（作为普通依赖项安装）进行渲染。服务版本与自身变更同步；系统会自动引入兼容的库版本。对应快照所基于的库版本可在 microcharts://catalog 资源中查看。

链接

• 文档：https://microcharts.dev/docs/mcp
• 库：@microcharts/react
• 源码：https://github.com/ganapativs/microcharts/tree/main/packages/mcp

MIT