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
- npm: provchart-mcp
- GitHub: Figsh/provchart-mcp
- Overview: chart.devtem.org/agents
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  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
