amCharts 5 MCP Server

officiel

Serveur MCP qui donne aux assistants IA un accès à la demande à plus de 1 500 documents amCharts, environ 300 exemples de code et plus de 1 000 références d'API de classes.

GitHub

Documentation

Serveur MCP amCharts 5

Un serveur MCP (Model Context Protocol) qui donne aux assistants IA un accès à la demande à la base de connaissances complète d'amCharts 5 : plus de 140 pages de documentation, plus de 280 exemples de code et plus de 1 000 références d'API de classes.

Fonctionne avec Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot et tout autre outil d'IA compatible MCP.

Pourquoi ?

Au lieu de charger toute la référence amCharts dans la fenêtre de contexte de l'IA, le serveur MCP permet à l'IA d'interroger exactement ce dont elle a besoin — une référence de type de graphique spécifique, un exemple de code ou une recherche d'API. Cela signifie de meilleures réponses avec moins de gaspillage de contexte.

Démarrage rapide

La méthode la plus simple est le serveur hébergé — aucune installation, il suffit d'ajouter une URL. Vous préférez l'exécuter vous-même ? Voir Installation locale ci-dessous.

Hébergé (sans installation) — recommandé

Pointez votre client IA vers :

https://mcp.amcharts.com/mcp

Claude Code

claude mcp add --transport http amcharts5 https://mcp.amcharts.com/mcp

Claude Desktop / claude.ai — Paramètres → Connecteurs → Ajouter un connecteur personnalisé, puis collez https://mcp.amcharts.com/mcp.

Cursor — .cursor/mcp.json :

{
  "mcpServers": {
    "amcharts5": {
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

VS Code + GitHub Copilot — .vscode/mcp.json :

{
  "servers": {
    "amcharts5": {
      "type": "http",
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

Windsurf — ~/.codeium/windsurf/mcp_config.json :

{
  "mcpServers": {
    "amcharts5": {
      "serverUrl": "https://mcp.amcharts.com/mcp"
    }
  }
}

ChatGPT (Plus/Pro/Enterprise avec connecteurs/mode développeur activé) — Paramètres → Connecteurs → Ajouter un connecteur personnalisé, puis collez https://mcp.amcharts.com/mcp.

Cline (extension VS Code) — ouvrez le panneau Serveurs MCP → Serveurs distants, collez https://mcp.amcharts.com/mcp, ou ajoutez à son JSON de paramètres MCP :

{
  "mcpServers": {
    "amcharts5": {
      "type": "streamableHttp",
      "url": "https://mcp.amcharts.com/mcp"
    }
  }
}

Clients qui ne prennent en charge que les serveurs locaux (stdio) (par exemple Zed, Continue, Amazon Q Developer) — faites le pont vers l'URL hébergée avec mcp-remote. Utilisez ceci comme commande d'exécution du serveur dans la configuration du client :

npx mcp-remote https://mcp.amcharts.com/mcp

Par exemple, dans une configuration de style command/args :

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.amcharts.com/mcp"]
    }
  }
}

Tout autre client MCP qui accepte une URL de serveur distant fonctionne également — utilisez le point de terminaison /mcp (HTTP Streamable) ou /sse (SSE hérité). Pour les clients URL uniquement qui attendent encore une commande, utilisez le pont mcp-remote illustré ci-dessus.

Installation locale (npx)

Vous préférez l'exécuter vous-même ? Le serveur est également publié sur npm et s'exécute via stdio.

Claude Code

Pour tous les projets (global, recommandé) :

claude mcp add -s user amcharts5 -- npx -y @amcharts/amcharts5-mcp

Pour le projet actuel uniquement :

claude mcp add amcharts5 -- npx -y @amcharts/amcharts5-mcp

Claude Desktop

Ajoutez à votre claude_desktop_config.json :

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Cursor

Créez ou modifiez .cursor/mcp.json à la racine de votre projet (ou ~/.cursor/mcp.json pour global) :

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Windsurf

Modifiez ~/.codeium/windsurf/mcp_config.json :

{
  "mcpServers": {
    "amcharts5": {
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

VS Code + GitHub Copilot

Créez ou modifiez .vscode/mcp.json dans votre espace de travail :

{
  "servers": {
    "amcharts5": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@amcharts/amcharts5-mcp"]
    }
  }
}

Autres outils compatibles MCP

Pour tout autre outil prenant en charge MCP (Cline, Continue, Amazon Q, Zed, etc.), configurez-le pour exécuter :

npx -y @amcharts/amcharts5-mcp

Exécution locale (pour le développement)

git clone https://github.com/amcharts/amcharts5-mcp.git
cd amcharts5-mcp
npm install
npm start

Outils disponibles

Outil	Description
`get_core_reference`	Obtenir la documentation de base d'amCharts 5 — configuration, thèmes, couleurs, événements, pièges courants
`get_chart_reference`	Obtenir la référence complète pour un type de graphique (par exemple "pie", "sankey", "xy")
`list_chart_types`	Lister tous les types de graphiques disponibles et leurs mots-clés
`search_docs`	Rechercher dans la documentation de référence des compétences par mot-clé
`search_all`	Rechercher dans tout — documentation des compétences, documentation complète et exemples de code
`get_doc`	Obtenir une page de documentation complète (par exemple "charts/xy-chart/axes", "concepts/events")
`get_section`	Obtenir une section spécifique d'un fichier de référence par titre
`get_quick_start`	Obtenir un modèle fonctionnel minimal pour tout type de graphique
`list_examples`	Parcourir les 283 exemples, éventuellement filtrés par catégorie
`get_example`	Obtenir le code complet d'un exemple spécifique

Exemple d'utilisation

Une fois connecté, votre assistant IA peut :

"Construis-moi un diagramme circulaire" → L'IA appelle get_quick_start("pie") et adapte le modèle
"Comment formater les étiquettes de l'axe des dates ?" → L'IA appelle search_all("date axis label format")
"Montre-moi l'exemple du diagramme de Sankey" → L'IA appelle get_example("examples/flow/sankey-diagram")
"Quels paramètres XYChart prend-il en charge ?" → L'IA appelle get_doc("reference/xychart")
"Comment intégrer avec React ?" → L'IA appelle get_doc("getting-started/integrations/react")
"Quels types de graphiques sont disponibles ?" → L'IA appelle list_chart_types()

Contenu

Le serveur comprend plus de 1 500 documents :

Plus de 140 pages de documentation — démarrage, guides de graphiques, concepts (thèmes, événements, adaptateurs, liaison de données, animations, accessibilité, etc.) et guides d'intégration de frameworks (React, Angular, Vue, Next.js, Svelte, et plus)
Plus de 280 exemples de code — démos fonctionnelles dans 16 catégories, y compris colonnes/barres, lignes/zones, secteurs/anneaux, cartes, hiérarchie, flux, radar/polaire, bourse, jauges, Gantt, chronologie, et plus
Plus de 1 000 références d'API de classes — chaque classe de la bibliothèque amCharts 5 avec ses paramètres, propriétés, méthodes, événements et chaîne d'héritage
Référence de compétences organisée — modèles de démarrage rapide et guides spécifiques aux graphiques de la Compétence IA amCharts 5

Licence

MIT