{
  "markdown": "# ChartPane\n\nMCP 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.\n\n**Live instance:** [mcp.chartpane.com](https://mcp.chartpane.com/mcp)\n\n## Features\n\n- 9 chart types: bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar\n- Stacked and horizontal bar chart variants\n- Multi-chart dashboard grids (up to 4 columns)\n- Custom colors or automatic 12-color palette\n- Client-side rendering — chart data never stored server-side\n- Works with any MCP-compatible client (Claude Desktop, ChatGPT, VS Code, Cursor)\n\n## Tools\n\n- **`render_chart`** — Render a single chart (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar, stacked)\n- **`render_dashboard`** — Render a multi-chart grid layout\n\n## Quick Start\n\nAdd ChartPane to Claude Desktop via **Settings > Connectors > Add custom connector**:\n\n```\nhttps://mcp.chartpane.com/mcp\n```\n\nOr use `mcp-remote` (requires Node.js):\n\n```json\n{\n  \"mcpServers\": {\n    \"chartpane\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-remote\", \"https://mcp.chartpane.com/mcp\"]\n    }\n  }\n}\n```\n\n## Usage Examples\n\n### 1. Bar chart\n\n**Prompt:** \"Create a bar chart of quarterly revenue: Q1 $50k, Q2 $80k, Q3 $120k, Q4 $95k\"\n\nClaude calls `render_chart` with:\n\n```json\n{\n  \"type\": \"bar\",\n  \"title\": \"Quarterly Revenue\",\n  \"data\": {\n    \"labels\": [\"Q1\", \"Q2\", \"Q3\", \"Q4\"],\n    \"datasets\": [{ \"label\": \"Revenue ($k)\", \"data\": [50, 80, 120, 95] }]\n  }\n}\n```\n\nAn interactive bar chart renders inline in the conversation.\n\n### 2. Pie chart\n\n**Prompt:** \"Show browser market share as a pie chart: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Other 3%\"\n\nClaude calls `render_chart` with:\n\n```json\n{\n  \"type\": \"pie\",\n  \"title\": \"Browser Market Share\",\n  \"data\": {\n    \"labels\": [\"Chrome\", \"Safari\", \"Firefox\", \"Edge\", \"Other\"],\n    \"datasets\": [{ \"label\": \"Share\", \"data\": [65, 19, 8, 5, 3] }]\n  }\n}\n```\n\nEach slice gets a distinct color from the built-in palette.\n\n### 3. Multi-chart dashboard\n\n**Prompt:** \"Build a dashboard with monthly active users as a line chart and signups by channel as a bar chart\"\n\nClaude calls `render_dashboard` with:\n\n```json\n{\n  \"title\": \"Growth Dashboard\",\n  \"charts\": [\n    {\n      \"type\": \"line\",\n      \"title\": \"Monthly Active Users\",\n      \"data\": {\n        \"labels\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"],\n        \"datasets\": [{ \"label\": \"MAU\", \"data\": [12000, 15000, 18000, 22000, 28000, 35000] }]\n      }\n    },\n    {\n      \"type\": \"bar\",\n      \"title\": \"Signups by Channel\",\n      \"data\": {\n        \"labels\": [\"Organic\", \"Referral\", \"Paid\", \"Social\"],\n        \"datasets\": [{ \"label\": \"Signups\", \"data\": [4500, 3200, 2800, 1500] }]\n      }\n    }\n  ],\n  \"columns\": 2\n}\n```\n\nBoth charts render side-by-side in a grid layout.\n\n## Self-Hosting\n\nChartPane runs on Cloudflare Workers.\n\n```bash\nnpm install\ncp .dev.vars.example .dev.vars    # Configure secrets (optional)\nnpm run dev                        # Local dev server (port 8787 + sandbox on 3456)\nnpm run deploy                     # Deploy to Cloudflare Workers\n```\n\nYou'll need to create your own KV namespace and D1 database — see comments in `wrangler.jsonc`.\n\n## Development\n\n```bash\nnpm run dev        # wrangler dev + sandbox dev server (localhost:3456)\nnpm run build      # Type-check (tsc --noEmit) + bundle UI\nnpm test           # Run all tests (vitest)\nnpm run test:watch # Watch mode\n```\n\n## Architecture\n\nClaude 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/`.\n\n```\nClaude tool call → server.ts (validate) → structuredContent\n    → mcp-app.ts (browser) → buildChartConfig() → Chart.js canvas\n```\n\n## Privacy\n\nChartPane 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)\n\n## Support\n\n- GitHub Issues: [github.com/ahmadnassri/chartpane/issues](https://github.com/ahmadnassri/chartpane/issues)\n- Email: [support@chartpane.com](mailto:support@chartpane.com)\n\n## License\n\nMIT\n",
  "bytes": 4301,
  "sha": "b7c69b60615e7e46bd8ffac749d6c0da15a44e4f378715cfa6f6094ee1579670",
  "repo_slug": "ahmadsl/chartpane",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_ahmadsl_chartpane_7059b7c1/readme"
}