Connect ChatGPT

Use ChatGPT in the browser (chatgpt.com) and regular chat in the ChatGPT desktop app to build HTML artifacts with ChartBuddy Embed. Codex uses a different path. See Connect ChatGPT / Codex.

ChatGPT cannot run local Hub MCP from the browser. For Embed, agents write self-contained HTML that loads @chartbuddy.io/embed from unpkg.

ChatGPT Artifact

Best for inline charts and small HTML deliverables in the conversation.

Edits the user makes inside the artifact (including via ChartBuddy Edit) are not passed back to the LLM. Prefer creating the chart in view mode so what ChatGPT generated is what you keep.

Import and options

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

  const insight = new Insight('#chart', {
    persist: false,
    chartData: { /* … */ },
  });
  await insight.ready;
</script>

Leave the default view-only chrome 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’s measured box. In artifact sandboxes, a host with only min-height often looks squashed. Prefer an explicit height:

#chart {
  width: 100%;
  height: 420px;
}

See Canvas & sizing.

Export to a deck

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

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

Example ask: “Build a 3-slide Reveal deck with one clustered-bar chart per slide, each host with height: 420px.”

Verify

• Chart fills each host (not cramped in a corner).
• Re-mount or update after a slide becomes visible if using Reveal.
• See Visual QA.

Chartbuddy Hub

For advanced visual QA through Chartbuddy MCP, and for connecting charts to other apps, install Chartbuddy Hub and connect via Codex or Cursor. See Hub Connect MCP. Regular ChatGPT chat cannot reach local Hub MCP.