provchart-mcp

MCP server for ProvChart — agents generate pure CSS charts (HTML + CSS) or SVG for README/docs.

No Chart.js. No client chart runtime required for paint. Same JSON your dashboard uses.

What it does

Agents call these instead of inventing Chart.js snippets.

Related MCP server: ECharts ChartPage MCP Server

Requirements

• Node.js 18+ (native fetch)

• ProvChart API key — free signed-up accounts include limited monthly test gens

export PROVCHART_API_KEY=pc_live_xxxxxxxx

Never commit real keys. Prefer env / MCP env config.

Install & run

From source (this repo)

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

The process speaks MCP over stdio (stays quiet until a client connects).

After publish

npx -y provchart-mcp

Claude Desktop

Edit claude_desktop_config.json:

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

Or with npx (once published):

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

Restart Claude Desktop after saving.

Cursor

mcp.json (project or global):

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

Example prompts

• Use provchart_generate for a midnight theme area chart: Traffic vs Signups, Mon–Sun.

• Generate an SVG line chart of p50/p95 latency for a GitHub README.

• Explain how to inject ProvChart HTML/CSS without a chart library.

Example tool args (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"]
}

Inject the returned CSS into a <style> tag and the HTML into a container. Optional: provchart-runtime for tooltips — not required for paint.

Environment

*Or pass apiKey in the tool arguments (env preferred).

Errors

Project layout

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

Related

• ProvChart — product & builder

• Live demo — multi-chart API batch

• Developer API

• provchart-runtime — optional HTML enhancements

• st-core.fscss — open pure-CSS roots