AntV Chart MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

25+ types de graphiques couverts par un seul serveur
Spécification déclarative par graphique — données + axe + style
Retourne une URL hébergée ou une image en ligne que vous pouvez intégrer
Pas de clé API, pas de coût d'utilisation — rendu purement client/serveur
Excellent appairage avec les MCP de base de données pour les rapports graphiques automatisés

Démo en direct

Aperçu en pratique

antv-chart.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/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"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : AntV Chart

Tracer un résultat de requête Postgres en une seule demande

👤 Les analystes qui veulent une image, pas un CSV ⏱ ~5 min beginner

Quand l'utiliser : Vous venez d'exécuter une requête ; l'étape naturelle suivante est « montrez-moi cela sous forme de graphique en barres ».

Prérequis

Données sous forme de lignes (provenant d'un autre MCP ou collées) — Généralement sortie d'une requête postgres/mongodb/duckdb

Déroulement

Choisir le bon type de graphique

Étant donné ces données [collez les lignes avec catégorie + valeur], quel graphique AntV convient le mieux ? Options : barre, colonne, camembert, ligne.✓ Copié

→ Choix justifié (par ex. « colonne — catégorie vs valeur, ≤20 catégories »)
Rendu

Générer un graphique en colonnes avec x=catégorie, y=valeur, titre « <Titre> ». Retourner l'URL de l'image.✓ Copié

→ URL ou image base64
Itérer sur le style

Même graphique mais triez les barres par valeur desc, ajoutez des étiquettes de données, utilisez une seule couleur (bleu-vert).✓ Copié

→ Image graphique affinée

Résultat : Une image graphique prête pour le rapport en 30 secondes sans toucher à une bibliothèque de traçage.

Pièges

Trop de catégories rend un graphique en barres illisible — Limiter à top 15 + « Autre » ; utilisez une treemap ou une heatmap pour les données de cardinalité plus élevée

Combiner avec : postgres · mongodb

Visualiser un entonnoir de conversion à partir des décomptes d'événements

👤 Les analystes de croissance / produit ⏱ ~15 min intermediate

Quand l'utiliser : Vous avez des décomptes d'événements étape par étape (inscription → vérification → première action → payé) et avez besoin d'un graphique en entonnoir.

Déroulement

Obtenir les décomptes d'étapes

À partir de Postgres : compter les utilisateurs distincts à chaque étape de l'entonnoir au cours des 30 derniers jours, dans l'ordre.✓ Copié

→ Étape + lignes de décompte
Rendu de l'entonnoir

Générer un graphique en entonnoir AntV avec ces étapes. Afficher le décompte absolu et la conversion % d'étape en étape.✓ Copié

→ Image d'entonnoir avec étiquettes
Comparer les segments

Maintenant, générez 2 entonnoirs côte à côte : mobile vs bureau. Mêmes étapes ; annotez les plus grandes différences d'abandon.✓ Copié

→ Visualisation de comparaison

Résultat : Une visualisation d'entonnoir prête à coller avec comparaison de segments.

Pièges

Compter les événements non uniques gonfle les étapes ultérieures — Toujours compter user_id distinct par étape, pas les lignes d'événement

Combiner avec : postgres

Générer un diagramme sankey ou arborescence pour les relations

👤 Quiconque explique les flux ou les hiérarchies ⏱ ~15 min intermediate

Quand l'utiliser : Vous voulez montrer « trafic par source → destination → conversion » ou un organigramme.

Déroulement

Façonner vos données

J'ai des arêtes source → destination → valeur [coller]. Façonnez-les pour un sankey AntV.✓ Copié

→ Tableau d'arêtes normalisées
Rendu sankey

Générer le sankey avec les étiquettes de nœud et les poids de lien. Utilisez la palette « 3-couleur ».✓ Copié

→ Image sankey
Alternative en tant qu'arbre

Si hiérarchique à la place, rendu en treemap ou arbre org — mêmes données, type de graphique différent.✓ Copié

→ Visualisation alternative

Résultat : La bonne visualisation de relation pour votre histoire, au premier essai.

Pièges

Sankey avec trop de nœuds devient des spaghettis — Fusionner les petites sources en « Autre » ; gardez ≤20 nœuds par couche

Combiner avec : neo4j

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

antv-chart + postgres

Requête → graphique en une seule demande pour les rapports PM

Interroger les inscriptions hebdomadaires au cours des 12 dernières semaines à partir de Postgres, puis générer un graphique en ligne AntV de la tendance.✓ Copié

antv-chart + mongodb

Agrégation + visualisation des données de document

Agréger les commandes par pays ce trimestre à partir de Mongo, rendu en graphique en colonnes trié desc.✓ Copié

antv-chart + filesystem

Enregistrer l'image générée à côté d'une markdown de rapport

Rendu du graphique en entonnoir, enregistrer le PNG sur /reports/funnel-<date>.png, et intégrer dans /reports/weekly.md.✓ Copié

antv-chart + notion

Intégrer des graphiques dans une page de rapport Notion

Générer les trois graphiques KPI hebdomadaires ; créer une page Notion avec chaque URL de graphique intégrée en tant que bloc d'image.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
generate_line_chart / generate_column_chart / generate_bar_chart	data: row[], x, y, title?, style?	Comparaisons de séries chronologiques / catégorielles	free
generate_pie_chart / generate_donut_chart	data, value, category, title?	Partie du tout quand ≤6 catégories	free
generate_funnel_chart	data: [{step, value}]	Flux de conversion	free
generate_sankey_chart	nodes, links: [{source,target,value}]	Flux entre catégories	free
generate_scatter_chart / generate_bubble_chart	data, x, y, size?, color?	Exploration de la corrélation ou de la distribution	free
generate_radar_chart	data: {dimensions, series}	Comparaison multidimensionnelle entre ≤2 entités	free
generate_word_cloud_chart	data: [{word, weight}]	Visualisation de la fréquence du texte	free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart	data, fields	Distributions et catégories imbriquées	free

Coût et limites

Coût d'exécution

Quota d'API: Pas d'authentification ; la limite de débit pratique dépend du backend hébergé (~ utilisation interactive raisonnable)
Tokens par appel: Spec + réponse : 300–1500 tokens
Monétaire: Gratuit — s'exécute localement via npx / contre le service de rendu public d'AntV
Astuce: Gardez les points de données en dessous de quelques centaines par graphique ; envoyez les données agrégées, pas les événements bruts.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun requis

Sortie de données : Les données que vous transmettez dans la spec sont envoyées au service de rendu d'AntV pour produire l'URL de l'image — n'envoyez pas d'informations personnelles ou de données confidentielles

Tout ce que vous tracez via le point de terminaison hébergé quitte votre réseau. Pour les données sensibles, hébergez vous-même le moteur de rendu ou pré-agrégez.

Dépannage

Erreurs courantes et correctifs

Format de données invalide / champ manquant

Chaque type de graphique attend une forme spécifique ; revérifiez les entrées de l'outil — funnel veut {step, value}, sankey veut {source, target, value}.

URL retournée 404 après un moment

Les URL hébergées expirent. Enregistrez l'image localement (système de fichiers) immédiatement après la génération si vous avez besoin de persistance.

Graphique illisible — trop de barres/nœuds

Agréger à top-N + Autre, ou basculer le type de graphique (sankey/treemap) mieux adapté à la cardinalité.

Alternatives

AntV Chart vs autres

Alternative	Quand l'utiliser	Compromis
QuickChart	Vous voulez des graphiques de style Chart.js via URL	Moins de types de graphiques de niche qu'AntV
Mermaid MCP	Vous avez besoin de diagrammes (organigrammes, séquence), pas de graphiques de données	Non approprié pour la visualisation de données numériques
Vega-Lite MCP	Vous voulez une approche de grammaire des graphiques	Spécification plus raide ; plus de flexibilité

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills