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

```html
<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

```js
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):

```css
#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](/concepts/canvas#ai-artifact-hosts).

### 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

```text
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](https://chartbuddy.io/hub/docs/getting-started/installation)** and follow [Connect Claude Code (Hub MCP)](https://chartbuddy.io/hub/docs/connect-mcp/claude-code). Browser / Home chat cannot reach local Hub MCP.