This server enables AI agents to generate charts and dashboard cards as images directly from structured data or natural language.
render_chart: Generate an inline chart image from a Chart.js-style JSON spec (type, labels, datasets). Supports line, bar, pie, doughnut, radar, and polarArea.
render_chart_url: Same as above, but returns a stable CDN URL for embedding in HTML or emails.
render_chart_ai: Create a chart from a plain-English description and optional raw data (JSON or CSV); the AI builds the spec automatically. (Requires a Pro/Business API key.)
render_card: Render a full dashboard card with header, KPI strip, footer, and custom theme from a JSON spec.
list_chart_output_examples / get_chart_example: Browse and retrieve built-in example specs to use as templates.
Output formats: PNG (default), JPEG, WebP, SVG (where applicable). Width, height, and dataset styling (colors, border radius) are configurable.
Free tier: 500 renders included with a free API key.
Allows rendering charts as PNG, SVG, or WebP images using Chart.js specifications, with tools for generating charts from natural language descriptions and data.
Click on "Deploy 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., "@Chart-Output MCP Server show me a bar chart of monthly sales data"
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.
Render charts as PNG, SVG, or WebP images directly from Claude, Cursor, Windsurf, or any MCP-compatible AI agent.
Ask your AI: "Generate a bar chart showing Q1–Q4 revenue" — it calls Chart-Output and returns the image inline.
Ask your AI agent to generate a chart. This is what comes back.
(If the image does not load in your viewer, open the file on GitHub.)
Related MCP server: Quick Chart MCP Server
Ready-to-use chart configs in /examples.
Copy any file, swap in your data, POST to the API.
Add to your mcp.json:
{
"mcpServers": {
"chart-output": {
"command": "npx",
"args": ["@chartoutput/mcp"],
"env": {
"CHART_OUTPUT_API_KEY": "pk_test_YOUR_KEY"
}
}
}
}Get a free API key at chart-output.com — no credit card required.
Tool | Description |
| Shipped example spec ids — use before hand-writing |
| Return full |
| Chart.js-style labels/datasets → inline image (optional |
| Same as |
| Full card composition JSON → inline image (header, KPI strip, footer, theme, |
| Same full card composition as |
| Natural language + data → image (Pro/Business key required) |
MCP resources also expose the same files as application/json at chart-output://examples/<id> (e.g. mrr-breakdown). Prefer get_chart_example or a resource read over guessing the schema.
Once installed, just ask your AI agent:
"Create a line chart showing monthly active users growing from 12k in January to 28k in December"
The agent calls render_chart, render_card, or render_chart_ai and returns
the image directly in chat. No code required. Use render_card for branded dashboard layouts (dark theme, KPI row, footer), or render_card_url when you need an openable/shareable link.
Sign up at chart-output.com
Go to Dashboard → API Keys → Create key
Add it to your mcp.json as shown above
Free trial includes 500 renders. No credit card required.
Registry listing and quality card:
Render a chart from a Chart.js JSON specification. Returns the chart as an inline image. Supports line, bar, pie, doughnut, radar, and polarArea chart types.
Inputs: type (required), labels (required), datasets (required), width, +3 more.
Generate a chart from a natural language description and optional raw data. Chart-Output's AI layer builds the chart spec automatically. Requires a Pro or Business API key.
Inputs: description (required), data, width, height, +1 more.
Render a chart and return a CDN URL instead of image bytes. Use this when you need a stable URL to embed in HTML, email, or pass to another tool. Same inputs as render_chart.
Inputs: type (required), labels (required), datasets (required), width, +3 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 3 tools
The three tools have clearly distinct purposes: render_chart for direct JSON specification rendering, render_chart_ai for AI-generated charts from natural language, and render_chart_url for URL-based output. However, render_chart and render_chart_url share the same input format, which could cause minor confusion about when to use each, though their different outputs (inline image vs. URL) help differentiate them.
All tool names follow a consistent verb_noun pattern with 'render_chart' as the base, extended with suffixes (_ai, _url) to indicate variations. This predictable naming makes it easy for an agent to understand the tool relationships and select the appropriate one based on the suffix.
With only 3 tools, this server is well-scoped for its purpose of chart rendering. Each tool serves a distinct use case (direct rendering, AI generation, URL output), and there are no extraneous tools. The count is appropriate for covering the core functionalities without being overwhelming or insufficient.
The tool set covers the main chart rendering workflows: direct specification, AI-assisted generation, and URL-based output. A minor gap is the lack of tools for chart editing, deletion, or management (e.g., updating or deleting rendered charts), but for a rendering-focused server, the provided tools are sufficient for most agent tasks.
Renders interactive Chart.js charts and dashboards inline in AI conversations.
Renders interactive Chart.js charts and dashboards inline in AI conversations. Supports bar, line, area, pie, doughnut, scatter, and radar charts with multi-chart dashboard grids.
Charts and dashboards as images for AI agents. No browser, same data same bytes. Local and free.
Create, inspect, manage, and render charts and data visualizations as SVG/PNG or interactive embeds.
