provchart-mcp
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@provchart-mcpGenerate an SVG line chart of p50/p95 latency for a GitHub README."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
provchart-mcp
MCP server for ProvChart — generate pure-CSS charts (HTML/CSS or SVG) from any MCP-aware agent. No Chart.js, no client-side chart runtime required to paint.
What it does
Three tools, exposed over stdio:
Tool | Returns | Use for |
|
| Web pages, dashboards, anywhere you can inject markup |
|
| READMEs, docs, Markdown, static exports |
| Integration notes | No API call — quick reference for injection, ranges, runtime, errors |
Charts compile to real CSS (clip-path, custom properties) or real <svg> markup. Nothing runs client-side unless you opt into the optional provchart-runtime for hover tooltips and reveal animations.
Related MCP server: ECharts ChartPage MCP Server
Install
npm install -g provchart-mcpOr run it directly without installing, via npx (see config below).
Setup
You'll need an API key from the ProvChart dashboard → Developer API.
Claude Desktop
Add to your claude_desktop_config.json:
{
"mcpServers": {
"provchart": {
"command": "npx",
"args": ["-y", "provchart-mcp"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}Other MCP clients
Any client that supports stdio servers works the same way — point it at provchart-mcp (or node src/index.js if running from a local clone) and set PROVCHART_API_KEY in the environment.
You can also pass apiKey per-call as a tool argument instead of using the env var, if a given call needs to use a different key.
Usage
Once connected, just ask your agent for a chart:
Generate a line chart of monthly signups: Jan 120, Feb 450, Mar 3200, Apr 8900, May 15400. Give me the SVG for my README.
The agent calls provchart_generate_svg, gets back real SVG markup, and can write it straight to a file.
Chart types
line, area, bar, stackedbar, hbar, scatter, combo, gauge.
Value ranges
Charts auto-scale to your data by default — no need to pre-normalize anything to 0–100. Pass min / max if you want the axis pinned instead. Ask the server directly:
Use provchart_explain with topic "ranges"
Example payload
{
"type": "bar",
"series": [
{ "name": "2025", "color": "#8b7bff", "points": [40, 55, 48, 70] },
{ "name": "2026", "color": "#4fd8c4", "points": [35, 50, 62, 58] }
],
"axisX": ["Q1", "Q2", "Q3", "Q4"],
"theme": "midnight"
}Errors
Code | Meaning |
| Key missing, revoked, or malformed |
| Plan inactive |
| Plan quota used up for the month |
HTML and SVG generation share the same monthly quota.
Links
License
MIT
Available Tools
3 toolsprovchart_explainA
Return short integration instructions for ProvChart (inject HTML/CSS, SVG usage, runtime, ranges). No API call.
| Name | Required | Description | Default |
|---|---|---|---|
| topic | No | inject | svg | runtime | errors | ranges | overview |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden o disclose behavior. It explicitly says 'No API call', signaling a local, non-external operation, and specifies that the output is 'short integration instructions'. This is valuable transparency, though it does not address default behavior when the optional topic is omitted.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One compact sentence front-loads the action and includes the key behavioral caveat. Every word earns its place; no filller.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter tool with no output schema, the description covers the return type and the critical non-API behavior. A brief note on what happens when topic is omitted would make it fully complete, hence not a 5.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides 100% coverage by listing the allowed topic values. The description adds a little meaning (inject → HTML/CSS, SVG usage, runtime, ranges) but omits 'errors' and 'overview' and says nothing about the default when the optional parameter is absent.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: 'Return short integration instructions for ProvChart'. The 'No API call' clause distinguishes it from sibling generation tools (provchart_generate, provchart_generate_svg), and the parenthetical lists the scope o topics.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Clear context for when to use: when short ProvChart integration instructions are needed. However, it does not explicitly name sibling tools or state when not to use this tool, so it stops short of a full when/when-not explanation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
provchart_generateA
Generate a ProvChart pure CSS chart (HTML + CSS). No Chart.js. Inject css into a tag and html into a container. Prefer this for web pages and dashboards.
| Name | Required | Description | Default |
|---|---|---|---|
| max | No | Fix the high end of the value range. Omit to auto-scale from the highest value in the data (or the highest stacked total when stacked is true). | |
| min | No | Fix the low end of the value range (line/area/bar/scatter/hbar/gauge). Omit to auto-scale from the data (defaults to 0 unless values go negative). | |
| grid | No | Show background gridlines (default true). | |
| size | No | Gauge size px | |
| type | Yes | Chart type: line, area, bar, stackedbar, hbar, scatter, combo, gauge | |
| axisX | No | X-axis labels | |
| axisY | No | Show numeric Y-axis labels (default true). Set false to hide them. | |
| label | No | Gauge center label | |
| theme | No | dark | light | midnight | |
| width | No | Chart width (SVG default 640, max 1200) | |
| apiKey | No | Optional override; prefer PROVCHART_API_KEY env | |
| height | No | Chart height (SVG default 320, max 800) | |
| legend | No | Show the series legend (default true). | |
| series | Yes | Series list. Use points[] for line/area/bar; value for gauge. Optional per-series type for combo. | |
| stacked | No | For type: bar — stack series instead of grouping them side by side. | |
| thickness | No | Gauge ring thickness |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral burden. It usefully discloses that output must be injected (CSS into a <style> tag, HTML into a container), which is a genuine behavioral trait. However, it omits that the tool appears to make an external API call (evidenced by the apiKey parameter), and it doesn't describe the return value structure or failure modes.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, each earning its place: the core action, the implementation constraint (no Chart.js, injection targets), and the usage preference. The most decision-relevant information is front-loaded and there is zero filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 16-parameter tool with no annotations and no output schema, the description is under-specified. It doesn't define the exact return contract (string? object with separate css/html fields?), doesn't mention the API-key/network dependency, and doesn't address the chart-vs-gauge duality that the schema implies. The injection hint partially compensates, but significant operational details an agent needs to invoke the tool correctly are missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3 and the schema already documents all 16 parameters. The description adds no parameter-specific semantics beyond the schema — its 'pure CSS' and injection context only broadly frame how output dimensions like width/height are consumed. This meets the baseline but doesn't exceed it.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource ('Generate a ProvChart pure CSS chart (HTML + CSS)') and clarifies the implementation mode with 'No Chart.js' and the injection instructions. It clearly signals the CSS-vs-SVG distinction against provchart_generate_svg, but does so implicitly by contrasting 'pure CSS' with the sibling's name rather than explicitly naming the alternative.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Prefer this for web pages and dashboards' provides clear context for when this tool is the right choice. However, it offers no exclusions — it never states when to choose provchart_generate_svg instead (e.g., for static images, email, or non-DOM contexts).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
provchart_generate_svgA
Generate a ProvChart SVG chart for README/docs/Markdown. Returns svg markup and optional dataUri. Prefer committing .svg files over huge data URIs on GitHub.
| Name | Required | Description | Default |
|---|---|---|---|
| max | No | Fix the high end of the value range. Omit to auto-scale from the highest value in the data (or the highest stacked total when stacked is true). | |
| min | No | Fix the low end of the value range (line/area/bar/scatter/hbar/gauge). Omit to auto-scale from the data (defaults to 0 unless values go negative). | |
| grid | No | Show background gridlines (default true). | |
| size | No | Gauge size px | |
| type | Yes | Chart type: line, area, bar, stackedbar, hbar, scatter, combo, gauge | |
| axisX | No | X-axis labels | |
| axisY | No | Show numeric Y-axis labels (default true). Set false to hide them. | |
| label | No | Gauge center label | |
| theme | No | dark | light | midnight | |
| width | No | Chart width (SVG default 640, max 1200) | |
| apiKey | No | Optional override; prefer PROVCHART_API_KEY env | |
| height | No | Chart height (SVG default 320, max 800) | |
| legend | No | Show the series legend (default true). | |
| series | Yes | Series list. Use points[] for line/area/bar; value for gauge. Optional per-series type for combo. | |
| stacked | No | For type: bar — stack series instead of grouping them side by side. | |
| thickness | No | Gauge ring thickness |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden. It usefully discloses the return payload (svg markup and optional dataUri) and hints at data URI size concerns. But it does not mention API/network dependencies, the PROVCHART_API_KEY environment prerequisite, error behavior, or any side effects, which are relevant for a 16-parameter generation tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with no filler. The main purpose is front-loaded, and the data URI guidance is a meaningful, non-redundant addition. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is complex (16 parameters, no output schema, no annotations) and the description is minimal. It explains the output format and an important usage consideration, but omits practical prerequisites like the API key environment variable and expected response structure, which would help an agent use it reliably end-to-end.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the parameters are fully documented in the schema. The description itself adds no parameter details, which matches the baseline of 3; it does not need to compensate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states a specific verb and resource: 'Generate a ProvChart SVG chart' for README/docs/Markdown, and it discloses the return format (svg markup and optional dataUri). It does not explicitly name or differentiate from the sibling provchart_generate, so it stops short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'for README/docs/Markdown' gives a clear intended context, and 'Prefer committing .svg files over huge data URIs on GitHub' offers practical output-handling advice. However, it provides no explicit when-to-use vs. provchart_generate or exclusions, leaving tool selection largely to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
3 tool updates
v1.0.0- First observed
provchart_explain - First observed
provchart_generate - First observed
provchart_generate_svg
TDQS
Each tool has a clearly distinct purpose: HTML/CSS chart generation, SVG chart generation, and usage instructions. Even though generate and generate_svg are similarly named, their output formats and target use cases are explicitly different.
All tool names use a consistent provchart_ prefix followed by a simple snake_case verb or verb_noun pattern. The naming scheme is predictable and easy to navigate.
Three tools is appropriately minimal for a focused chart-generation server. Each tool covers a distinct need and none feel redundant or unnecessary.
The server covers both major ProvChart output formats (HTML/CSS for web and SVG for docs) plus integration guidance. For its stated scope, there are no obvious missing operations or dead ends.
Maintenance
Related MCP Connectors
Create, inspect, manage, and render charts and data visualizations as SVG/PNG or interactive embeds.
Diagrams, badges, charts and QR codes as plain image URLs you can paste into Markdown.
- mcpOAuthcom.slickfast
Render 47 chart types and tiled dashboards as PNG/SVG. Deterministic, no headless browser.
Generate production-ready chart code (Recharts, Chart.js, ECharts, Plotly) from a prompt.
Related MCP Servers
- AlicenseAqualityCmaintenanceGenerates Apache ECharts diagrams and charts with AI dynamically, supporting all ECharts features and exporting to png, svg, and option formats.18442263MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to generate safe, runnable HTML chart pages from structured JSON data using Apache ECharts. It provides tools for chart type recommendation, page generation, validation, and patching with controlled, deterministic output.12MIT
- AlicenseAqualityAmaintenanceZero-dependency charts for Python and AI agents. SVG and PNG, 15 chart types, a one-line MCP server, and a Claude skill.411MIT
- AlicenseAqualityBmaintenanceEnables AI agents to create data visualizations like bar charts, line charts, pie charts, scatter plots, and histograms, returning inline SVG or PNG files.5MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Figsh/provchart-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server