@charta/mcp

Charta MCP

Charta MCP is a Model Context Protocol server that lets AI coding agents generate beautiful, presentation-ready charts (SVG + PNG) with zero setup.

Install & Run

npx @charta/mcp

MCP Configuration

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

Cursor

Add to .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "charta": {
      "command": "npx",
      "args": ["@charta/mcp"]
    }
  }
}

Tools

generate_chart

Generate a chart and return an SVG string.

Input:

{
  "type": "waterfall",
  "title": "Revenue Bridge Q1→Q2",
  "data": [
    {"label": "Q1 Revenue", "value": 500, "isTotal": true},
    {"label": "+ New Deals", "value": 120},
    {"label": "- Churn", "value": -45},
    {"label": "- Discounts", "value": -30},
    {"label": "Q2 Revenue", "value": 545, "isTotal": true}
  ],
  "style": {"theme": "dark", "accentColor": "#7C5CFC"}
}

Output:

{
  "chartId": "chart_1234567890_abc123",
  "type": "waterfall",
  "svg": "<svg ...>...</svg>"
}

list_chart_types

List all supported chart types with descriptions and data shapes.

No input required.

Output: Array of { type, description, dataShape, example }

get_chart_schema

Get the full JSON schema for a specific chart type.

Input: { "type": "waterfall" }

Output: JSON Schema object

save_chart

Save a chart to disk as SVG or PNG.

Input:

{
  "chartId": "chart_1234567890_abc123",
  "outputPath": "/tmp/revenue-bridge.png",
  "format": "png"
}

Output: { "path": "/tmp/revenue-bridge.png", "bytes": 48291 }

describe_chart

Given your data and intent, get a chart type recommendation.

Input:

{
  "data": [{"label": "Q1", "value": 100}, {"label": "Q2", "value": 120}],
  "context": "Show revenue growth over quarters"
}

Output:

{
  "recommended": "line",
  "reason": "Time series context — line chart is the clearest for continuous data.",
  "alternatives": ["area", "bar"]
}

Supported Chart Types

Type	Description	Best For
bar	Vertical bars	Comparing values across categories
grouped-bar	Side-by-side bars	Comparing multiple series per category
stacked-bar	Stacked bars	Composition + total across categories
waterfall	Floating bars with connectors	Financial bridges, P&L, variance analysis
line	Connected line	Trends, time series
area	Filled area under line	Volume/magnitude of trends
pie	Circular proportions	Part-to-whole (≤6 categories)
donut	Pie with center metric	Part-to-whole + total callout
scatter	X-Y points	Correlation between two variables
bubble	X-Y points + size	Three-variable relationships
gantt	Horizontal timeline bars	Project schedules, task durations
mekko	Variable-width stacked bars	Market share, segment analysis
radar	Spider/web chart	Multi-dimensional profiles
heatmap	Color-coded grid	Patterns across two categorical dimensions

Curl Examples

Note: These show the MCP JSON-RPC protocol. In practice your agent calls the tools directly.

List tools

echo '{"jsonrpc":"2.0","method":"tools/list","params":{},"id":1}' | npx @charta/mcp

Generate a bar chart

echo '{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "generate_chart",
    "arguments": {
      "type": "bar",
      "title": "Monthly Sales",
      "data": [
        {"label": "Jan", "value": 120},
        {"label": "Feb", "value": 180},
        {"label": "Mar", "value": 150},
        {"label": "Apr", "value": 210}
      ]
    }
  },
  "id": 2
}' | npx @charta/mcp

Save chart to PNG

echo '{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "save_chart",
    "arguments": {
      "chartId": "chart_1234567890_abc123",
      "outputPath": "/tmp/sales.png",
      "format": "png"
    }
  },
  "id": 3
}' | npx @charta/mcp

Get chart recommendation

echo '{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "describe_chart",
    "arguments": {
      "data": [{"label": "A", "value": 30}, {"label": "B", "value": 45}],
      "context": "market share breakdown"
    }
  },
  "id": 4
}' | npx @charta/mcp

Styling

All charts support a style object:

{
  "style": {
    "theme": "dark",
    "accentColor": "#7C5CFC",
    "fontFamily": "Inter, sans-serif",
    "width": 800,
    "height": 500,
    "showGrid": true,
    "showLegend": true,
    "showValues": true
  }
}

Default theme is dark (#0a0a0a background, #7C5CFC accent, white text).

Links

• Website: getcharta.ai
• Issues: github.com/charta-ai/charta-mcp