Chart-Output MCP Server
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). Supportsline,bar,pie,doughnut,radar, andpolarArea.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 "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., "@Chart-Output MCP Servershow 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.
Chart-Output MCP Server
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.
What it produces
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.)
Examples
Ready-to-use chart configs in /examples.
Copy any file, swap in your data, POST to the API.
Install
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.
Tools
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.
Example
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.
API Key
Sign up at chart-output.com
Go to Dashboard → API Keys → Create key
Add it to your
mcp.jsonas shown above
Free trial includes 500 renders. No credit card required.
Glama
Registry listing and quality card:
Links
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/jgaddy95/chart-output-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server