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

## 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://unpkg.com/@chartbuddy.io/embed/llms.txt
2) Fetch linked docs .md pages as needed (quick-start, chart-data, chart type)
Docs: https://chartbuddy.io/embed/docs/getting-started/quick-start
Host sizing: aspect-ratio or fixed height – see https://chartbuddy.io/embed/docs/concepts/canvas
```

### 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](/connect-ai/claude#host-height-explicit-not-min-height-only)).
* `await insight.ready` before PNG export or `getChartData()`.
* Partial updates via `setData` / `update` / `setChartData`.
* `persist: true` only if the page should reload chart state from storage.

### 3. Verify

Follow [Visual QA](/quality-assurance/visual-qa): layout first, then chart config.

## Optional: Hub MCP

For Chartbuddy Hub desktop tools, configure MCP separately – [Hub – Connect Claude Code](https://chartbuddy.io/hub/docs/connect-mcp/claude-code). Embed docs alone do not spawn Hub.