# Build with an Agent

Give an agent the right context, build a small version, and check how it behaves.

Tell the agent what you're building, which framework you use, and how the component should behave. It can use ui-sdk's components and behaviors to put it together.

## Give It the Docs

Each package includes Markdown docs that match the version you installed. Choose your framework in the page header, then start with:

**React**

```text
This project uses React and ui-sdk. Read
node_modules/@ui-sdk/react/docs/llms.txt to see what's available.

For a custom component, read the relevant sections of docs/core.md
and docs/rendering.md in the same package.
```

**Vue**

```text
This project uses Vue and ui-sdk. Read
node_modules/@ui-sdk/vue/docs/llms.txt to see what's available.

For a custom component, read the relevant sections of docs/core.md
and docs/rendering.md in the same package.
```

**Svelte**

```text
This project uses Svelte and ui-sdk. Read
node_modules/@ui-sdk/svelte/docs/llms.txt to see what's available.

For a custom component, read the relevant sections of docs/core.md
and docs/rendering.md in the same package.
```

**Solid**

```text
This project uses Solid and ui-sdk. Read
node_modules/@ui-sdk/solid/docs/llms.txt to see what's available.

For a custom component, read the relevant sections of docs/core.md
and docs/rendering.md in the same package.
```

**Web Components**

```text
This project uses Web Components and ui-sdk. Read
node_modules/@ui-sdk/web/docs/llms.txt to see what's available.

For a custom component, read the relevant sections of docs/core.md
and docs/rendering.md in the same package.
```

For a page with no build step, like an Artifact, point it at web.md instead. It's the same docs in one file, for a page that loads `web.js` and `web.css`:

```text
This page loads ui-sdk with web.js and web.css. Read
https://ui-sdk.dev/web.md to see what's available.
```

`llms.txt` covers your framework's APIs. `core.md` covers the behaviors, and `rendering.md` explains how to render a primitive in your framework.

The [Core guides](/docs/core/build-a-component) walk through the code. [All Behaviors](/docs/core/behaviors) helps the agent find a building block for each interaction.

## Add the Skill

If your agent supports skills, install `ui-sdk`:

```bash
npx skills add vercel-labs/ui --skill ui-sdk
```

It gives the agent a workflow for choosing behaviors, defining a primitive, rendering it and testing it. The same skill ships with `@ui-sdk/core` in `node_modules/@ui-sdk/core/skills/`, so an agent without skills can read it there. [Skills](/docs/agents/skills) shows how to use it. You can also work directly from the docs.

## Describe the Interaction

Give the agent a concrete example of what someone should be able to do. For an emoji picker:

**React**

```text
Build an emoji picker in React using ui-sdk.

Add a search input and a grid of emoji. Down from the search input
should move focus to the first result. Arrow keys move through the
grid, and Enter selects an emoji. Announce the selection to screen readers.

Use our existing styles.
```

**Vue**

```text
Build an emoji picker in Vue using ui-sdk.

Add a search input and a grid of emoji. Down from the search input
should move focus to the first result. Arrow keys move through the
grid, and Enter selects an emoji. Announce the selection to screen readers.

Use our existing styles.
```

**Svelte**

```text
Build an emoji picker in Svelte using ui-sdk.

Add a search input and a grid of emoji. Down from the search input
should move focus to the first result. Arrow keys move through the
grid, and Enter selects an emoji. Announce the selection to screen readers.

Use our existing styles.
```

**Solid**

```text
Build an emoji picker in Solid using ui-sdk.

Add a search input and a grid of emoji. Down from the search input
should move focus to the first result. Arrow keys move through the
grid, and Enter selects an emoji. Announce the selection to screen readers.

Use our existing styles.
```

**Web Components**

```text
Build an emoji picker as a web component using ui-sdk.

Add a search input and a grid of emoji. Down from the search input
should move focus to the first result. Arrow keys move through the
grid, and Enter selects an emoji. Announce the selection to screen readers.

Use our existing styles.
```

Include details that matter to your app, such as whether the picker opens in a popup or whether a parent component owns the selected value. The agent can choose the behaviors from those requirements.

## Start Small

Ask for one working example first:

```text
Start with a small, fixed list of emoji and one example page.
Reuse public ui-sdk components and behaviors where they fit.
```

Try that version, then ask for a specific change:

```text
When a search has no results, show "No emoji found" and keep focus
in the search input. Keep the input in the same position as results change.
```

This gives you something to review as the component takes shape.

## Check the Result

Ask the agent to test the interactions you described:

```text
Test moving from search into the grid, navigating with arrow keys,
and selecting with Enter. Check the empty search state and the
selection announcement too.

Run the project's typecheck and relevant tests. Tell me what passed
and anything you couldn't check.
```

The [testing guide](/docs/core/testing) shows how to check a primitive with `@ui-sdk/core/testing`.

Try the example yourself too: Tab into the search input, search for an emoji, press Down, move with the arrows, and select with Enter. Then try a search with no results. These are the same interactions the agent's tests should cover.