Vercel’s UI SDK Gives Coding Agents Building Blocks Instead of Buttons

Vercel wants agents to build interfaces from behaviors. Vercel Labs has released UI SDK, an open-source beta library that gives coding agents more than 50 interface behaviors instead of finished components. The idea is simple: let an agent assemble the interaction model, then render it through the framework a project already uses.
Vercel UI SDK is headless, so it ships behaviors rather than visual components. Agents combine those behaviors into accessible components for React, Vue, Svelte, Solid and Web Components, with all core behavior living in @ui-sdk/core and thin adapters handling each framework.
The README lists keyboard navigation, focus, selection, dismissal, popups, drag and drop, and the ARIA those interactions need. The repository contains 51 component modules, while the documentation groups the behaviors into 10 categories, from Focus and Keys to Canvas.
Components assembled from primitives
The project site explains the model with a Select. “You do not hand the agent a finished Select.” Instead, “you hand it a popup, a selection model and typeahead.” Those same parts can produce an autocomplete, a combobox or a component nobody has designed yet — a useful distinction when the agent is generating application-specific UI.
Components start as primitives defined with definePrimitive. A primitive declares state, an API and slots, while slots attach attributes, events and behaviors to DOM parts. The README example builds a search field with createFocusRecovery; its Clear button appears only when the field contains text.
Each framework renders the primitive with createParts. The README says the parts are the same in all 5 adapters, allowing 1 behavior definition to serve a React app and a Svelte app without recreating the interaction logic for each framework.
Behaviors shown on ui-sdk.dev include createRovingFocus, createTypeahead, createPopup, createSelection, createReorder, createResize, createViewport and createVirtualizer. Prebuilt components include Select, Combobox, Date Picker, Menu, Tree and Color Picker.
The agent can operate the interface too
UI SDK’s more interesting difference is the agent layer. The agent documentation describes a bridge created with createAgent() before the page renders, allowing an agent to inspect and operate supported interface components directly rather than relying only on browser tools.
agent.snapshot() lists components, their state and available actions. agent.act() runs an action, such as renaming a project with setValue. Applications can pass an allow callback to approve or refuse actions, and change callbacks receive source: “agent” and can cancel the change.
Tools can also be registered with supported browsers through WebMCP. That gives the interface a controlled action layer instead of handing the agent an unrestricted route through every visible element — because apparently “click around until something happens” was not a durable architecture.
Vercel compared its bridge against browser tools on 1 project-settings task. The agent renamed a project, updated members and notification settings, then saved; both agents used Sonnet through Claude Code with the same task and system prompt.
The bridge used 5 tool calls against 16 for browser tools, a reduction of 69%. It used 6.8k against 39.8k in the second reported measure, a reduction of 83%, completed the task in 16 seconds instead of 41 seconds, and reduced the reported cost from $0.073 to $0.032, or 56%.
Those figures are medians of 3 runs, and Vercel says to treat them as directional. Vercel does not name the Sonnet version, and the comparison covers 1 task, so the result is a signal about the interface model rather than a universal agent benchmark.
Installation and framework limits
Setup is a prompt pasted into an agent. It installs the packages and adds a note to AGENTS.md, pointing the agent to the ui-sdk skill and to llms.txt inside the package documentation.
The skill installs with npx skills add vercel-labs/ui –skill ui-sdk. Pages without a build step can load web.js and web.css from ui-sdk.dev, while an optional web.css file gives components a default look.
All 6 packages are on npm at 0.1.0-beta.1, published November 12, 2026, under Apache-2.0. Installation starts with npm install @ui-sdk/react @ui-sdk/core, with the adapter swapped for the target framework.
The peer requirements are strict: React 19+, Vue 3.5+, Svelte 5.33+ and Solid 2.0.0-rc.14+. Those versions and peer ranges come from npm as of November 13, 2026, making compatibility a practical concern for teams with older applications.
UI SDK is not another catalog of polished controls. It is an attempt to give coding agents a shared vocabulary for state, focus, selection and actions — then let frameworks turn that vocabulary into working interfaces.
Based on




