home / mcp / chartpane mcp server

ChartPane MCP Server

Renders interactive Chart.js charts inline in Claude’s UI across supported MCP clients with client-side rendering.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "ahmadsl-chartpane": {
      "url": "https://mcp.chartpane.com/mcp"
    }
  }
}

ChartPane is an MCP App that renders interactive Chart.js charts inline in Claude’s UI, enabling you to embed charts directly in conversations across compatible clients with client-side rendering for privacy and speed.

How to use

You can access ChartPane through supported MCP clients such as Claude Desktop, Claude Chat, VS Code, Cursor, and other MCP-enabled environments. Use the provided MCP endpoints or the local CLI workflow to render charts in your conversations. You’ll create chart configurations that ChartPane translates into Chart.js visualizations displayed inline in your chat.

How to install

Prerequisites: ensure you have Node.js installed if you plan to use the npm/npx workflow. You will also need an MCP-compatible client to connect to ChartPane.

Choose one of the available connection methods shown below and configure your MCP client accordingly. The HTTP method uses a remote server URL, while the stdio method runs a local command that serves the MCP endpoint.

{
  "mcpServers": {
    "chartpane_http": {
      "type": "http",
      "url": "https://mcp.chartpane.com/mcp",
      "args": []
    },
    "chartpane_mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.chartpane.com/mcp"]
    }
  }
}

Examples and usage

The following examples illustrate how to request charts from ChartPane. Each example shows how Claude or another MCP client would call the available tools to render charts inline.

Single chart usage lets you render a standalone chart in the conversation. You can specify the chart type, title, and data, and ChartPane will render the chart inline within the chat.

Self-Hosting

ChartPane runs on Cloudflare Workers. To run locally for development, install dependencies, and start the local dev server, follow these steps.

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

Privacy and security

ChartPane renders charts entirely client-side in your browser. Chart data values are not stored on the server, and only request metadata may be logged for debugging or analytics. This setup helps protect your data while enabling interactive visualizations.

Support and licensing

If you need help, you can reach out via the supported contact channels for ChartPane. The project is provided under the MIT license.

Available tools

render_chart

Render a single chart (bar, line, area, pie, doughnut, scatter, radar, stacked) and display it inline in the conversation.

render_dashboard

Render a multi-chart grid layout to show multiple charts side-by-side in a single view.