Generate pure CSS charts from Claude (or any MCP client)

#mcp #opensource #provchart #ai

Ask an agent for a chart today and it'll usually hand you a Chart.js config, or some SVG with hand-typed coordinates. Fine to look at in a chat window, but the moment you actually want it somewhere real, a README, a docs page, a landing page, you're back to pasting code into a sandbox, while the real UI still needed JS libs (or a screenshot).

So ProvChart now has an MCP server: the agent calls a tool and gets back real HTML/CSS or SVG, not a sketch of one.

Package

Tools

Tool	Output
`provchart_generate`	`html` + `css`
`provchart_generate_svg`	`svg` + `dataUri`
`provchart_explain`	short notes (no API call)

Paint doesn't need a client chart runtime. The optional provchart-runtime only adds hover/tooltips on HTML charts, nothing required for the chart to just render.

Claude Desktop

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

Key from chart.devtem.org/dashboard.

Prompt that works

Monthly signups: Jan 120, Feb 450, Mar 3200, Apr 8900. SVG for the README.

Values can be real numbers, not squeezed onto a 0–100 scale. Optional min / max if you want a fixed axis instead of auto-scaling.

After the tool returns

HTML: inject css into a <style> tag, html into a container.

SVG: write it to a file and use ![alt](./charts/name.svg) in Markdown. Better than a huge data URI sitting in your README source.

Related automation

If you want charts without chatting to an agent for each one:

provchart-readme-action — JSON config → SVG in CI
provchart-repo-stats — stars / languages → SVG for the README, pulled straight from GitHub's API

Site: chart.devtem.org · Docs: chart.devtem.org/docs

DEV Community