Vercel UI SDK beta gives coding agents reusable keyboard and focus controls

Vercel announced the UI SDK beta on November 12. A coding agent building a web control can assemble keyboard navigation, selection and focus recovery from the library. The same behavior definitions can be rendered in React, Vue, Svelte, Solid and Web Components. The first core beta on npm is version 0.1.0-beta.1.

In Vercel’s search-field example, a clear button appears when the input contains text. Pressing it removes the query and puts keyboard focus back in the input so the user can keep typing. Developers can style and position the button for their own project while reusing the focus behavior. It is one example of how an agent can build an interface that handles what happens after a click as well as what the control looks like.

Menus and autocomplete share building blocks

A selection menu needs to open and dismiss a popup, choose an item and find an item when someone types. Vercel’s introduction shows how the same behaviors can be combined to make an autocomplete field or a combobox. A team can use one definition for how popups close and connect it to controls in different screens.

The icon picker in the documentation shows a more elaborate combination. A popup opens beside its button, arrow keys move between icons, and the example announces changes in the search results to a screen reader. Vercel also documents a testing kit for checking keyboard interaction, focus and accessibility attributes once a component has been built.

A separate five-star rating example gives the group a single Tab stop and uses arrow keys inside it. The app receives the selected value and the reason for the change. It can also hold the rating in the parent component and pass the value back into the control.

One behavior definition can render in five ways

A definition brings together the component’s current state, the actions it supports and the parts a framework renders. In the search example, the input and clear button share the value and the action that updates it. The repository shows the same search definition wired up in each of the five supported environments.

Teams can apply their own colors, spacing and borders and use a control’s state to decide how it looks. The packages ship with documentation for their installed version, and Vercel offers a skill that guides coding agents through building a component with those materials. The React adapter requires React 19 or later.

The styling guide uses a copy button to show how a state attribute can change its background after a copy. For a numeric value, such as the width of a volume indicator, the guide uses a CSS variable. The server can include that style in the initial HTML.

The app controls what an agent can change

An app can also connect an agent to the controls it builds with the SDK. A project-name field can expose its current value and the action that changes it. The application can approve or refuse the request, and its change handler can see when a request came from an agent. Creating a component and exposing its actions to an agent are separate parts of the integration.

Vercel compared browser tools and its SDK connection on a project-settings task that included renaming the project, changing members and notification settings, and saving. The company ran each approach three times with the same task and model. The median was 41 seconds with browser tools and 16 seconds with the SDK connection. The code uses the Apache 2.0 license. Vercel says the APIs may change during the beta.