amCharts 5 MCP Server

amCharts 5 MCP Server

Un serveur MCP (Model Context Protocol) qui donne aux assistants IA un accès à la demande à l’ensemble de la base de connaissances amCharts 5 : plus de 160 pages de documentation, plus de 350 exemples de code (dont plus de 60 configurations JSON complètes) et plus de 1 300 pages de référence API.

Fonctionne avec Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot et tout autre outil compatible avec 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 de rechercher exactement ce dont elle a besoin : la référence d’un type de graphique précis, un exemple de code ou une entrée de référence API. Les réponses sont ainsi meilleures et le contexte moins encombré.

Démarrage rapide

La méthode la plus simple consiste à utiliser le serveur hébergé : aucune installation, il suffit d’ajouter une URL. Vous préférez l’exécuter vous-même ? Consultez la section Installation locale ci-dessous.

Hébergé (sans installation) — recommandé

Configurez votre client IA avec :

https://mcp.amcharts.com/mcp

La documentation amCharts 5 est également disponible sur Context7 sous le nom /amcharts/amcharts5.

Claude Code

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

Claude (claude.ai, Desktop) — ajoutez amCharts 5 depuis le répertoire des connecteurs. Ou accédez à Settings → Connectors → Add custom connector, 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 (également disponible avec l’offre Free) — ouvrez Plugins → + → Add custom MCP server. Donnez-lui un nom, définissez l’URL sur https://mcp.amcharts.com/mcp et Authentication sur No authentication, puis cliquez sur Create as a plugin. Dans une conversation, saisissez @amCharts pour l’utiliser.

Figma Make et l’agent Figma (offres Figma payantes) — dans la conversation, ouvrez Add context → Connectors → Manage → Create. Nommez-le amCharts, définissez l’URL sur https://mcp.amcharts.com/mcp sans authentification et réglez ses outils sur Always run. Mentionnez ensuite amCharts dans l’invite (sinon, Make choisit Recharts), par exemple : « Crée un tableau de bord des ventes avec amCharts : une carte du monde colorée selon le chiffre d’affaires et un graphique linéaire des ventes mensuelles ». Make installe @amcharts/amcharts5 et recherche le code via le serveur. Vous pouvez également fournir un lien vers une démo ou une page de documentation amcharts.com comme contexte.

Cline (extension VS Code) — ouvrez le panneau MCP Servers → Remote Servers, collez https://mcp.amcharts.com/mcp, ou ajoutez-le au JSON des 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 cette commande 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 type command/args :

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

Tout autre client MCP acceptant une URL de serveur distant fonctionne également : utilisez le point de terminaison /mcp (Streamable HTTP) ou /sse (SSE hérité). Pour les clients qui n’acceptent qu’une URL, mais attendent tout de même une commande, utilisez le pont mcp-remote présenté ci-dessus.

Installation locale (npx)

Vous préférez l’exécuter vous-même ? Le serveur est également publié sur npm et fonctionne 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-le à 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 une configuration globale) :

{
  "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 avec 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 et pièges courants. Renvoie un aperçu comprenant les premières sections, jusqu’à 12 000 caractères, ainsi qu’une liste des autres sections ; full: true pour obtenir le fichier entier
get_chart_reference	Obtenir la référence d’un type de graphique (par exemple « pie », « sankey », « xy »). Si elle dépasse 12 000 caractères, renvoie un aperçu et indique le reste à récupérer avec get_section ; full: true pour obtenir le fichier entier
list_chart_types	Lister tous les types de graphiques disponibles et leurs mots-clés
search_docs	Rechercher par mot-clé dans les documents de référence des compétences (scope: "all" ajoute la documentation complète, la référence API et les exemples)
search_all	Rechercher dans l’ensemble du contenu : documentation des compétences, documentation complète et exemples de code
get_doc	Obtenir une page de documentation complète à partir de son chemin (par exemple « charts/xy-chart/axes », « concepts/events ») ou de son adresse docs.amcharts.com
get_section	Obtenir une section précise d’un fichier de référence à partir de son titre (un titre de sous-section ### renvoie uniquement cette sous-section)
get_quick_start	Obtenir un modèle minimal fonctionnel pour n’importe quel type de graphique
list_examples	Parcourir les plus de 350 exemples, avec un filtrage facultatif par catégorie
get_example	Obtenir le code complet d’un exemple précis à partir de son chemin ou de son adresse de démo amcharts.com
get_api_reference	Obtenir la référence API d’une classe, d’une interface ou d’une fonction : paramètres et valeurs par défaut, événements, héritage et ligne d’importation
list_geodata	Trouver des fichiers de cartes (géodonnées) : monde, continents, pays, ensembles régionaux et ensembles de districts électoraux du Congrès américain par Congrès, avec le chemin CDN, la variable globale du script et l’import ES de chaque fichier

Exemples d’utilisation

Une fois connecté, votre assistant IA peut :

• « Crée-moi un graphique circulaire » → l’IA appelle get_quick_start("pie") et adapte le modèle
• « Comment formater les libellés de l’axe des dates ? » → l’IA appelle search_all("date axis label format")
• « Montre-moi l’exemple de diagramme 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 amCharts à React ? » → l’IA appelle get_doc("getting-started/integrations/react"), qui couvre le package @amcharts/amcharts5-react
• « Quels types de graphiques sont disponibles ? » → l’IA appelle list_chart_types()
• « Affiche les districts électoraux actuels des États-Unis sur une carte » → l’IA appelle list_geodata("congressional whole country")
• Un lien amcharts.com collé, par exemple « fais-en un comme https://www.amcharts.com/demos/sankey-diagram/ » → quel que soit l’outil que l’IA essaie avec ce lien (une recherche, get_doc, get_example), il renvoie à l’appel qui fournit le code de cette démo ou la page ou section de documentation correspondante

Contenu

Le serveur comprend plus de 1 900 documents :

• Plus de 160 pages de documentation — prise en main, guides des graphiques, concepts (thèmes, événements, adaptateurs, liaison de données, animations, accessibilité, etc.) et guides d’intégration aux frameworks pour les packages React, Vue, Angular, Svelte et React Native d’amCharts (avec Next.js, Nuxt, SvelteKit, React Router et Remix 3)
• Plus de 350 exemples de code — plus de 290 démos fonctionnelles réparties dans 16 catégories, notamment colonnes/barres, lignes/aires, secteurs/anneaux, cartes, hiérarchie, flux, radar/polaire, bourse, jauges, Gantt, chronologie et bien d’autres, ainsi que plus de 60 configurations JSON complètes issues du package npm amCharts
• Plus de 1 300 pages de référence API — chaque classe, interface et fonction de la bibliothèque amCharts 5, générées à partir des définitions de types de la version : paramètres avec leurs valeurs par défaut réelles (y compris les règles de thème), événements, propriétés, champs des éléments de données, chaîne d’héritage et ligne d’importation
• Plus de 670 entrées de géodonnées — toutes les cartes de @amcharts/amcharts5-geodata, pour list_geodata
• Référence de compétences sélectionnée — modèles de démarrage rapide, guides propres aux graphiques et guide de rédaction des configurations JSON, issus de l’AI Skill amCharts 5

Sécurité

• Outils en lecture seule. Chaque outil lit la documentation amCharts intégrée et renvoie du texte. Aucun outil n’écrit de fichiers, n’exécute de commandes ni ne récupère d’URL.
• Le point de terminaison hébergé ne nécessite aucune authentification, par conception. https://mcp.amcharts.com/mcp fournit la même documentation publique que amcharts.com. Il n’y a ni comptes, ni clés API, ni données utilisateur, ni opérations d’écriture.
  • Il fonctionne sur Cloudflare Workers.
  • L’état de session MCP est conservé dans un Durable Object, comme l’exige le framework des agents MCP. Il est supprimé à la fin de la session ou 24 heures après la dernière requête.
  • Les journaux par requête (journaux d’invocation Workers) sont désactivés. Seuls les messages d’erreur sont consignés, sans aucun argument d’outil. Voir « Confidentialité » ci-dessous.
• Installation locale. Le package npm fonctionne via stdio sur votre machine et ne lit que le contenu qu’il intègre ; il n’effectue aucune requête réseau. Ses seules dépendances d’exécution sont @modelcontextprotocol/sdk et zod.
• Scripts de maintenance. Les scripts de scripts/ (extracteurs des démos et de la documentation, générateur de référence API) ne font pas partie du package npm et ne sont jamais exécutés par le serveur.
• Signaler une vulnérabilité : https://www.amcharts.com/report-vulnerability/

Confidentialité

Ni le serveur hébergé ni le package npm ne nécessitent de compte ni ne demandent de données personnelles.

• Serveur hébergé (https://mcp.amcharts.com/mcp) :
  • Données envoyées par votre application IA : une expression de recherche, un type de graphique ou un chemin de documentation. Elles servent uniquement à générer la réponse et ne sont ni consignées ni stockées. Une réponse est conservée dans le stockage de la session uniquement jusqu’à sa transmission (pour permettre la reprise d’un flux interrompu), puis supprimée.
  • Enregistrement de session : lorsqu’une application IA se connecte, le serveur conserve son message d’initialisation MCP dans le stockage de la session. Ce message contient les informations que l’application fournit à son sujet (son nom, sa version et tout autre élément qu’elle y inclut), la version du protocole et les capacités MCP de l’application. L’ensemble du stockage de la session est supprimé lorsque l’application met fin à la session ou 24 heures après sa dernière requête.
  • Journaux : le serveur ne conserve aucun journal des requêtes (les journaux d’invocation Workers sont désactivés). Il fonctionne sur Cloudflare Workers, et Cloudflare traite chaque requête, y compris son adresse IP, pour l’acheminer. Les messages d’erreur et d’avertissement sont consignés et conservés pendant 7 jours au maximum ; ils ne contiennent ni le contenu des requêtes ni les arguments des outils.
• Package npm : il fonctionne sur votre ordinateur via stdio et n’envoie rien à amCharts ni à qui que ce soit d’autre.
• Politique et questions : consultez la politique de confidentialité d’amCharts ou écrivez à contact@amcharts.com.

Licence

MIT