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

说明与用途

开发者可以直接获得 CSS/HTML 或 SVG 图表，无需额外的 JavaScript 库，简化文档和网页的嵌入。

问题

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.

结果

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

工作流

• 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.

证据

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

来源

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.

来源