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