ChartPane para Claude Desktop

Claude Desktop tiene soporte nativo para MCP Apps, lo que significa que los gráficos de ChartPane se muestran directamente en tu conversación. Sin ventanas emergentes, sin ventanas separadas, sin capturas de pantalla.

Por qué Claude Desktop

Claude Desktop is the first client that supported MCP Apps with inline rendering. When you ask Claude to create a chart, ChartPane delivers it as structured content that Claude Desktop renders natively in the chat thread. The result is a real Chart.js chart you can interact with, not a static image.

  • Inline rendering — charts appear directly in the conversation flow
  • Light and dark mode — charts automatically match your system theme
  • Multi-chart dashboards — render up to 6 charts in a single grid layout
  • Interactive — hover for tooltips, see data labels, resize with the window
  • No dependencies — the custom connector method requires no additional software

Configuración: Conector personalizado (recomendado)

This is the simplest method. No Node.js required, no config files to edit.

  1. Open Claude Desktop and go to Settings.
  2. Navigate to Connectors.
  3. Click Add custom connector.
  4. Paste the server URL: 
    https://mcp.chartpane.com/mcp
  5. Done. Open a new conversation and ask for a chart.

Configuración: JSON config (alternativa)

If you prefer editing config files, you can use mcp-remote to bridge the connection. This requires Node.js.

Add this to your claude_desktop_config.json: 

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

Config file location:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Restart Claude Desktop after saving.

Qué puedes hacer

Once connected, you have two tools available in every conversation:

render_chart

Renders a single chart. Supports bar, line, area, pie, doughnut, polar area, bubble, scatter, radar, and stacked chart types.

render_dashboard

Renders a multi-chart grid (up to 6 charts). Claude picks the layout automatically, or you can specify rows and columns.

You don't need to reference these tools by name. Just describe what you want in plain language and Claude will use the right one.

Prompts de ejemplo

"Chart monthly revenue for Q4: Oct $42K, Nov $51K, Dec $67K"
"Show a pie chart of our traffic sources: Organic 45%, Paid 30%, Social 15%, Direct 10%"
"Create a dashboard with a line chart of weekly signups and a bar chart of signups by country"

See more in the examples gallery.

Solución de problemas

Chart doesn't appear

Make sure you're on the latest version of Claude Desktop. MCP App rendering requires a recent build. Try restarting the app and starting a new conversation.

Claude says it can't find ChartPane

The connector may not have loaded. Go to Settings > Connectors and verify ChartPane is listed and enabled. If using the JSON method, check for syntax errors in your config file and restart Claude Desktop.

mcp-remote errors

If you're using the JSON config method and getting connection errors, try clearing the cached auth tokens: 

rm -rf ~/.mcp-auth/mcp-remote-*/

Then restart Claude Desktop.

Relacionado

Getting Started Chart Types Examples What is an MCP App?

Empezar

Añade ChartPane a Claude Desktop y empieza a crear gráficos en tu próxima conversación.

Set up ChartPane