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()).
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
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.
• Pass chartData on each mount; the embed package does not restore chart state from browser storage.

3. Verify

Follow Visual QA: 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.