---
url: https://chartbuddy.io/embed/docs/connect-ai/cursor.md
---
# Connect Cursor

Use **Cursor** agents to build pages and artifacts with `@chartbuddy.io/embed`.

::: tip Paste into Cursor

```text
ChartBuddy Embed guide:
https://chartbuddy.io/embed/docs/connect-ai/cursor
1) https://unpkg.com/@chartbuddy.io/embed/llms.txt
Docs: https://chartbuddy.io/embed/docs/getting-started/
Size chart hosts with aspect-ratio or fixed px before new Insight().
```

:::

## Three steps

### 1. Give the agent Embed context

* Point the agent at [`llms.txt`](https://unpkg.com/@chartbuddy.io/embed/llms.txt), then fetch the linked docs `.md` pages needed for the task.
* Do not load `llms-full.txt` by default.
* Link [Quick start](/getting-started/quick-start) and [Visual QA](/quality-assurance/visual-qa).
* For Hub desktop MCP (separate from Embed), see [Hub – Connect Cursor](https://chartbuddy.io/hub/docs/connect-mcp/cursor).

### 2. Build in the workspace

Agents should:

* Import from `https://unpkg.com/@chartbuddy.io/embed` (or npm in your project).
* Use `new Insight('#chart', { chartData })` and `await insight.ready`.
* Size the host with `aspect-ratio` or fixed px – not bare `height: 100%` in nested layouts.

### 3. Verify layout and config

* Open the HTML locally or use Cursor browser tools.
* Check the chart **fills the host** before judging annotations.
* Use `insight.getChartData()` / `toPngBase64()` for automated checks – see [Visual QA](/quality-assurance/visual-qa).

## Optional: Hub MCP alongside Embed

Cursor can also run **Chartbuddy Hub MCP** (`chartbuddy --mcp`) for desktop chart windows. That is independent of Embed npm – configure both only if you need both workflows.