---
url: https://chartbuddy.io/embed/docs/connect-ai.md
---
> Docs index: [llms.txt](https://chartbuddy.io/embed/docs/llms.txt)

# Chart with AI

Need **desktop Hub** editing over MCP (open charts in Chartbuddy Hub, `list_charts`, …)? See [Chartbuddy Hub – Connect MCP](https://chartbuddy.io/hub/docs/connect-mcp.md).

## How Embed fits AI workflows

1. **Fetch** [`llms.txt`](https://chartbuddy.io/embed/docs/llms.txt) (curated index).
2. **Copy the `seriesData` grid** from Quick start. Then fetch only the extra `.md` pages you need (chartData schema, chart type, axes, validation). Do **not** load `llms-full.txt` by default.
3. **Write** HTML/JS that imports `@chartbuddy.io/embed` and passes `chartData`.
4. **Size the host** – definite width/height (`aspect-ratio` or fixed px). See [Canvas & sizing](https://chartbuddy.io/embed/docs/concepts/canvas.md).
5. **Verify** with [Visual QA](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md) – layout first, then annotations.

## Pick your client

| Client | Guide |
|--------|--------|
| **Cursor** | [Connect Cursor](https://chartbuddy.io/embed/docs/connect-ai/cursor.md) |
| **Claude** | [Connect Claude](https://chartbuddy.io/embed/docs/connect-ai/claude.md) |
| **Claude Code** | [Connect Claude Code](https://chartbuddy.io/embed/docs/connect-ai/claude-code.md) |
| **OpenCode** | [Connect OpenCode](https://chartbuddy.io/embed/docs/connect-ai/opencode.md) |
| **ChatGPT / Codex** | [Connect ChatGPT / Codex](https://chartbuddy.io/embed/docs/connect-ai/chatgpt-codex.md) |

## Shared handoff

Paste into a new agent chat when starting an Embed task:

```text
Build Chartbuddy Embed charts with @chartbuddy.io/embed (new Insight()).
1) Fetch https://chartbuddy.io/embed/docs/llms.txt (index)
2) Copy the seriesData grid from Quick start. Fetch linked .md pages you need (chart-data, chart type, validation). Do not load llms-full.txt by default
Host sizing: mount element needs definite width/height (prefer width + aspect-ratio, not height:100% in flex/slide layouts).
Use validateChartData / Visual QA loop before declaring done.
```

## Troubleshooting

| Symptom | Check |
|---------|--------|
| Charts render tiny or letterboxed | [Host sizing](https://chartbuddy.io/embed/docs/concepts/canvas.md) – aspect-ratio or fixed px |
| `format` changes do nothing | Set `numberFormat: { mode: 'custom', customFormat }` – see [Number formats](https://chartbuddy.io/embed/docs/configuration/number-formats.md) |
| Agent invents wrong API | `new Insight(target, { chartData })` – two arguments. Copy the Quick start `seriesData` grid. |
| Value labels always on / cannot hide totals | `annotations.totals.visible: false` – not `showTotalLabels` or `dataLabels.showTotal`. See [Labels](https://chartbuddy.io/embed/docs/configuration/labels.md). |
| Slide deck charts wrong size | Mount when slide is visible; remount or `update` after layout |
| Need Hub window tools | Use [Hub Connect MCP](https://chartbuddy.io/hub/docs/connect-mcp.md) instead of Embed docs alone |