Encontrar un gráfico y renderizarlo a SVG con @microcharts/mcp

Para quién

Para quien quiere que un modelo elija un gráfico de tamaño de palabra, aclare el cableado y renderice un SVG terminado con alt text real. El texto oficial dice 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. Página de producto: https://microcharts.dev/

Requisito: esta máquina puede ejecutar npx y añades @microcharts/mcp al cliente con el JSON oficial. Ubicaciones nombradas: claude_desktop_config.json de Claude Desktop, o .cursor/mcp.json de Cursor.

El texto oficial también dice Runs on your machine, stdio server, distributed on npm, Nothing is hosted; no account, no key, no data leaves. Sigue sin ser riesgo cero: el proceso corre aquí y lee la serie que pasas para renderizar. No lo leas como ausencia de frontera de privacidad.

Primer intento en 3 minutos

Usa solo npx -y @microcharts/mcp. La configuración tiene command npx y args -y y @microcharts/mcp. No abras un endpoint alojado.

Requisito: poder escribir uno de esos dos archivos de configuración. La documentación oficial no exige cuenta ni clave.

Lugares de instalación y ejecución: Claude Desktop usa claude_desktop_config.json; Cursor usa .cursor/mcp.json. El nombre del servidor es microcharts.

Una observación de bajo riesgo: primero lee el recurso microcharts://catalog (every chart + metadata). Los extractos oficiales escriben find, get, render como capacidades, sin nombres de función; la primera vez solo lee el recurso de catálogo, no inventes nombres de función.

Señal de éxito: ver el catálogo de gráficos y metadata. La documentación oficial no lista campos de catálogo.

Casos de uso

Caso 1: recorrer el catálogo. Lee microcharts://catalog y confirma qué gráficos de tamaño de palabra hay y su metadata. Solo lectura; no pases datos de serie.

Caso 2: renderizar un SVG terminado. El texto oficial dice Render to a finished, self-contained SVG plus its generated alt text. La serie va en data; otros props incluyen value, target, curve, color, width. Antes de llamar, confirma que esos números son los que quieres dibujar. También hay el recurso microcharts://agent-setup, the prompt for wiring microcharts into a codebase; es un prompt de cableado, no el render en sí.

Límites de uso

El render genera SVG y alt text; la documentación oficial no escribe ruta de guardado ni deshacer. find / get / render no aparecen como nombres de función; no inventes un juego de llamadas.

Entrada oficial: https://github.com/ganapativs/microcharts/tree/main/packages/mcp