Meta Agent Tools
PT

Back to the catalog

ChartPane

Renders interactive Chart.js charts and dashboards inline in AI conversations.

Open source Repository Open in the app JSON README (API)

About

Renders interactive Chart.js charts and dashboards inline in AI conversations.

Details

Kind
MCP servers
Topic
No topic detected
Publisher
ahmadsl
Origin
official
Category
ferramentas
Transport
http
Version
1.0.0
Stars
1
Forks
1
Last push
2026-03-04T09:53:55Z
Repository state
ativo
Language
HTML
License
MIT
Added
2026-08-29 03:02:23
Updated
2026-08-29 03:02:23
Origin id
io.github.ahmadsl/chartpane

README

# 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](https://mcp.chartpane.com/mcp)

## Features

- 9 chart types: bar, line, area, pie, doughnut, polarArea, bubble, 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, polarArea, bubble, 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):

```json
{
  "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:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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.

```bash
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

```bash
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](https://chartpane.com/privacy)

## Support

- GitHub Issues: [github.com/ahmadnassri/chartpane/issues](https://github.com/ahmadnassri/chartpane/issues)
- Email: [support@chartpane.com](mailto:support@chartpane.com)

## License

MIT

More