amCharts 5 MCP-Server

Ein MCP (Model Context Protocol)-Server, der KI-Assistenten On-Demand-Zugriff auf die vollständige amCharts 5-Wissensdatenbank bietet: über 140 Dokumentationsseiten, über 280 Code-Beispiele und über 1.000 Klassen-API-Referenzen.

Funktioniert mit Claude Code, Claude Desktop, Cursor, Windsurf, VS Code + GitHub Copilot und jedem anderen MCP-kompatiblen KI-Tool.

Warum?

Anstatt die gesamte amCharts-Referenz in das Kontextfenster der KI zu laden, ermöglicht der MCP-Server der KI, genau das abzufragen, was sie benötigt – eine spezifische Diagrammtyp-Referenz, ein Code-Beispiel oder eine API-Suche. Dies führt zu besseren Antworten bei geringerem Kontextverbrauch.

Schnellstart

Claude Code

Für alle Projekte (global, empfohlen):

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

Nur für das aktuelle Projekt:

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

Claude Desktop

Fügen Sie dies zu Ihrer claude_desktop_config.json hinzu:

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

Cursor

Erstellen oder bearbeiten Sie .cursor/mcp.json im Stammverzeichnis Ihres Projekts (oder ~/.cursor/mcp.json für global):

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

Windsurf

Bearbeiten Sie ~/.codeium/windsurf/mcp_config.json:

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

VS Code + GitHub Copilot

Erstellen oder bearbeiten Sie .vscode/mcp.json in Ihrem Arbeitsbereich:

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

Andere MCP-kompatible Tools

Für jedes andere Tool, das MCP unterstützt (Cline, Continue, Amazon Q, Zed usw.), konfigurieren Sie es so, dass es Folgendes ausführt:

npx -y @amcharts/amcharts5-mcp

Lokal ausführen (für die Entwicklung)

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

Verfügbare Tools

Beispielanwendung

Sobald die Verbindung hergestellt ist, kann Ihr KI-Assistent:

• "Erstelle mir ein Kreisdiagramm" → KI ruft get_quick_start("pie") auf und passt die Vorlage an

• "Wie formatiere ich Datumsachsen-Beschriftungen?" → KI ruft search_all("date axis label format") auf

• "Zeig mir das Sankey-Diagramm-Beispiel" → KI ruft get_example("examples/flow/sankey-diagram") auf

• "Welche Einstellungen unterstützt XYChart?" → KI ruft get_doc("reference/xychart") auf

• "Wie integriere ich das in React?" → KI ruft get_doc("getting-started/integrations/react") auf

• "Welche Diagrammtypen sind verfügbar?" → KI ruft list_chart_types() auf

Inhalt

Der Server enthält über 1.500 Dokumente:

• Über 140 Dokumentationsseiten — Erste Schritte, Diagramm-Anleitungen, Konzepte (Themes, Events, Adapter, Datenbindung, Animationen, Barrierefreiheit usw.) und Framework-Integrationsanleitungen (React, Angular, Vue, Next.js, Svelte und mehr)

• Über 280 Code-Beispiele — funktionierende Demos in 16 Kategorien, darunter Spalten/Balken, Linie/Fläche, Kreis/Donut, Karten, Hierarchie, Fluss, Radar/Polar, Stock, Tachos, Gantt, Zeitachse und mehr

• Über 1.000 Klassen-API-Referenzen — jede Klasse in der amCharts 5-Bibliothek mit ihren Einstellungen, Eigenschaften, Methoden, Events und Vererbungskette

• Kuratierte Skill-Referenz — Schnellstartvorlagen und diagrammspezifische Anleitungen aus dem amCharts 5 AI Skill

Lizenz

MIT