Servidor MCP para ProvChart — los agentes generan gráficos de CSS puro (HTML + CSS) o SVG para README/docs.
Sin Chart.js. No se requiere runtime de gráficos en el cliente para el renderizado. El mismo JSON que usa tu panel.
npm |
|
API | |
Keys | |
License | MIT |
Tool | Output |
| HTML + CSS para páginas web |
| SVG (+ data URI) para Markdown / documentación |
| Notas breves de inyección / SVG / runtime / errores (sin llamada a la API) |
Los agentes llaman a estas herramientas en lugar de inventar fragmentos de Chart.js.
Related MCP server: Charted
Node.js 18+ (fetch nativo)
Clave de API de ProvChart — las cuentas gratuitas registradas incluyen generaciones de prueba mensuales limitadas
export PROVCHART_API_KEY=pc_live_xxxxxxxxNunca confirmes claves reales. Prefiere la configuración de env / MCP env.
cd provchart-mcp
npm install
export PROVCHART_API_KEY=pc_live_xxxxxxxx
node src/index.jsEl proceso habla MCP a través de stdio (permanece en silencio hasta que un cliente se conecta).
npx -y provchart-mcpEdita claude_desktop_config.json:
{
"mcpServers": {
"provchart": {
"command": "node",
"args": ["/absolute/path/to/provchart-mcp/src/index.js"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}O con npx (una vez publicado):
{
"mcpServers": {
"provchart": {
"command": "npx",
"args": ["-y", "provchart-mcp"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}Reinicia Claude Desktop después de guardar.
mcp.json (de proyecto o global):
{
"mcpServers": {
"provchart": {
"command": "node",
"args": ["/absolute/path/to/provchart-mcp/src/index.js"],
"env": {
"PROVCHART_API_KEY": "pc_live_xxxxxxxx"
}
}
}
}Usa provchart_generate para un gráfico de área con tema midnight: Tráfico vs Registros, de lunes a domingo.
Genera un gráfico de líneas SVG de la latencia p50/p95 para un README de GitHub.
Explica cómo inyectar HTML/CSS de ProvChart sin una librería de gráficos.
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"]
}Inyecta el CSS devuelto en una etiqueta <style> y el HTML en un contenedor. Opcional: provchart-runtime para tooltips — no es necesario para el renderizado.
Variable | Requerida | Descripción |
| Sí* | Clave de API ( |
| No | Por defecto |
*O pasa apiKey en los argumentos de la herramienta (se prefiere env).
Código / mensaje | Significado |
Falta la clave de API | Establece |
| Clave incorrecta o revocada |
| Cuota agotada (HTML + SVG comparten el mismo fondo) |
| El plan no incluye esta capacidad |
provchart-mcp/
package.json
README.md
src/
index.js # MCP stdio server
client.js # ProvChart HTTP helper
tools.js # Tool schemas + handlersProvChart — producto y constructor
Demo en vivo — lote de API de múltiples gráficos
provchart-runtime — mejoras opcionales de HTML
st-core.fscss — raíces CSS puras abiertas
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.
JSON in. Chart or Page out. Same picture forever. Scientific plots included.
Generate production-ready chart code (Recharts, Chart.js, ECharts, Plotly) from a prompt.
