Connect Claude

Use Claude in the browser (claude.ai) and the Home tab in the Claude desktop app for HTML artifacts (create_file + present_files). The Cowork and Code tabs can also use the MCP visualize tool mcp__visualize__show_widget. 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.

Claude can deliver a chart in two ways:

Mechanism	What it is	Where it works
mcp__visualize__show_widget	MCP visualize tool that mounts a ChartBuddy widget in the conversation	Cowork or Code tab only (for now). Not available in browser / Home chat.
create_file + present_files	Claude writes an HTML file and presents it as an artifact	Browser (claude.ai) and the Home tab in the desktop app

The rest of this page covers the create_file + present_files HTML artifact path (unpkg import, host height, view mode, export).

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 and follow linked docs .md pages

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.