Connect Claude

Use Claude in the browser (claude.ai) and the Home tab in the Claude desktop app to build HTML artifacts with ChartBuddy Embed. Claude Code uses a different path. See Connect Claude Code.

Claude Artifact

Best for “show me a chart of X”: one-off, rendered in the conversation.

Edits the user makes inside the artifact (including via the ChartBuddy hover ball → Edit) are not passed back to the LLM. People often expect that loop; it does not exist here. Prefer creating the chart in view mode so the deliverable stays what Claude generated.

Import

<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';
  // …
</script>

No bundler, no assetBase. Claude’s artifact sandbox allows unpkg (also jsDelivr, cdnjs, esm.sh, Google Fonts). The standard package-root import works as-is.

Options

const insight = new Insight('#chart', {
  persist: false, // artifacts are ephemeral; nothing to reload later
  chartData: { /* … */ },
});
await insight.ready;

Default is view-only (hover ball: Download PNG / Drag to slide / Edit). Leave it that way unless you deliberately want in-artifact editing that will not sync back to the chat.

Host height: explicit, not min-height only

Insight sizes from the mount element’s measured box. In Claude artifacts, a host with only min-height (and no resolved height) often renders shorter than expected. The chart looks squashed.

Give the mount container an explicit height (or aspect-ratio and a definite height chain):

#chart {
  width: 100%;
  height: 420px; /* preferred in artifacts */
}

aspect-ratio alone can work on normal pages; in artifact sandboxes, fixed height is the safest default. See Canvas & sizing.

Export to a deck

Claude cannot programmatically export a PNG from an artifact. The user can open the ChartBuddy hover ball on the chart and choose Download or Drag to slide.

Paste into Claude

Create a Claude HTML artifact with ChartBuddy Embed.
import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed'
Mount #chart with explicit height (e.g. height: 420px), not min-height only.
persist: false. View mode (no editable: true). await insight.ready.
Read https://unpkg.com/@chartbuddy.io/embed/llms.txt

Chartbuddy Hub

For advanced visual QA through Chartbuddy MCP, and for connecting charts to other apps, install Chartbuddy Hub and follow Connect Claude Code (Hub MCP). Browser / Home chat cannot reach local Hub MCP.