安裝
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