---
url: https://chartbuddy.io/embed/docs/connect-ai.md
---
# Connect 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/).

## How Embed fits AI workflows

1. **Fetch** [`llms.txt`](https://unpkg.com/@chartbuddy.io/embed/llms.txt) (curated index).
2. **Fetch only the docs pages you need** (quick start, chartData schema, chart type, axes, validation) via `.md` links from the index — 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](/concepts/canvas).
5. **Verify** with [Visual QA](/quality-assurance/visual-qa) – layout first, then annotations.

## Pick your client

| Client | Guide |
|--------|--------|
| **Cursor** | [Connect Cursor](/connect-ai/cursor) |
| **Claude** | [Connect Claude](/connect-ai/claude) |
| **Claude Code** | [Connect Claude Code](/connect-ai/claude-code) |
| **OpenCode** | [Connect OpenCode](/connect-ai/opencode) |
| **ChatGPT / Codex** | [Connect ChatGPT / Codex](/connect-ai/chatgpt-codex) |

## 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://unpkg.com/@chartbuddy.io/embed/llms.txt (index)
2) Fetch linked docs .md pages you need (quick-start, 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](/concepts/canvas) – aspect-ratio or fixed px |
| `format` changes do nothing | Set `numberFormat: { mode: 'custom', customFormat }` – see [Number formats](/configuration/number-formats) |
| Agent invents wrong API | `new Insight()` only – not Chart.js / `createChart` |
| 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/) instead of Embed docs alone |