ChartPane

ChartPane

MCP App that renders interactive Chart.js charts inline in Claude's UI. Works with Claude Desktop, ChatGPT, VS Code, Cursor, and any client that supports MCP Apps.

Live instance: mcp.chartpane.com

Features

• 7 chart types: bar, line, area, pie, doughnut, scatter, radar
• Stacked and horizontal bar chart variants
• Multi-chart dashboard grids (up to 4 columns)
• Custom colors or automatic 12-color palette
• Client-side rendering — chart data never stored server-side
• Works with any MCP-compatible client (Claude Desktop, ChatGPT, VS Code, Cursor)

Tools

• render_chart — Render a single chart (bar, line, area, pie, doughnut, scatter, radar, stacked)
• render_dashboard — Render a multi-chart grid layout

Quick Start

Add ChartPane to Claude Desktop via Settings > Connectors > Add custom connector:

https://mcp.chartpane.com/mcp

Or use mcp-remote (requires Node.js):

{
  "mcpServers": {
    "chartpane": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.chartpane.com/mcp"]
    }
  }
}

Usage Examples

1. Bar chart

Prompt: "Create a bar chart of quarterly revenue: Q1 $50k, Q2 $80k, Q3 $120k, Q4 $95k"

Claude calls render_chart with:

{
  "type": "bar",
  "title": "Quarterly Revenue",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{ "label": "Revenue ($k)", "data": [50, 80, 120, 95] }]
  }
}

An interactive bar chart renders inline in the conversation.

2. Pie chart

Prompt: "Show browser market share as a pie chart: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Other 3%"

Claude calls render_chart with:

{
  "type": "pie",
  "title": "Browser Market Share",
  "data": {
    "labels": ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    "datasets": [{ "label": "Share", "data": [65, 19, 8, 5, 3] }]
  }
}

Each slice gets a distinct color from the built-in palette.

3. Multi-chart dashboard

Prompt: "Build a dashboard with monthly active users as a line chart and signups by channel as a bar chart"

Claude calls render_dashboard with:

{
  "title": "Growth Dashboard",
  "charts": [
    {
      "type": "line",
      "title": "Monthly Active Users",
      "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        "datasets": [{ "label": "MAU", "data": [12000, 15000, 18000, 22000, 28000, 35000] }]
      }
    },
    {
      "type": "bar",
      "title": "Signups by Channel",
      "data": {
        "labels": ["Organic", "Referral", "Paid", "Social"],
        "datasets": [{ "label": "Signups", "data": [4500, 3200, 2800, 1500] }]
      }
    }
  ],
  "columns": 2
}

Both charts render side-by-side in a grid layout.

Self-Hosting

ChartPane runs on Cloudflare Workers.

npm install
cp .dev.vars.example .dev.vars    # Configure secrets (optional)
npm run dev                        # Local dev server (port 8787 + sandbox on 3456)
npm run deploy                     # Deploy to Cloudflare Workers

You'll need to create your own KV namespace and D1 database — see comments in wrangler.jsonc.

Development

npm run dev        # wrangler dev + sandbox dev server (localhost:3456)
npm run build      # Type-check (tsc --noEmit) + bundle UI
npm test           # Run all tests (vitest)
npm run test:watch # Watch mode

Architecture

Claude tool calls flow through a thin MCP server that validates input and returns structuredContent. The browser-side UI transforms input into Chart.js configs and renders to canvas. All shared logic (types, validation, colors, config) lives in shared/.

Claude tool call → server.ts (validate) → structuredContent
    → mcp-app.ts (browser) → buildChartConfig() → Chart.js canvas

Privacy

ChartPane logs only request metadata (chart type, title, timestamp). Chart data values are never stored. Charts render entirely client-side in your browser. Full policy: chartpane.com/privacy

Support

• GitHub Issues: github.com/ahmadnassri/chartpane/issues
• Email: [email protected]

License

MIT