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

Description and use

Developers receive ready‑to‑use CSS/HTML or SVG charts from Claude without needing JS libraries, simplifying embedding in docs and web pages.

Problem

Developers need ready-to-use charts for documentation or web pages but existing agent outputs (Chart.js configs or SVG sketches) require manual integration and JavaScript dependencies.

Outcome

Developers can embed fully styled charts directly into documentation or web pages without additional JS libraries, streamlining the workflow and improving maintainability.

Workflow

• 1. Install provchart-mcp via npm or run via npx.
• 2. Configure MCP server in Claude Desktop with API key and command settings.
• 3. Prompt the agent with data and desired format (e.g., "SVG for the README").
• 4. Receive tool output: either HTML/CSS or SVG with data URI.
• 5. For HTML: inject CSS into a <style> tag and HTML into a container in the target page.
• 6. For SVG: write the SVG to a file and reference it in Markdown with .
• 7. Optionally use provchart-runtime for hover/tooltips if desired.
• 8. For automated CI generation, use provchart-readme-action or provchart-repo-stats to produce SVGs from JSON or GitHub API data.

Evidence

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

Source

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.

Source