Chart MCP Server

officiel

Un serveur Model Context Protocol pour générer des graphiques visuels avec AntV.

Documentation

Serveur MCP Chart

Un serveur Model Context Protocol pour générer des graphiques en utilisant AntV. Nous pouvons utiliser ce serveur MCP pour la génération de graphiques et l'analyse de données.

Il s'agit d'un serveur MCP basé sur TypeScript qui offre des capacités de génération de graphiques. Il vous permet de créer divers types de graphiques via les outils MCP. Vous pouvez également l'utiliser dans Dify.

📋 Table des matières

✨ Fonctionnalités
🤖 Utilisation
🎨 Utilisation des compétences
🚰 Exécution avec transport SSE ou Streamable
🎮 Options CLI
⚙️ Variables d'environnement
📠 Déploiement privé
🗺️ Enregistrements de génération
🎛️ Filtrage des outils
🔨 Développement
📄 Licence

✨ Fonctionnalités

Plus de 26 graphiques sont désormais pris en charge.

generate_area_chart : Générer un graphique area, utilisé pour afficher la tendance des données sous une variable indépendante continue, permettant d'observer les tendances globales des données.
generate_bar_chart : Générer un graphique bar, utilisé pour comparer les valeurs entre différentes catégories, adapté aux comparaisons horizontales.
generate_boxplot_chart : Générer un boxplot, utilisé pour afficher la distribution des données, y compris la médiane, les quartiles et les valeurs aberrantes.
generate_column_chart : Générer un graphique column, utilisé pour comparer les valeurs entre différentes catégories, adapté aux comparaisons verticales.
generate_district_map - Générer un district-map, utilisé pour montrer les divisions administratives et la distribution des données.
generate_dual_axes_chart : Générer un graphique dual-axes, utilisé pour afficher la relation entre deux variables avec des unités ou des plages différentes.
generate_fishbone_diagram : Générer un diagramme fishbone, également connu sous le nom de diagramme d'Ishikawa, utilisé pour identifier et afficher les causes profondes d'un problème.
generate_flow_diagram : Générer un flowchart, utilisé pour afficher les étapes et la séquence d'un processus.
generate_funnel_chart : Générer un graphique funnel, utilisé pour afficher la perte de données à différentes étapes.
generate_histogram_chart : Générer un histogram, utilisé pour afficher la distribution des données en les divisant en intervalles et en comptant le nombre de points de données dans chaque intervalle.
generate_line_chart : Générer un graphique line, utilisé pour afficher la tendance des données dans le temps ou une autre variable continue.
generate_liquid_chart : Générer un graphique liquid, utilisé pour afficher la proportion des données, représentant visuellement les pourcentages sous forme de sphères remplies d'eau.
generate_mind_map : Générer un mind-map, utilisé pour afficher les processus de réflexion et les informations hiérarchiques.
generate_network_graph : Générer un graphique network, utilisé pour afficher les relations et les connexions entre les nœuds.
generate_organization_chart : Générer un graphique organizational, utilisé pour afficher la structure d'une organisation et les relations entre le personnel.
generate_path_map - Générer un path-map, utilisé pour afficher les résultats de planification d'itinéraire pour les POI.
generate_pie_chart : Générer un graphique pie, utilisé pour afficher la proportion des données, en les divisant en parties représentées par des secteurs montrant le pourcentage de chaque partie.
generate_pin_map - Générer un pin-map, utilisé pour montrer la distribution des POI.
generate_radar_chart : Générer un graphique radar, utilisé pour afficher des données multidimensionnelles de manière complète, montrant plusieurs dimensions dans un format de type radar.
generate_sankey_chart : Générer un graphique sankey, utilisé pour afficher le flux et le volume des données, représentant le mouvement des données entre différents nœuds dans un format de style Sankey.
generate_scatter_chart : Générer un graphique scatter, utilisé pour afficher la relation entre deux variables, montrant les points de données sous forme de points dispersés sur un système de coordonnées.
generate_treemap_chart : Générer un treemap, utilisé pour afficher des données hiérarchiques, montrant les données sous forme rectangulaire où la taille des rectangles représente la valeur des données.
generate_venn_chart : Générer un diagramme venn, utilisé pour afficher les relations entre les ensembles, y compris les intersections, les unions et les différences.
generate_violin_chart : Générer un graphique violin, utilisé pour afficher la distribution des données, combinant les caractéristiques des boîtes à moustaches et des graphiques de densité pour fournir une vue plus détaillée de la distribution des données.
generate_word_cloud_chart : Générer un word-cloud, utilisé pour afficher la fréquence des mots dans les données textuelles, avec des tailles de police indiquant la fréquence de chaque mot.
generate_spreadsheet : Générer un spreadsheet ou un tableau croisé dynamique pour afficher des données tabulaires. Lorsque les champs 'rows' ou 'values' sont fournis, il s'affiche sous forme de tableau croisé dynamique (tabulation croisée) ; sinon, il s'affiche sous forme de tableau normal.

[!NOTE] L'outil de génération de graphiques de visualisation géographique ci-dessus utilise le service AMap et ne prend actuellement en charge que la génération de cartes en Chine.

🤖 Utilisation

Pour utiliser avec Desktop APP, comme Claude, VSCode, Cline, Cherry Studio, Cursor, etc., ajoutez la configuration du serveur MCP ci-dessous. Sur système Mac :

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

Sur système Windows :

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

Vous pouvez également l'utiliser sur aliyun, modelscope, glama.ai, smithery.ai ou d'autres avec le protocole HTTP, SSE.

🎨 Utilisation des compétences

Si vous utilisez un IDE IA avec prise en charge des compétences (comme Claude Code), vous pouvez utiliser la compétence chart-visualization pour sélectionner automatiquement le meilleur type de graphique et générer des visualisations.

Vous pouvez ajouter la compétence depuis https://github.com/antvis/chart-visualization-skills en utilisant :

npx skills add antvis/chart-visualization-skills

Ensuite, fournissez vos données ou décrivez la visualisation que vous souhaitez. La compétence choisira intelligemment parmi plus de 25 types de graphiques et générera le graphique pour vous.

🚰 Exécution avec transport SSE ou Streamable

Exécution directe

Installez le package globalement.

npm install -g @antv/mcp-server-chart

Exécutez le serveur avec votre option de transport préférée :

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Ensuite, vous pouvez accéder au serveur à :

Transport SSE : http://localhost:1122/sse
Transport Streamable : http://localhost:1122/mcp

Déploiement Docker

Entrez dans le répertoire docker.

cd docker

Déployez en utilisant docker-compose.

docker compose up -d

Ensuite, vous pouvez accéder au serveur à :

Transport SSE : http://localhost:1123/sse
Transport Streamable : http://localhost:1122/mcp

🎮 Options CLI

Vous pouvez également utiliser les options CLI suivantes lors de l'exécution du serveur MCP. Options de commande en exécutant cli avec -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Variables d'environnement

Variable	Description	Par défaut	Exemple
`VIS_REQUEST_SERVER`	URL du service de génération de graphiques personnalisé pour le déploiement privé	`https://antv-studio.alipay.com/api/gpt-vis`	`https://your-server.com/api/chart`
`SERVICE_ID`	Identifiant de service pour les enregistrements de génération de graphiques	-	`your-service-id-123`
`DISABLED_TOOLS`	Liste séparée par des virgules des noms d'outils à désactiver	-	`generate_fishbone_diagram,generate_mind_map`

📠 Déploiement privé

MCP Server Chart fournit un service de génération de graphiques gratuit par défaut. Pour les utilisateurs ayant besoin d'un déploiement privé, ils peuvent essayer d'utiliser VIS_REQUEST_SERVER pour personnaliser leur propre service de génération de graphiques.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Vous pouvez utiliser le projet AntV GPT-Vis-SSR pour déployer un service HTTP dans un environnement privé, puis transmettre l'adresse URL via la variable d'environnement VIS_REQUEST_SERVER.

Méthode : POST
Paramètre : Qui sera transmis à GPT-Vis-SSR pour le rendu. Par exemple, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
Retour : L'objet de retour du service HTTP.
- success : boolean Indique si la génération de l'image du graphique a réussi.
- resultObj : string L'URL de l'image du graphique.
- errorMessage : string Lorsque success = false, renvoie le message d'erreur.

[!NOTE] La solution de déploiement privé ne prend actuellement pas en charge la génération de graphiques de visualisation géographique, y compris 3 outils : geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Enregistrements de génération

Par défaut, les utilisateurs doivent enregistrer les résultats eux-mêmes, mais nous fournissons également un service pour consulter les enregistrements de génération de graphiques, ce qui nécessite que les utilisateurs génèrent un identifiant de service pour eux-mêmes et le configurent.

Utilisez Alipay pour scanner et ouvrir le mini-programme afin de générer un identifiant de service personnel (cliquez sur le menu "My" ci-dessous, entrez dans la page "My Services", cliquez sur le bouton "Generate", et cliquez sur le bouton "Copy" après succès) :

Ensuite, vous devez ajouter la variable d'environnement SERVICE_ID à la configuration du serveur MCP. Par exemple, la configuration pour Mac est la suivante (pour les systèmes Windows, ajoutez simplement la variable env) :

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

Après avoir mis à jour la configuration du serveur MCP, vous devez redémarrer votre application cliente IA et vérifier à nouveau si vous avez démarré et connecté au serveur MCP avec succès. Ensuite, vous pouvez essayer de générer à nouveau la carte. Une fois la génération réussie, vous pouvez aller sur la page "My Map" du mini-programme pour consulter vos enregistrements de génération de carte.

🎛️ Filtrage des outils

Vous pouvez désactiver des outils de génération de graphiques spécifiques en utilisant la variable d'environnement DISABLED_TOOLS. Cela est utile lorsque certains outils ont des problèmes de compatibilité avec votre client MCP ou lorsque vous souhaitez limiter les fonctionnalités disponibles.

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

Noms d'outils disponibles pour le filtrage Voir les ✨ Fonctionnalités.

🔨 Développement

Installer les dépendances :

npm install

Construire le serveur :

npm run build

Démarrer le serveur MCP :

npm run start

Démarrer le serveur MCP avec le transport SSE :

node build/index.js -t sse

Démarrer le serveur MCP avec le transport Streamable :

node build/index.js -t streamable

📄 Licence

MIT@AntV.