---
url: https://chartbuddy.io/embed/docs/connect-ai/cursor.md
---
> Docs index: [llms.txt](https://chartbuddy.io/embed/docs/llms.txt)

# 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.md
1) https://chartbuddy.io/embed/docs/llms.txt
2) Copy the seriesData grid from Quick start.
Docs: https://chartbuddy.io/embed/docs/getting-started.md
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://chartbuddy.io/embed/docs/llms.txt), copy the `seriesData` grid from [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md), then fetch the extra `.md` pages needed for the task.
* Do not load `llms-full.txt` by default.
* Link [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md) and [Visual QA](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md).
* For Hub desktop MCP (separate from Embed), see [Hub – Connect Cursor](https://chartbuddy.io/hub/docs/connect-mcp/cursor.md).

### 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](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md).

## Optional: Hub MCP alongside Embed

To experience a better feedback loop between Cursor and your chart, use Chartbuddy Hub – see [Hub – Connect Cursor](https://chartbuddy.io/hub/docs/connect-mcp/cursor.md).