provchart-mcp

MCP-Server für ProvChart — Agenten generieren reine CSS-Diagramme (HTML + CSS) oder SVG für README/Dokumentation.

Kein Chart.js. Kein Client-Diagramm-Runtime für die Darstellung erforderlich. Dasselbe JSON, das auch dein Dashboard verwendet.

Was es tut

Agenten rufen diese auf, statt eigene Chart.js-Snippets zu erfinden.

Related MCP server: ECharts ChartPage MCP Server

Voraussetzungen

• Node.js 18+ (natives fetch)

• ProvChart-API-Schlüssel — kostenlose registrierte Konten enthalten begrenzte monatliche Test-Generierungen

export PROVCHART_API_KEY=pc_live_xxxxxxxx

Commite niemals echte Schlüssel. Bevorzuge env / MCP-env-Konfiguration.

Installation & Ausführung

Aus dem Quellcode (dieses Repository)

cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.js

Der Prozess spricht MCP über stdio (bleibt still, bis sich ein Client verbindet).

Nach der Veröffentlichung

npx -y provchart-mcp

Claude Desktop

Bearbeite claude_desktop_config.json:

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Oder mit npx (sobald veröffentlicht):

{
  "mcpServers": {
    "provchart": {
      "command": "npx",
      "args": ["-y", "provchart-mcp"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Starte Claude Desktop nach dem Speichern neu.

Cursor

mcp.json (Projekt oder global):

{
  "mcpServers": {
    "provchart": {
      "command": "node",
      "args": ["/absolute/path/to/provchart-mcp/src/index.js"],
      "env": {
        "PROVCHART_API_KEY": "pc_live_xxxxxxxx"
      }
    }
  }
}

Beispiel-Prompts

• Verwende provchart_generate für ein Flächendiagramm im Mitternachts-Theme: Traffic vs. Anmeldungen, Mo–So.

• Generiere ein SVG-Liniendiagramm der p50/p95-Latenz für ein GitHub-README.

• Erkläre, wie man ProvChart-HTML/CSS ohne Diagrammbibliothek einbindet.

Beispiel-Tool-Argumente (provchart_generate)

{
  "type": "area",
  "theme": "midnight",
  "series": [
    { "name": "Traffic", "color": "#4fd8c4", "points": [30, 45, 40, 60, 55, 70, 65] },
    { "name": "Signups", "color": "#f0a860", "points": [8, 12, 11, 18, 16, 22, 20] }
  ],
  "axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}

Füge das zurückgegebene CSS in einen <style>-Tag und das HTML in einen Container ein. Optional: provchart-runtime für Tooltips — für die Darstellung nicht erforderlich.

Umgebung

*Oder übergib apiKey in den Tool-Argumenten (env bevorzugt).

Fehler

Projektstruktur

provchart-mcp/
  package.json
  README.md
  src/
    index.js    # MCP stdio server
    client.js   # ProvChart HTTP helper
    tools.js    # Tool schemas + handlers

Verwandtes

• ProvChart — Produkt & Builder

• Live-Demo — Multi-Chart-API-Batch

• Developer API

• provchart-runtime — optionale HTML-Erweiterungen

• st-core.fscss — offene reine-CSS-Grundlagen