amCharts 5 MCP Server

amCharts 5 MCP Server

Ein MCP (Model Context Protocol)-Server, der KI-Assistenten bei Bedarf Zugriff auf die vollständige amCharts 5-Wissensdatenbank gewährt: 140+ Dokumentationsseiten, 280+ Codebeispiele und 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 Referenz für einen bestimmten Diagrammtyp, ein Codebeispiel oder eine API-Abfrage. Das bedeutet bessere Antworten mit weniger Kontextverschwendung.

Schnellstart

Der einfachste Weg ist der gehostete Server – keine Installation, nur eine URL hinzufügen. Möchten Sie ihn lieber selbst betreiben? Siehe Lokale Installation unten.

Gehostet (keine Installation) – empfohlen

Verweisen Sie Ihren KI-Client auf:

https://mcp.amcharts.com/mcp

Claude Code

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

Claude Desktop / claude.ai — Einstellungen → Connectors → Benutzerdefinierten Connector hinzufügen, dann https://mcp.amcharts.com/mcp einfügen.

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 mit aktivierten Connectors/Entwicklermodus) — Einstellungen → Connectors → Benutzerdefinierten Connector hinzufügen, dann https://mcp.amcharts.com/mcp einfügen.

Cline (VS Code-Erweiterung) — Öffnen Sie das MCP Servers-Panel → Remote Servers, fügen Sie https://mcp.amcharts.com/mcp ein, oder fügen Sie es zur MCP-Einstellungs-JSON hinzu:

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

Clients, die nur lokale (stdio) Server unterstützen (z. B. Zed, Continue, Amazon Q Developer) — Überbrücken Sie die gehostete URL mit mcp-remote. Verwenden Sie dies als Ausführungsbefehl des Servers in der Client-Konfiguration:

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

Zum Beispiel in einer command/args-artigen Konfiguration:

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

Jeder andere MCP-Client, der eine Remote-Server-URL akzeptiert, funktioniert ebenfalls – verwenden Sie den /mcp-Endpunkt (Streamable HTTP) oder /sse (veraltetes SSE). Für reine URL-Clients, die dennoch einen Befehl erwarten, verwenden Sie die oben gezeigte mcp-remote-Brücke.

Lokale Installation (npx)

Möchten Sie es lieber selbst ausführen? Der Server wird auch auf npm veröffentlicht und läuft über stdio.

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 zu Ihrer claude_desktop_config.json hinzu:

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

Cursor

Erstellen oder bearbeiten Sie .cursor/mcp.json in Ihrem Projektstamm (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

Konfigurieren Sie jedes andere Tool, das MCP unterstützt (Cline, Continue, Amazon Q, Zed usw.), 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 Werkzeuge

Werkzeug	Beschreibung
get_core_reference	Grundlegende amCharts 5-Dokumentation abrufen – Einrichtung, Themen, Farben, Ereignisse, häufige Fallstricke
get_chart_reference	Vollständige Referenz für einen Diagrammtyp abrufen (z. B. „pie“, „sankey“, „xy“)
list_chart_types	Alle verfügbaren Diagrammtypen und ihre Schlüsselwörter auflisten
search_docs	Die Skill-Referenzdokumentation nach Schlüsselwort durchsuchen
search_all	Alles durchsuchen – Skill-Dokumentation, vollständige Dokumentation und Codebeispiele
get_doc	Eine vollständige Dokumentationsseite abrufen (z. B. „charts/xy-chart/axes“, „concepts/events“)
get_section	Einen bestimmten Abschnitt aus einer Referenzdatei nach Überschrift abrufen
get_quick_start	Eine minimale funktionierende Vorlage für jeden Diagrammtyp abrufen
list_examples	Alle 283 Beispiele durchsuchen, optional nach Kategorie gefiltert
get_example	Den vollständigen Code für ein bestimmtes Beispiel abrufen

Beispielnutzung

Einmal verbunden, kann Ihr KI-Assistent:

• „Erstelle mir ein Kreisdiagramm“ → KI ruft get_quick_start("pie") auf und passt die Vorlage an
• „Wie formatiere ich Datumsachsenbeschriftungen?“ → KI ruft search_all("date axis label format") auf
• „Zeige 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 mit 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 1.500+ Dokumente:

• 140+ Dokumentationsseiten – Erste Schritte, Diagrammanleitungen, Konzepte (Themen, Ereignisse, Adapter, Datenbindung, Animationen, Barrierefreiheit usw.) und Framework-Integrationsanleitungen (React, Angular, Vue, Next.js, Svelte und mehr)
• 280+ Codebeispiele – funktionierende Demos in 16 Kategorien, einschließlich Säulen/Balken, Linien/Flächen, Kreis/Ring, Karten, Hierarchie, Fluss, Radar/Polar, Aktien, Messgeräte, Gantt, Zeitleiste und mehr
• 1.000+ Klassen-API-Referenzen – jede Klasse in der amCharts 5-Bibliothek mit ihren Einstellungen, Eigenschaften, Methoden, Ereignissen und der Vererbungskette
• Kuratierte Skill-Referenz – Schnellstartvorlagen und diagrammspezifische Anleitungen aus dem amCharts 5 AI Skill

Lizenz

MIT