# Get Started

Paste one prompt into your agent and you're set up. Then pick where to go next.

UI SDK is a library of behaviors, like popups, lists and typeahead, that your agent puts together into components. It works with React, Vue, Svelte, Solid and Web Components.

New here? The [Introduction](/docs/core) shows how it all works.

## Quick Start

Pick your framework, then copy this prompt into your agent.

**React**

```text prompt
Set up ui-sdk in this React project. It needs React 19 or newer.

1. Install @ui-sdk/react and @ui-sdk/core with the project's package manager.
2. Add a note to AGENTS.md, creating it if needed: before using ui-sdk, follow the ui-sdk skill if it's installed, and read node_modules/@ui-sdk/react/docs/llms.txt. To build a new component, also search node_modules/@ui-sdk/react/docs/core.md by heading, and read rendering.md next to it.
3. If you support skills, run: npx skills add vercel-labs/ui --skill ui-sdk
```

**Vue**

```text prompt
Set up ui-sdk in this Vue project. It needs Vue 3.5 or newer.

1. Install @ui-sdk/vue and @ui-sdk/core with the project's package manager.
2. Add a note to AGENTS.md, creating it if needed: before using ui-sdk, follow the ui-sdk skill if it's installed, and read node_modules/@ui-sdk/vue/docs/llms.txt. To build a new component, also search node_modules/@ui-sdk/vue/docs/core.md by heading, and read rendering.md next to it.
3. If you support skills, run: npx skills add vercel-labs/ui --skill ui-sdk
```

**Svelte**

```text prompt
Set up ui-sdk in this Svelte project. It needs Svelte 5.33 or newer.

1. Install @ui-sdk/svelte and @ui-sdk/core with the project's package manager.
2. Add a note to AGENTS.md, creating it if needed: before using ui-sdk, follow the ui-sdk skill if it's installed, and read node_modules/@ui-sdk/svelte/docs/llms.txt. To build a new component, also search node_modules/@ui-sdk/svelte/docs/core.md by heading, and read rendering.md next to it.
3. If you support skills, run: npx skills add vercel-labs/ui --skill ui-sdk
```

**Solid**

```text prompt
Set up ui-sdk in this Solid project. It needs Solid 2: solid-js and @solidjs/web 2.0.0-rc.14 or newer.

1. Install @ui-sdk/solid and @ui-sdk/core with the project's package manager.
2. Add a note to AGENTS.md, creating it if needed: before using ui-sdk, follow the ui-sdk skill if it's installed, and read node_modules/@ui-sdk/solid/docs/llms.txt. To build a new component, also search node_modules/@ui-sdk/solid/docs/core.md by heading, and read rendering.md next to it.
3. If you support skills, run: npx skills add vercel-labs/ui --skill ui-sdk
```

**Web Components**

```text prompt
Set up ui-sdk in this Web Components project. Each component registers its tags when you import its entry, like @ui-sdk/web/dialog.

1. Install @ui-sdk/web and @ui-sdk/core with the project's package manager.
2. Add a note to AGENTS.md, creating it if needed: before using ui-sdk, follow the ui-sdk skill if it's installed, and read node_modules/@ui-sdk/web/docs/llms.txt. To build a new component, also search node_modules/@ui-sdk/web/docs/core.md by heading, and read rendering.md next to it.
3. If you support skills, run: npx skills add vercel-labs/ui --skill ui-sdk
```

Then ask your agent to build a component:

```text prompt
Build a search field with ui-sdk: a text input and a Clear button that only shows when there's text. Clear empties the input and puts focus back in it. Use our existing styles.
```

## Find a Component

- [Select](/docs/components/select): Choose one value or several from a popup list.
- [Field](/docs/components/field): Connect a form control to its label, description, and validation errors.
- [Tabs](/docs/components/tabs): Switch between related panels with one tab selected at a time.
- [Combobox](/docs/components/combobox): Search a list of options and choose one or several values.
- [Date Picker](/docs/components/date-picker): Type a date or choose one from a calendar, with support for ranges and forms.
- [Menu](/docs/components/menu): Choose actions and settings from a button or a context menu.

Or [see all components](/docs/components).

## Build Your Own

- [Core](/docs/core): The behaviors, and how they fit together.
- [Build a Component](/docs/core/build-a-component): Build a toggle button, then render it in your framework.
- [Behaviors](/docs/core/behaviors): Focus, selection, popups and the other pieces your components are made of.
- [Compose Behaviors](/docs/core/compose-behaviors): Build a star rating with shared state and keyboard navigation.

## Work with Agents

- [Build with an Agent](/docs/agents/build-with-an-agent): Give an agent the right context, build a small version, and check how it behaves.
- [Skills](/docs/agents/skills): Help your agent build custom components with @ui-sdk/core.
- [Connect an Agent](/docs/agents/connect-an-agent): Let an agent read your components and call their actions.
- [WebMCP](/docs/agents/connect-an-agent/webmcp): Let the agent built into a browser read and use your components.

See what's new in the [changelog](/docs/core/changelog).