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

# Connect Claude Code

Use **Claude Code** (CLI or desktop **Code** tab) to build Embed pages and deliverables.

::: info Also covers the Claude Desktop Code tab
These steps apply to **Claude Code** in the terminal and the **Code** tab in the Claude desktop app. For inline charts in browser/Home chat, see [Connect Claude](https://chartbuddy.io/embed/docs/connect-ai/claude.md).
:::

## Standalone HTML (deliverable on disk)

Same `new Insight()` API as artifacts – the output is a **real `.html` file** (or small project) written to the workspace, not rendered inline in chat.

### 1. Seed context

Start a **new** session with Embed references:

```text
Build with @chartbuddy.io/embed (new Insight()).
1) https://chartbuddy.io/embed/docs/llms.txt
2) Copy the seriesData grid from Quick start. Fetch linked .md pages as needed (chart-data, chart type)
Docs: https://chartbuddy.io/embed/docs/getting-started/quick-start.md
Host sizing: aspect-ratio or fixed height – see https://chartbuddy.io/embed/docs/concepts/canvas.md
```

### 2. Implement

* Single-file HTML with unpkg import, or npm in a repo.
* Host sizing: `aspect-ratio` + `min-height`, or fixed `width`/`height` – normal page layout rules apply (unlike artifact sandboxes, see [Connect Claude](https://chartbuddy.io/embed/docs/connect-ai/claude.md#host-height-explicit-not-min-height-only)).
* `await insight.ready` before PNG export or `getChartData()`.
* Partial updates via `setData` / `update` / `setChartData`.
* Pass `chartData` on each mount; the embed package does not restore chart state from browser storage.

### 3. Verify

Follow [Visual QA](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md): layout first, then chart config.

## Optional: Hub MCP

To experience a better feedback loop between Claude Code and your chart, use Chartbuddy Hub – see [Hub – Connect Claude Code](https://chartbuddy.io/hub/docs/connect-mcp/claude-code.md).