Skip to main content

MCP Setup

Use Chart-Output directly inside Claude Code, Cursor, or Windsurf. Ask your AI to generate a chart and it renders inline — no code required.

Prerequisites

Configure your client

The JSON config is identical across clients — only the file path changes. Pick your editor below, paste the block, and swap in your API key.

// ~/.claude/claude_code_config.json { "mcpServers": { "chart-output": { "command": "npx", "args": ["@chartoutput/mcp"], "env": { "CHART_OUTPUT_API_KEY": "pk_test_YOUR_KEY" } } } }

Claude Code: Replace `pk_test_YOUR_KEY` with your key from the dashboard.

Verify it's working

Restart your editor so it picks up the new MCP server, then ask your AI:

text
Create a bar chart showing Q1 through Q4 revenue: 120k, 145k, 132k, 178k

You should see a chart image rendered inline in the chat. If you get a 401 error, your API key is missing or invalid — double-check the CHART_OUTPUT_API_KEY value in your config file.

What you can ask

Natural language is enough — the MCP server handles chart specs, API calls, and image delivery.

Ask

“Create a bar chart showing Q1 through Q4 revenue: 120k, 145k, 132k, 178k”

You get

Inline bar chart PNG rendered via `render_chart`.

Ask

“Make a line chart of monthly active users from 12k in January to 28k in December”

You get

Inline line chart with labeled axes and a single dataset.

Ask

“Render a dashboard card for API latency with a dark theme, KPI strip, and footer”

You get

Full branded card image via `render_card` — header, KPI row, chart, and footer in one PNG.

Ask

“Chart this CSV of signups by week and pick the best chart type”

You get

AI-generated chart via `render_chart_ai` (Pro or Business API key required).

Package & source