Claude Desktop के लिए ChartPane

Claude Desktop में MCP Apps के लिए नेटिव समर्थन है, जिसका अर्थ है ChartPane चार्ट सीधे आपकी बातचीत में रेंडर होते हैं।

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

सेटअप: कस्टम कनेक्टर (अनुशंसित)

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

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

सेटअप: JSON कॉन्फिग (वैकल्पिक)

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.

आप क्या कर सकते हैं

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.

उदाहरण प्रॉम्प्ट

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

समस्या निवारण

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.

शुरुआत करें

Claude Desktop में ChartPane जोड़ें और अगली बातचीत में चार्ट बनाना शुरू करें।

Set up ChartPane