ChartPane Alternative: Agent Charts From Your Own Query Data

ChartPane is an MCP App that renders interactive Chart.js charts inline in Claude, ChatGPT, and other MCP Apps clients. The agent calls it with data and a chart type, and the chart appears in the conversation. It covers nine chart types and dashboard grids.

@bonnard/mcp-charts shares the interactive-widget approach but starts from a different place. Instead of the agent passing the data, you add a visualize tool to your own MCP server. The agent writes SQL, your database returns the rows, and the chart renders from those results. The data on screen is the data your query returned.

At a glance

	ChartPane	@bonnard/mcp-charts
Output	Interactive widget (MCP Apps)	Interactive widget (MCP Apps)
Primary job	Chart data the agent supplies	Add charting to your MCP server, from your query results
Data source	The agent passes the data in the tool call	Your runSql callback returns rows from your database
Where it runs	A standalone MCP server the agent connects to	A few lines inside your existing MCP server
Chart library	Chart.js	Apache ECharts
Chart types	9 (bar, line, area, pie, doughnut, polarArea, bubble, scatter, radar) + grids	8 core types + variants (stacked, grouped, 100%, horizontal, combo, dual-axis, bubble, reference lines)
Grounded in real data	The agent provides the values	The chart renders exactly the rows your query returned
Warehouse adapters	Bring your own data	Bundled for BigQuery, Postgres, Snowflake, Databricks, DuckDB
Clients	Claude, ChatGPT, Cursor, VS Code	Claude, ChatGPT, and other MCP Apps clients

Both are interactive. The difference is the data path.

ChartPane and Bonnard both render real, interactive widgets in the agent, not static images. The split is where the numbers come from.

With ChartPane, the agent is the data source: it builds the data array and passes it to the chart tool. That is ideal for charting something the agent already has in context.

Bonnard puts your query in the path:

import { addCharts } from "@bonnard/mcp-charts";

addCharts(server, {
  runSql: async (sql) => ({ rows: await db.query(sql) }),
  discovery: { toolName: "explore_schema" },
});

The agent calls visualize with SQL. Your database runs it and returns rows. The chart renders those rows. The model never types the values into a tool call, so the chart stays faithful to your data. Run runSql through a read-only role to keep the agent’s SQL scoped.

Bundled warehouse adapters

Because Bonnard charts your data, it ships adapters that map native warehouse column types to chart roles:

import { bigQueryRunSql } from "@bonnard/mcp-charts/bigquery";
addCharts(server, { runSql: bigQueryRunSql(bq) });

Adapters cover BigQuery, Postgres, Snowflake, Databricks, and DuckDB. See the docs.

When to use ChartPane

Reach for ChartPane when:

• You want to chart data the agent already holds, without wiring up a data source
• You prefer Chart.js, or want chart types Bonnard doesn’t cover (radar, polar area)
• You want a general-purpose chart server any client can call

Reach for @bonnard/mcp-charts when the chart should come from your own query results, with warehouse adapters and a tool you add to a server you already run.

Getting started

npm install @bonnard/mcp-charts

import { addCharts } from "@bonnard/mcp-charts";
addCharts(server, { runSql: async (sql) => ({ rows: await db.query(sql) }) });

Read the documentation or the source on GitHub.

FAQ

Do ChartPane and Bonnard both render interactive charts in the agent?

Yes. Both use the MCP Apps standard to render interactive widgets inline, not static images.

What’s the main difference?

The data source. ChartPane charts data the agent passes in. Bonnard charts the rows your runSql callback returns from your database, so the chart matches your real query results.

Which charting library does Bonnard use?

Apache ECharts. ChartPane uses Chart.js.

Does Bonnard connect to my database?

No. You own the connection and pass a runSql callback. Run it through a read-only role. See Security.

Does it work in ChatGPT?

Yes. The widget renders in Claude, ChatGPT, and other MCP Apps clients.