面向 ProvChart 的 MCP 服务器 — 智能体可生成纯 CSS 图表（HTML + CSS）或 SVG，用于 README/文档。
无需 Chart.js。绘制时无需客户端图表运行时。与你的仪表盘使用的 JSON 相同。
npm |
|
API | |
Keys | |
License | MIT |
工具 | 输出 |
| 用于网页的 HTML + CSS |
| 用于 Markdown / 文档的 SVG（+ data URI） |
| 简短的注入 / SVG / 运行时 / 错误说明（不调用 API） |
智能体调用这些工具，而不是自行编写 Chart.js 代码片段。
Related MCP server: Charted
Node.js 18+（原生 fetch）
ProvChart API 密钥 — 免费注册账户包含每月有限的测试生成额度
export PROVCHART_API_KEY=pc_live_xxxxxxxx切勿提交真实密钥。建议使用环境变量 / MCP env 配置。
cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.js该进程通过 stdio 使用 MCP 协议（在客户端连接之前保持静默）。
npx -y provchart-mcp编辑 claude_desktop_config.json：
{
"mcpServers": {
"provchart": {
"command": "node",
"args": ["/absolute/path/to/provchart-mcp/src/index.js"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}或使用 npx（发布后）：
{
"mcpServers": {
"provchart": {
"command": "npx",
"args": ["-y", "provchart-mcp"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}保存后重启 Claude Desktop。
mcp.json（项目级或全局）：
{
"mcpServers": {
"provchart": {
"command": "node",
"args": ["/absolute/path/to/provchart-mcp/src/index.js"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}使用 provchart_generate 生成午夜主题面积图：流量 vs 注册量，周一至周日。
为 GitHub README 生成 p50/p95 延迟的 SVG 折线图。
说明如何在不使用图表库的情况下注入 ProvChart HTML/CSS。
provchart_generate）{
"type": "area",
"theme": "midnight",
"series": [
{ "name": "Traffic", "color": "#4fd8c4", "points": [30, 45, 40, 60, 55, 70, 65] },
{ "name": "Signups", "color": "#f0a860", "points": [8, 12, 11, 18, 16, 22, 20] }
],
"axisX": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}将返回的 CSS 注入 <style> 标签，将 HTML 注入容器。可选：provchart-runtime 用于提示框 — 绘制时非必需。
变量 | 是否必需 | 说明 |
| 是* | API 密钥（ |
| 否 | 默认 |
*也可以在工具参数中传入 apiKey（推荐使用环境变量）。
代码 / 消息 | 含义 |
缺少 API 密钥 | 请设置 |
| 密钥无效或已被吊销 |
| 配额已用尽（HTML 与 SVG 共享额度池） |
| 当前套餐不包含此功能 |
provchart-mcp/
package.json
README.md
src/
index.js # MCP stdio server
client.js # ProvChart HTTP helper
tools.js # Tool schemas + handlersProvChart — 产品与构建器
在线演示 — 多图表 API 批量请求
provchart-runtime — 可选的 HTML 增强
st-core.fscss — 开源纯 CSS 基础
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 |
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.
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 |
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.
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 |
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0provchart_explainprovchart_generateprovchart_generate_svgScored across 3 tools
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.
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.
Generate production-ready chart code (Recharts, Chart.js, ECharts, Plotly) from a prompt.
Renders interactive Chart.js charts and dashboards inline in AI conversations.