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

Описание и применение

Разработчики получают готовые CSS/HTML или SVG‑диаграммы от агента Claude без необходимости подключать 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.

Источник