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

Por que usar

Principais recursos

25+ tipos de gráficos cobertos por um único servidor
Especificação declarativa por gráfico — dados + eixo + estilo
Retorna uma URL hospedada ou imagem inline que você pode incorporar
Nenhuma chave de API, nenhum custo de uso — renderização puramente cliente/servidor
Ótimo emparelhamento com MCPs de banco de dados para relatórios com gráficos automáticos

Demo ao vivo

Como fica na prática

antv-chart.replay ▶ pronto

0/0

Instalar

Escolha seu 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"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: AntV Chart

Crie um gráfico de um resultado de consulta do Postgres em um prompt

👤 Analistas que querem uma imagem, não um CSV ⏱ ~5 min beginner

Quando usar: Você acabou de executar uma consulta; o próximo passo natural é 'mostre-me isso como um gráfico de barras'.

Pré-requisitos

Dados como linhas (de qualquer outro MCP ou colados) — Geralmente saída de uma consulta postgres/mongodb/duckdb

Fluxo

Escolha o tipo de gráfico correto

Dados estes dados [colar linhas com categoria + valor], qual gráfico AntV se encaixa melhor? Opções: barra, coluna, pizza, linha.✓ Copiado

→ Escolha justificada (por exemplo, 'coluna — categoria vs valor, ≤20 categorias')
Renderizar

Gere um gráfico de coluna com x=categoria, y=valor, título '<Title>'. Retorne a URL da imagem.✓ Copiado

→ URL ou imagem base64
Iterar no estilo

Mesmo gráfico, mas classifique as barras por valor desc, adicione rótulos de dados, use uma única cor (verde-azulado).✓ Copiado

→ Imagem de gráfico refinada

Resultado: Uma imagem de gráfico pronta para relatório em 30 segundos sem tocar uma biblioteca de gráficos.

Armadilhas

Muitas categorias tornam um gráfico de barras ilegível — Limite aos 15 principais + 'Outro'; use um treemap ou mapa de calor para dados de cardinalidade mais alta

Combine com: postgres · mongodb

Visualize um funil de conversão a partir de contagens de eventos

👤 Analistas de crescimento / produto ⏱ ~15 min intermediate

Quando usar: Você tem contagens de eventos passo a passo (cadastro → verificar → primeira ação → pago) e precisa de um gráfico de funil.

Fluxo

Obtenha contagens de etapas

Do Postgres: conte usuários distintos em cada etapa do funil nos últimos 30 dias, em ordem.✓ Copiado

→ Etapa + linhas de contagem
Renderizar funil

Gere um gráfico de funil AntV com essas etapas. Mostre a contagem absoluta e a % de conversão de etapa para etapa.✓ Copiado

→ Imagem de funil com rótulos
Comparar segmentos

Agora gere 2 funis lado a lado: mobile vs desktop. Mesmas etapas; anote as maiores diferenças de abandono.✓ Copiado

→ Visualização de comparação

Resultado: Um visual de funil pronto para colar com comparação de segmentos.

Armadilhas

Contar eventos não únicos infla as etapas posteriores — Sempre conte user_id distinto por etapa, não linhas de eventos

Combine com: postgres

Gere um diagrama sankey ou de árvore para relacionamentos

👤 Qualquer pessoa explicando fluxos ou hierarquias ⏱ ~15 min intermediate

Quando usar: Você deseja mostrar 'tráfego por origem → destino → conversão' ou um organograma.

Fluxo

Formatar seus dados

Tenho arestas de origem → destino → valor [colar]. Formate-as para um sankey AntV.✓ Copiado

→ Matriz de arestas normalizada
Renderizar sankey

Gere o sankey com rótulos de nó e pesos de link. Use a paleta '3-color'.✓ Copiado

→ Imagem sankey
Alternativa como árvore

Se hierárquico em vez disso, renderize como um treemap ou árvore org — mesmos dados, tipo de gráfico diferente.✓ Copiado

→ Visualização alternativa

Resultado: A visualização de relacionamento correta para sua história, na primeira tentativa.

Armadilhas

Sankey com muitos nós fica um espaguete — Mescle pequenas fontes em 'Outro'; mantenha ≤20 nós por camada

Combine com: neo4j

Combinações

Combine com outros MCPs para 10× de alavancagem

antv-chart + postgres

Consulta → gráfico em um prompt para relatórios de PM

Consulte inscrições semanais para as últimas 12 semanas do Postgres, então gere um gráfico de linha AntV da tendência.✓ Copiado

antv-chart + mongodb

Agregar + visualizar dados de doc

Agregue pedidos por país este trimestre do Mongo, renderize como um gráfico de coluna classificado em desc.✓ Copiado

antv-chart + filesystem

Salve a imagem gerada ao lado de um markdown de relatório

Renderize o gráfico de funil, salve o PNG em /reports/funnel-<date>.png e incorpore em /reports/weekly.md.✓ Copiado

antv-chart + notion

Incorpore gráficos em uma página de relatório Notion

Gere os três gráficos de KPI semanais; crie uma página Notion com cada URL de gráfico incorporada como um bloco de imagem.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	Comparações de séries temporais / categorias	free
generate_pie_chart / generate_donut_chart	data, value, category, title?	Parte do todo quando ≤6 categorias	free
generate_funnel_chart	data: [{step, value}]	Fluxos de conversão	free
generate_sankey_chart	nodes, links: [{source,target,value}]	Fluxo entre categorias	free
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	Exploração de correlação ou distribuição	free
generate_radar_chart	data: {dimensions, series}	Comparação multidimensional em ≤2 entidades	free
generate_word_cloud_chart	data: [{word, weight}]	Visualização de frequência de texto	free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	Distribuições e categorias aninhadas	free

Custo e limites

O que custa rodar

Cota de API: Sem auth; limite de taxa prático depende do backend hospedado (~uso interativo razoável)
Tokens por chamada: Spec + resposta: 300–1500 tokens
Monetário: Gratuito — executa localmente via npx / contra o serviço público de renderização da AntV
Dica: Mantenha pontos de dados com menos de algumas centenas por gráfico; envie dados agregados, não eventos brutos.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum necessário

Saída de dados: Dados que você passa na especificação são enviados para o serviço de renderização da AntV para produzir a URL da imagem — não envie PII ou dados confidenciais

Qualquer coisa que você chartar via o endpoint hospedado deixa sua rede. Para dados sensíveis, hospede automaticamente o renderizador ou pré-agregue.

Solução de problemas

Erros comuns e correções

Formato de dados inválido / campo ausente

Cada tipo de gráfico espera uma forma específica; revise os inputs da ferramenta — funil quer {step, value}, sankey quer {source, target, value}.

URL 404 retornada após um tempo

URLs hospedadas expiram. Salve a imagem localmente (filesystem) logo após a geração se você precisar de persistência.

Gráfico ilegível — muitas barras/nós

Agregue aos N principais + Outro, ou mude o tipo de gráfico (sankey/treemap) mais adequado à cardinalidade.

Alternativas

AntV Chart vs. outros

Alternativa	Quando usar	Troca
QuickChart	Você quer gráficos estilo Chart.js via URL	Menos tipos de gráficos de nicho do que AntV
Mermaid MCP	Você precisa de diagramas (fluxogramas, sequência), não gráficos de dados	Não adequado para visualização de dados numéricos
Vega-Lite MCP	Você quer uma abordagem de gramática de gráficos	Especificação mais íngreme; mais flexibilidade

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills