# Mcp Charts

> Add agent-ready, interactive charts to your MCP server in a few lines.

- **Type:** MCP server
- **Install:** `agentstack add mcp-bonnard-data-mcp-charts`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [bonnard-data](https://agentstack.voostack.com/s/bonnard-data)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [bonnard-data](https://github.com/bonnard-data)
- **Source:** https://github.com/bonnard-data/mcp-charts

## Install

```sh
agentstack add mcp-bonnard-data-mcp-charts
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

@bonnard/mcp-charts

Interactive charts for your MCP server, in a few lines.

  
  
  

  Built by Bonnard · Docs

  

`@bonnard/mcp-charts` adds a `visualize` tool plus an embedded chart widget to any MCP server. The agent writes SQL, your database returns the rows, and the result renders as an interactive chart inside the host (Claude, ChatGPT, and other MCP Apps clients). You write no frontend code.

> Pre-1.0: the API may change before a 1.0 release.

## Install

```bash
npm install @bonnard/mcp-charts
```

## Quickstart

Call `addCharts` on your existing MCP server and give it a read-only query callback:

```ts
import { addCharts } from "@bonnard/mcp-charts";
import { postgresRunSql } from "@bonnard/mcp-charts/postgres";

addCharts(server, {
  runSql: postgresRunSql(pool), // maps pg column types to chart field kinds
  discovery: { toolName: "explore_schema" }, // tell the agent to discover tables first
});
```

That registers a `visualize` tool and a `ui://bonnard/chart` widget resource. The agent calls it
with SQL; the rows render as a chart in the host, with a text fallback for non-widget clients.

Adapters ship for `postgres`, `bigquery`, `snowflake`, `databricks`, and `duckdb`. For an engine
without one, build typed `ChartData` with `buildChartData` (or declare `fields` yourself) so
numeric/temporal columns aren't inferred from raw driver values.

## How it works
- The agent calls `visualize` with a query (SQL / semantic query / chart params).
- Your callback runs it against your warehouse / ORM and returns rows.
- Bonnard infers the chart encoding from the typed result and renders it as an MCP App
  (a sandboxed `ui://` widget) in Claude or ChatGPT. One widget, both hosts.

## Why

- **Grounded in real data.** Charts render the rows your query returned, not numbers the model typed into a tool call. No hallucinated figures.
- **A few lines, no frontend.** One function, one widget that works across every MCP Apps host. You don't maintain per-client rendering code.
- **Interactive, not static images.** Tooltips, legends, and axis formatting, native to the client.

  

## Chart types

Eight types, chosen automatically from the shape of your data or set explicitly: `bar`, `line`, `area`, `pie`, `scatter`, `funnel`, `waterfall`, `table`. Plus bar variants (stacked, grouped, 100% stacked, horizontal), dual-axis combos, bubble sizing, and reference lines. See the [chart types reference](https://docs.bonnard.dev/mcp-charts/chart-types).

## Warehouse adapters

Skip writing `runSql` by hand. Each adapter wraps your driver and maps native column types to chart roles (dimension, measure, time):

```ts
import { postgresRunSql } from "@bonnard/mcp-charts/postgres";
addCharts(server, { runSql: postgresRunSql(pool) });
```

Bundled for Postgres, BigQuery, Snowflake, Databricks, and DuckDB. Each driver is an optional peer dependency, installed only if you import its subpath. See [warehouse adapters](https://docs.bonnard.dev/mcp-charts/adapters).

## Security

`visualize` executes agent-written SQL against your database. Treat it as untrusted input: connect `runSql` to a **read-only, least-privilege** role scoped to the data you want exposed. Your database permissions are the security boundary; the SDK does not sandbox queries. See [Security](https://docs.bonnard.dev/mcp-charts/getting-started#security).

## Links

- Website: https://bonnard.dev
- Docs: https://docs.bonnard.dev/mcp-charts/getting-started
- Issues: https://github.com/bonnard-data/mcp-charts/issues
- Contact: [pierre@bonnard.dev](mailto:pierre@bonnard.dev)

## Repo layout

This is a pnpm monorepo.

- `packages/core` — the SDK (`@bonnard/mcp-charts`): the `visualize` tool, the `resolve()` encoding logic, the `ChartData` contract, and the `ui://` widget resource.
- `packages/widget` — the in-iframe renderer (ECharts), bundled to a single HTML file and embedded into core.
- `examples` — runnable example servers.

## Development

```bash
pnpm install
pnpm build       # widget -> core (embeds the widget)
pnpm check       # format, lint, typecheck
pnpm test
```

## License

MIT

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [bonnard-data](https://github.com/bonnard-data)
- **Source:** [bonnard-data/mcp-charts](https://github.com/bonnard-data/mcp-charts)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-bonnard-data-mcp-charts
- Seller: https://agentstack.voostack.com/s/bonnard-data
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.