Chart Output Server

MIT License npm

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
list_chart_output_examples	Shipped example spec ids — use before hand-writing render_card JSON
get_chart_example	Return full examples/<id>.json text (valid API body shape)
render_chart	Chart.js-style labels/datasets → inline image (optional extensions for partial dashboard fields)
render_chart_url	Same as render_chart → CDN URL instead of bytes
render_card	Full card composition JSON → inline image (header, KPI strip, footer, theme, backgroundColor, etc.); spec is POSTed verbatim to /api/v1/render
render_card_url	Same full card composition as render_card → CDN URL instead of bytes
render_chart_ai	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

1. Sign up at chart-output.com
2. Go to Dashboard → API Keys → Create key
3. Add it to your mcp.json as shown above

Free trial includes 500 renders. No credit card required.

Glama

Registry listing and quality card:

chart-output-mcp MCP server

Links

• Chart-Output docs
• npm package
• Chart-Output pricing
• Glama MCP listing
• License