Build with an Agent

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:

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.

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 walk through the code. All Behaviors helps the agent find a building block for each interaction.

Add the Skill

If your agent supports skills, install ui-sdk:

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

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.

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:

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:

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:

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