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

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

1 6 27
calendar_today agoschedule1 min read

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.

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

Site: chart.devtem.org

Docs: chart.devtem.org/docs

Glama.ai


2 Comments

0 votes
1
🔥 Join developers growing publicly
Share your knowledge, build in public, and grow your developer presence with a global community.

More Posts

The Sovereign Vault — A Comprehensive Guide to Protocol-Driven AI

Ken W. Algerverified - Jun 4

MCP Is the USB-C of AI. So Why Are You Plugging Everything In?

Ken W. Algerverified - Jun 10

Just completed another large-scale WordPress migration — and the client left this

saqib_devmorph - Apr 7

I’m a Senior Dev and I’ve Forgotten How to Think Without a Prompt

Karol Modelski - Mar 19

I Wrote a Script to Fix Audible's Unreadable PDF Filenames

snapsynapseverified - Apr 20
chevron_left
1.2k Points34 Badges
12Posts
8Comments
9Connections
A full-stack web developer: Building smart solutions, designing meaningful experiences, and continuo... Show more

Related Jobs

View all jobs →

Commenters (This Week)

2 comments
2 comments
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!