mcp-highcharts

Interaktive Highcharts-Diagramme direkt im KI-Chat rendern — VS Code, GitHub Copilot, Claude Desktop oder jeder MCP-Client mit MCP Apps-Unterstützung.

Einrichtung

Klicken Sie auf ein Badge oben oder fügen Sie es Ihrer MCP-Konfiguration hinzu:

{
  "mcp": {
    "servers": {
      "highcharts": {
        "command": "npx",
        "args": ["-y", "mcp-highcharts@latest"]
      }
    }
  }
}

Zu claude_desktop_config.json hinzufügen:

{
  "mcpServers": {
    "highcharts": {
      "command": "npx",
      "args": ["-y", "mcp-highcharts@latest"]
    }
  }
}

npx mcp-highcharts@latest --http          # http://localhost:3001/mcp
PORT=8080 npx mcp-highcharts@latest --http  # custom port

Tools

Alle Tools akzeptieren die vollständige Highcharts Options API.

Prompts

Konfiguration

Theming

Diagramme passen sich automatisch an den Hell-/Dunkelmodus des Hosts an. Überschreiben Sie dies mit Umgebungsvariablen:

{
  "env": {
    "HIGHCHARTS_THEME": "dark-unica",
    "HIGHCHARTS_OPTIONS": "./my-theme.json"
  }
}

HIGHCHARTS_OPTIONS akzeptiert .json, .js, .mjs, .ts oder Inline-JSON.

Integrierte Themes: adaptive (Standard), avocado, brand-dark, brand-light, dark-blue, dark-green, dark-unica, gray, grid, grid-light, high-contrast-dark, high-contrast-light, sand-signika, skies, sunset

Schematiefe

Steuert, wie viele Typinformationen an das LLM gesendet werden:

{ "env": { "SCHEMA_DEPTH": "1" } }

Datenquellen

Für live-aktualisierende Diagramme verwenden Sie das Highcharts-Datenmodul mit data.csvURL und data.enablePolling: true.

Bildexport (Fallback ohne App)

Für MCP-Clients, die keine MCP Apps unterstützen, aktivieren Sie den serverseitigen Bildexport, um einen PNG-Screenshot jedes Diagramms in die Tool-Antwort einzufügen:

{
  "env": {
    "IMAGE_EXPORT": "true"
  }
}

Diagramme werden als PNG gerendert und als base64-Bildinhalt-Blöcke zurückgegeben. Die interaktive MCP-App ist für fähige Clients weiterhin enthalten.

Rendering-Strategie (automatisch):

1. Lokal (Puppeteer) — wenn highcharts-export-server installiert ist, werden Diagramme lokal über einen Headless-Browser gerendert. Keine Netzwerkaufrufe, die schnellste Option.

2. Remote-Fallback — wenn lokal nicht verfügbar ist, wird die Diagrammkonfiguration per POST an den Highcharts Export Server gesendet.

Um das lokale Rendering zu aktivieren, installieren Sie die optionale Peer-Abhängigkeit:

npm install highcharts-export-server

Um einen benutzerdefinierten Remote-Export-Server zu verwenden:

{
  "env": {
    "IMAGE_EXPORT": "true",
    "EXPORT_SERVER_URL": "https://your-export-server.example.com/"
  }
}

Sie können es auch programmatisch aktivieren: createServer({ imageExport: true }).

Hinweis: Der Bildexport funktioniert für Standarddiagramme, Aktiendiagramme und Gantt-Diagramme. Dashboards, Datengitter und Karten mit stringbasierten Kartenschlüsseln (z. B. "custom/world") sind nicht exportierbar und geben nur Text zurück.

Entwicklung

npm install
node scripts/generate-from-tree.mjs --multi   # generate Zod schemas at depths 0, 1, 2
npm run build
npm test

Projektstruktur

main.ts                  Entry point (stdio + HTTP transports)
server.ts                MCP server — tool registrations and handlers
src/
  export-image.ts        Server-side PNG export (local Puppeteer + remote fallback)
  input-schema.ts        Depth-based schema selection + LLM-friendly overrides
  mcp-app.ts             Client-side Highcharts rendering
  module-loader.ts       Dynamic Highcharts module loading
  generated/             Auto-generated from Highcharts API (do not edit)
    highcharts-depth-{0,1,2}.gen.ts   Zod schemas at each depth
    module-map.json                   Chart type → Highcharts module mapping
scripts/
  generate-from-tree.mjs   Generate Zod schemas from Highcharts tree.json
  generate-module-map.mjs  Generate module-map.json from Highcharts
  example-providers.mjs    Example extraction for schema generation
  measure-schema.ts        Measure tool context size at each depth

Diagrammtypen, Modulzuordnungen und Schemata werden automatisch aus der installierten Highcharts-Version generiert — einfach npm update highcharts ausführen und neu generieren.

Lizenz

MIT