Skip to main content
Glama

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

provchart_generate

html + css

Web pages, dashboards, anywhere you can inject markup

provchart_generate_svg

svg + dataUri

READMEs, docs, Markdown, static exports

provchart_explain

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-mcp

Or 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

INVALID_API_KEY

Key missing, revoked, or malformed

SUBSCRIPTION_REQUIRED

Plan inactive

MONTHLY_LIMIT_REACHED

Plan quota used up for the month

HTML and SVG generation share the same monthly quota.

License

MIT

Available Tools

3 tools
provchart_explainA

Return short integration instructions for ProvChart (inject HTML/CSS, SVG usage, runtime, ranges). No API call.

ParametersJSON Schema
NameRequiredDescriptionDefault
topicNoinject | svg | runtime | errors | ranges | overview

TDQS

A4.2/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
maxNoFix 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).
minNoFix 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).
gridNoShow background gridlines (default true).
sizeNoGauge size px
typeYesChart type: line, area, bar, stackedbar, hbar, scatter, combo, gauge
axisXNoX-axis labels
axisYNoShow numeric Y-axis labels (default true). Set false to hide them.
labelNoGauge center label
themeNodark | light | midnight
widthNoChart width (SVG default 640, max 1200)
apiKeyNoOptional override; prefer PROVCHART_API_KEY env
heightNoChart height (SVG default 320, max 800)
legendNoShow the series legend (default true).
seriesYesSeries list. Use points[] for line/area/bar; value for gauge. Optional per-series type for combo.
stackedNoFor type: bar — stack series instead of grouping them side by side.
thicknessNoGauge ring thickness

TDQS

A3.6/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines4/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
maxNoFix 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).
minNoFix 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).
gridNoShow background gridlines (default true).
sizeNoGauge size px
typeYesChart type: line, area, bar, stackedbar, hbar, scatter, combo, gauge
axisXNoX-axis labels
axisYNoShow numeric Y-axis labels (default true). Set false to hide them.
labelNoGauge center label
themeNodark | light | midnight
widthNoChart width (SVG default 640, max 1200)
apiKeyNoOptional override; prefer PROVCHART_API_KEY env
heightNoChart height (SVG default 320, max 800)
legendNoShow the series legend (default true).
seriesYesSeries list. Use points[] for line/area/bar; value for gauge. Optional per-series type for combo.
stackedNoFor type: bar — stack series instead of grouping them side by side.
thicknessNoGauge ring thickness

TDQS

A3.5/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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.

  1. 3 tool updatesv1.0.0
    • First observedprovchart_explain
    • First observedprovchart_generate
    • First observedprovchart_generate_svg

TDQS

A4.1/5.0
Disambiguation5/5

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.

Naming Consistency5/5

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.

Tool Count5/5

Three tools is appropriately minimal for a focused chart-generation server. Each tool covers a distinct need and none feel redundant or unnecessary.

Completeness5/5

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

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

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