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

# Connect OpenCode

Use **[OpenCode](https://opencode.ai)** agents to build Embed pages and artifacts with `@chartbuddy.io/embed`.

## Three steps

### 1. Seed context

In a new session, point the agent at:

* [`llms.txt`](https://chartbuddy.io/embed/docs/llms.txt) (index → follow linked `.md` pages)
* [Quick start](https://chartbuddy.io/embed/docs/getting-started/quick-start.md)
* [Canvas & sizing](https://chartbuddy.io/embed/docs/concepts/canvas.md)

```text
Chartbuddy Embed – new Insight(), @chartbuddy.io/embed from unpkg or npm.
1) https://chartbuddy.io/embed/docs/llms.txt
2) Copy the seriesData grid from Quick start. Fetch linked .md pages as needed
Host must have definite size (aspect-ratio or fixed px).
```

### 2. Build

Same patterns as [Connect Cursor](https://chartbuddy.io/embed/docs/connect-ai/cursor.md): HTML artifact or project files, `chartData` + host CSS.

### 3. Verify

[Visual QA](https://chartbuddy.io/embed/docs/quality-assurance/visual-qa.md) loop – confirm the chart fills the host.

## Optional: Hub MCP

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