AntV Chart MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

25+ tipos de gráficos cubiertos por un único servidor
Especificación declarativa por gráfico — datos + eje + estilo
Devuelve una URL alojada o una imagen inline que puedes incrustar
Sin clave de API, sin costo de uso — renderización puramente cliente/servidor
Combinación excelente con MCPs de base de datos para reportes con gráficos automáticos

Demo en vivo

Cómo se ve en la práctica

antv-chart.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "antv-chart",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "antv-chart": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@antv/mcp-server-chart"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: AntV Chart

Grafica un resultado de consulta Postgres en un solo prompt

👤 Analistas que quieren una imagen, no un CSV ⏱ ~5 min beginner

Cuándo usarlo: Acabas de ejecutar una consulta; el siguiente paso natural es 'muéstrame esto como un gráfico de barras'.

Requisitos previos

Datos como filas (de cualquier otro MCP o pegados) — Típicamente salida de una consulta de postgres/mongodb/duckdb

Flujo

Elige el tipo de gráfico correcto

Dados estos datos [pega filas con categoría + valor], ¿qué gráfico AntV se ajusta mejor? Opciones: bar, column, pie, line.✓ Copiado

→ Selección justificada (p. ej. 'column — categoría vs valor, ≤20 categorías')
Renderiza

Genera un gráfico de columnas con x=categoría, y=valor, título '<Title>'. Devuelve la URL de la imagen.✓ Copiado

→ URL o imagen en base64
Itera sobre el estilo

El mismo gráfico pero ordena las barras por valor descendente, añade etiquetas de datos, usa un único color (verde azulado).✓ Copiado

→ Imagen de gráfico refinada

Resultado: Una imagen de gráfico lista para reportes en 30 segundos sin tocar una librería de gráficos.

Errores comunes

Demasiadas categorías hace que un gráfico de barras sea ilegible — Limita a los 15 primeros + 'Otros'; usa un treemap o mapa de calor para datos de mayor cardinalidad

Combinar con: postgres · mongodb

Visualiza un embudo de conversión a partir de conteos de eventos

👤 Analistas de crecimiento / producto ⏱ ~15 min intermediate

Cuándo usarlo: Tienes conteos de eventos paso a paso (registro → verificación → primera acción → pago) y necesitas un gráfico de embudo.

Flujo

Obtén conteos de pasos

Desde Postgres: cuenta usuarios distintos en cada paso del embudo en los últimos 30 días, en orden.✓ Copiado

→ Filas de paso + conteo
Renderiza embudo

Genera un gráfico de embudo AntV con esos pasos. Muestra el conteo absoluto y el % de conversión paso a paso.✓ Copiado

→ Imagen de embudo con etiquetas
Compara segmentos

Ahora genera 2 embudos lado a lado: móvil vs escritorio. Los mismos pasos; anota las mayores diferencias en caída.✓ Copiado

→ Visualización de comparación

Resultado: Un visual de embudo listo para pegar con comparación de segmentos.

Errores comunes

Contar eventos no únicos infla los pasos posteriores — Siempre cuenta user_id distinto por paso, no filas de eventos

Combinar con: postgres

Genera un diagrama sankey o de árbol para relaciones

👤 Cualquiera que explique flujos o jerarquías ⏱ ~15 min intermediate

Cuándo usarlo: Quieres mostrar 'tráfico por fuente → landing → conversión' u organigrama.

Flujo

Formatea tus datos

Tengo bordes fuente → destino → valor [pega]. Fórmatalos para un sankey AntV.✓ Copiado

→ Array de bordes normalizados
Renderiza sankey

Genera el sankey con etiquetas de nodo y pesos de enlace. Usa la paleta '3-color'.✓ Copiado

→ Imagen sankey
Alternativa como árbol

Si es jerárquico, renderiza como treemap o árbol de org — mismos datos, diferente tipo de gráfico.✓ Copiado

→ Visualización alternativa

Resultado: La visualización de relaciones correcta para tu historia, al primer intento.

Errores comunes

Sankey con demasiados nodos se vuelve spaghetti — Fusiona fuentes pequeñas en 'Otros'; mantén ≤20 nodos por capa

Combinar con: neo4j

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

antv-chart + postgres

Consulta → gráfico en un prompt para reportes de PM

Consulta registros semanales de los últimos 12 semanas de Postgres, luego genera un gráfico de línea AntV de la tendencia.✓ Copiado

antv-chart + mongodb

Agrega + visualiza datos de documentos

Agrega pedidos por país este trimestre de Mongo, renderiza como gráfico de columnas ordenado desc.✓ Copiado

antv-chart + filesystem

Guarda la imagen generada junto con un markdown de reporte

Renderiza el gráfico de embudo, guarda el PNG en /reports/funnel-<date>.png, e incrusta en /reports/weekly.md.✓ Copiado

antv-chart + notion

Incrusta gráficos en una página de reporte Notion

Genera los tres gráficos de KPI semanales; crea una página Notion con cada URL de gráfico incrustada como bloque de imagen.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	Comparaciones de series de tiempo / categóricas	gratis
generate_pie_chart / generate_donut_chart	data, value, category, title?	Parte del todo cuando ≤6 categorías	gratis
generate_funnel_chart	data: [{step, value}]	Flujos de conversión	gratis
generate_sankey_chart	nodes, links: [{source,target,value}]	Flujo entre categorías	gratis
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	Exploración de correlación o distribución	gratis
generate_radar_chart	data: {dimensions, series}	Comparación multidimensional entre ≤2 entidades	gratis
generate_word_cloud_chart	data: [{word, weight}]	Visualización de frecuencia de texto	gratis
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	Distribuciones y categorías anidadas	gratis

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Sin autenticación; el límite de velocidad práctico depende del backend alojado (~uso interactivo razonable)
Tokens por llamada: Especificación + respuesta: 300–1500 tokens
Monetario: Gratis — se ejecuta localmente vía npx / contra el servicio de renderización público de AntV
Consejo: Mantén puntos de datos bajo algunos cientos por gráfico; envía datos agregados, no eventos sin procesar.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno requerido

Salida de datos: Los datos que pasas en la especificación se envían al servicio de renderización de AntV para producir la URL de la imagen — no envíes PII o datos confidenciales

Cualquier cosa que grafiques a través del endpoint alojado sale de tu red. Para datos sensibles, auto-aloja el renderizador o pre-agrega.

Resolución de problemas

Errores comunes y soluciones

Formato de datos inválido / campo faltante

Cada tipo de gráfico espera una forma específica; vuelve a verificar las entradas de la herramienta — el embudo quiere {step, value}, sankey quiere {source, target, value}.

URL devuelta 404 después de un tiempo

Las URLs alojadas expiran. Guarda la imagen localmente (sistema de archivos) justo después de la generación si necesitas persistencia.

Gráfico ilegible — demasiadas barras/nodos

Agrega a los primeros N + Otros, o cambia el tipo de gráfico (sankey/treemap) más adecuado para cardinalidad.

Alternativas

AntV Chart vs otros

Alternativa	Cuándo usarla	Contrapartida
QuickChart	Quieres gráficos de estilo Chart.js vía URL	Menos tipos de gráficos especializados que AntV
Mermaid MCP	Necesitas diagramas (organigramas, secuencia), no gráficos de datos	No adecuado para visualización de datos numéricos
Vega-Lite MCP	Quieres un enfoque de gramática de gráficos	Especificación más pronunciada; más flexibilidad

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills