Connect Claude Code

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

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.

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:

Build with @chartbuddy.io/embed (new Insight()).
Read https://unpkg.com/@chartbuddy.io/embed/llms.txt
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).
• 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: layout first, then chart config.

Optional: Hub MCP

For Chartbuddy Hub desktop tools, configure MCP separately – Hub – Connect Claude Code. Embed docs alone do not spawn Hub.