ChartPane para Claude Desktop

O Claude Desktop tem suporte nativo para MCP Apps, o que significa que os gráficos do ChartPane são renderizados diretamente na sua conversa. Sem pop-ups, sem janelas separadas, sem capturas de tela para colar de volta.

Por que o 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

Configuração: 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.

Configuração: Configuração JSON (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.

O que você pode fazer

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 exemplo

"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.

Solução 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.

Relacionados

Getting Started Chart Types Examples What is an MCP App?

Começar

Adicione o ChartPane ao Claude Desktop e comece a criar gráficos na sua próxima conversa.

Set up ChartPane