MCP

用 @microcharts/mcp 找图并渲成 SVG

适合先读 microcharts://catalog 再按 data/props 渲染带 alt text 的 SVG,前提是用 npx -y @microcharts/mcp;官方称本机 stdio、无托管账号,但仍会处理你提供的系列数据。

官方来源 · @microcharts/mcp

安装

npx -y @microcharts/mcp

适合谁

面向要让模型挑选字号图、弄清接入方式、并渲染成带真实 alt text 的 SVG 的人。官方写明 An MCP server and Vercel AI-SDK toolset for microcharts — let a model find the right word-sized chart, get exactly how to wire it, and render it to a finished SVG with real alt text。产品页: https://microcharts.dev/

前置:本机可用 npx,按官方 JSON 把 @microcharts/mcp 加到客户端。点名位置是 Claude Desktop 的 claude_desktop_config.json,或 Cursor 的 .cursor/mcp.json。

官方还写 Runs on your machine,stdio server, distributed on npm,Nothing is hosted; no account, no key, no data leaves。这仍不是零风险:进程在本机运行,并会读取你传入的系列数据来渲染。不要把它理解成没有隐私边界。

3 分钟完成第一次尝试

只走 npx -y @microcharts/mcp。配置是 command 为 npx,args 为 -y 与 @microcharts/mcp。不要另开托管端点。

前置:能写上述两个配置文件之一。官方说明不要求账号或密钥。

安装与运行位置:Claude Desktop 用 claude_desktop_config.json,Cursor 用 .cursor/mcp.json。服务器名是 microcharts。

一次低风险观察:先读资源 microcharts://catalog(every chart + metadata)。官方摘录把 find、get、render 写成能力,没有给出工具函数名,因此第一次只读目录资源,不要虚构函数名。

成功信号:看到图表目录及 metadata。官方说明没有列出目录字段。

使用案例

案例一:浏览目录。读取 microcharts://catalog,确认有哪些字号图及其 metadata。只读,不要传入系列数据。

案例二:渲染成品 SVG。官方写明 Render to a finished, self-contained SVG plus its generated alt text。系列放在 data,其他 props 包括 value、target、curve、color、width。调用前确认这些数据就是你要画的数。另有资源 microcharts://agent-setup,是 the prompt for wiring microcharts into a codebase;那是接入提示,不是渲染本身。

使用边界

渲染会生成 SVG 与 alt text,官方说明没有写出保存路径或撤销。find / get / render 没有作为函数名出现,不要自行补一套调用名。

官方入口: https://github.com/ganapativs/microcharts/tree/main/packages/mcp