Vercel UI SDK: 50+ Free Behaviors for AI Coding Agents

Most component libraries hand a coding agent a finished Select and ask it to wire one up. Vercel Labs thinks that is the wrong unit. On November 12, 2026, the company released UI SDK, a free, open-source beta library that gives agents the pieces a Select is made of instead: the popup, the selection model, the typeahead. The agent assembles those pieces into whatever component the job needs, in whatever framework the project uses. It is a small idea with a large claim attached: in Vercel's own test, an agent working through the SDK's bridge finished a settings task with 69% fewer tool calls and 56% lower cost than the same agent driving a browser. The numbers come from one task run three times, so they are a hint, not proof. But the library itself is real, it is free, and it already has more than 4,200 GitHub stars two days after launch.

UI SDK is aimed at a specific frustration. Coding agents have become good at writing application logic, but interfaces still trip them up. A dropdown needs keyboard navigation, focus handling, screen-reader announcements, and dismissal on Escape, and an agent that writes all of that from scratch tends to write a lot of code and get some of it wrong. Vercel's answer is to package the hard interaction work as reusable behaviors and let the agent compose them. This review works through what the library contains, how the agent bridge works, what the benchmark actually shows, and where the beta status should make you pause.

What UI SDK is: behaviors, not components

The core idea is on the project's docs site, ui-sdk.dev, and it is best shown with the Select example Vercel uses there. Give an agent a Select component and it can build a Select. Give it the pieces instead, the popup (createPopup), choosing from a list (createSelection), and finding an option by typing (createTypeahead), and it can build a Select, an autocomplete, a combobox, or a component nobody has designed yet. The behaviors are the parts that make a component work: keyboard navigation, focus, selection, popups, drag and drop, and the screen-reader support those interactions need.

Everything lives in one framework-free TypeScript package, @ui-sdk/core. Thin adapters render the same behavior definitions in React, Vue, Svelte, Solid, and plain Web Components, so one behavior definition can serve a React app and a Svelte app. The library is headless: it owns interaction logic, not appearance. An optional web.css file gives components a default look for projects that want one, but styling is yours to decide.

That distinction matters because UI SDK is easy to confuse with two things it is not. It is not shadcn/ui, the component collection built by the same Vercel Labs team, and it is not the Vercel AI SDK, the toolkit for calling language models. Launch coverage describes UI SDK as built by shadcn and Shu Ding, and the docs are explicit that this is a separate library with a separate job: behaviors for agents, not finished components and not model calls.

What ships in the box

The repository holds 51 component modules and more than 50 behaviors, packaged as six npm packages at version 0.1.0-beta.1. All six were published on November 12, 2026, under the Apache 2.0 license, and a 0.1.0-beta.2 build of the core package appeared in the registry a day later, on November 13. The GitHub repository, vercel-labs/ui, was created on October 26, 2026, and had passed 4,200 stars and 100 forks by November 14, the day this article was written.

The behaviors shown on the docs site cover the interactions agents most often get wrong:

• createRovingFocus: arrow keys move through a list, with one Tab stop.
• createTypeahead: type a few letters to jump to an item.
• createPopup: opens next to its trigger and stays on screen.
• createSelection: pick one or many, with Shift and Ctrl like a file manager.
• createReorder, createResize, createViewport, and createVirtualizer: sorting, resizing, canvas pan and zoom, and rendering only the rows you can see.

The docs group behaviors into 10 categories, from Focus and Keys through to Canvas. A prebuilt component library ships alongside them, made from the same behaviors: Select, Combobox, Date Picker, Menu, Tree, and Color Picker among them. Every prebuilt component works in all five frameworks, which is the point of the shared core.

The minimum versions are strict, and React 19 is the one most likely to bite: projects still on React 18 cannot adopt the React adapter until they upgrade. Nothing in the library needs a GPU, and it runs in any modern browser.

How your agent learns it

Setup is designed for the agent, not for you. Install the core and the adapter for your framework:

npm install @ui-sdk/react @ui-sdk/core

Then give your agent the UI SDK skill:

npx skills add vercel-labs/ui --skill ui-sdk

The docs also describe a prompt you paste into your agent, which installs the packages and adds a note to AGENTS.md pointing the agent at the skill and at an llms.txt file bundled in the package docs. The skill teaches the agent every behavior and how they fit together, so it writes less code and gets more of it right. Pages without a build step can load web.js and web.css from ui-sdk.dev directly.

In practice, the workflow Vercel demonstrates is a request in plain language, "Build me a picker for assigning a teammate to a task," followed by the agent composing createPopup, createListbox, createSelection, and createChange into a primitive, and the same component rendering in your framework. You do not need to learn the behavior API yourself. That is a deliberate design choice, and it is also a trade-off: the less you understand the layer your agent is building on, the harder it is to debug when the generated component misbehaves.

The agent bridge: agents that work the UI directly

The second half of UI SDK is the part that makes the benchmark possible. The library ships an agent bridge, created with createAgent() before the page renders. agent.snapshot() lists the components on the page, their state, and the actions available on each. agent.act() runs an action, such as setting a value on a project-settings form. The agent reads the page and works the controls directly, without screenshots.

Two guardrails matter here. Apps can pass an allow callback to approve or refuse actions, and change callbacks receive source: "agent" and can cancel the change. That is the difference between an agent that can click anything and one that can only do what the app permits. The same tools can also be registered with supported browsers through WebMCP, the emerging standard for exposing page capabilities to agents.

The docs summarize the effect as "more than twice as fast, at less than half the cost." That line is Vercel's own framing of its benchmark, and the next section looks at what the benchmark actually measured before taking it at face value.

The benchmark, read carefully

Vercel compared its bridge against browser tools on one 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 the same system prompt. The figures are medians of three runs.

The mechanism behind the numbers is plausible. A browser-driven agent reads the whole page as text, including markup it does not need, and spends tool calls clicking and screenshotting. A bridge-driven agent reads a structured snapshot of component state and calls actions directly, so it reads far less text and takes fewer steps. Fewer tokens in means a lower bill: the $0.073 run cost about £0.06 or CA$0.10, and the $0.032 run about £0.02 or CA$0.05, at November 14, 2026 market rates of 1 USD = 0.7569 GBP and 1.4267 CAD. Those conversions are approximations.

Now the caveats, which Vercel itself does not hide but which are easy to miss in a headline. The sample is one task, run three times, by the vendor, on its own library. The browser-tools baseline drove the same screen built with a different component library, so part of the gap may come from the comparison library rather than the bridge. Vercel does not name the Sonnet version used. And a settings form is the friendliest possible test for a bridge: a known screen, known controls, no surprises. Treat the 69% and 56% figures as directional evidence that the bridge approach saves tokens, not as a promise about your app. Independent tests on messier interfaces will tell the real story, and none exist yet.

What it costs

UI SDK costs nothing. The library is free and open source under the Apache 2.0 license, all six packages are on npm, and there is no paid tier, credit pack, or usage limit attached to the code itself. The only money in the picture is the model bill for the agent that uses it, and that is where the benchmark's cost argument lands: if the bridge really does cut tokens per task by roughly half, the savings show up on your Anthropic, OpenAI, or other provider invoice, not on a Vercel one.

That also sets the honest boundary on the "free" label. The library is free; running agents is not. A team that adopts UI SDK to cut agent costs still pays per token for every task, and the $0.032 figure above is the cost of one small task with one model on one day. Multiply it across a team running hundreds of agent tasks a week and the absolute numbers grow, even if the percentage saving holds. The library removes a cost of adoption, not the cost of use.

How it compares with Radix, React Aria, Base UI, and Ark UI

UI SDK is not the first library to separate interaction behavior from markup. React Aria's hooks and Ark UI's Zag.js state machines already do versions of that job. What is new is the agent layer: a skill, bundled llms.txt, and a runtime bridge built for agents to both build and operate interfaces.

The comparison table above follows the structure of MarkTechPost's launch coverage, which checked the rival libraries' npm listings on November 13, 2026. The practical takeaway is narrower than the table: if your team already has a component library and no agents building interfaces, UI SDK solves a problem you do not have. If agents are already writing your UI, and especially if they write it across more than one framework, the behavior model and the bridge are the reasons to look at it. Radix and React Aria remain the safer picks for human-written, React-only interfaces, and both are stable releases, which UI SDK is not.

The catches before you adopt it

Beta status is the first catch, and Vercel states it plainly in the README: UI SDK is in beta and subject to the Vercel Public Beta Agreement, and the framework, APIs, documentation, and behavior may change before general availability. The pace of that change is already visible: a 0.1.0-beta.2 build of the core package landed in the registry one day after launch. Code your agent writes against beta.1 may need rework against a later beta, and there is no published date for a stable release.

The second catch is the React 19 floor. Teams on React 18 or older cannot use the React adapter without upgrading, and that upgrade is a bigger decision than adopting a UI library. The Vue, Svelte, and Solid adapters carry their own minimums, so check the peer requirements before promising a migration.

The third catch is the benchmark, covered above: one task, three runs, vendor-measured. It is the only performance evidence available, and it is thin. The fourth is the agent bridge's security surface. A bridge that lets an agent act on your UI is powerful, and the allow callback is the control that keeps it safe. Apps that register tools through WebMCP or expose the bridge without that approval step are handing an agent the keys to their interface. Vercel's repository includes a security policy directing vulnerability reports to [email protected] rather than public issues, which is the right shape for a library with this much runtime reach.

Finally, the ecosystem is two days old. There are no independent reviews, no production case studies, and no community answers to the questions that only appear after real use. Early adopters should expect to read the source when something breaks, which is at least possible: the code is open, and the repository is public.

Who should try it now

Try it this week if you already use a coding agent such as Claude Code to build interfaces, especially across React and one other framework, and you can afford to rebuild against a moving beta. The install takes minutes, the skill does the teaching, and the cost of finding out it does not fit is an afternoon. The comparison with claude-mem, the 108,000-star memory layer for coding agents, is instructive: both tools exist because agents are becoming the primary authors of frontend code, and both are worth evaluating together if your agent writes a lot of UI.

Wait if you need a stable API, if you are on React 18, or if your interfaces are already well served by Radix or React Aria and no agent touches them. There is nothing in UI SDK that a human-written component library cannot already do; the value is specific to agent-written and agent-operated interfaces. Teams in that second group lose nothing by watching the beta for a few months and adopting when the API settles.

The broader signal is harder to ignore. Vercel's own Agent-Desktop gives agents a computer to use, and UI SDK now gives them interfaces built to be used. The two releases point in the same direction: interfaces designed for agents first, humans second. Whether that is a good trade depends on how much of your UI an agent will ever write, and the honest answer for most teams today is still "some, not all." UI SDK is the first library built squarely for that "some," and it is free to try.

Frequently asked questions

Is Vercel UI SDK free?

Yes. UI SDK is free and open source under the Apache 2.0 license. All six npm packages are free to install and use, with no paid tier. You still pay your model provider for the agent's tokens, which is a separate bill.

Which frameworks does UI SDK support?

React 19 and later, Vue 3.5 and later, Svelte 5.33 and later, Solid 2.0.0-rc.14 and later, and plain Web Components. The same behavior definitions render in all five through thin adapters on top of @ui-sdk/core.

How is UI SDK different from shadcn/ui?

shadcn/ui ships finished, styled components for humans to copy into a project. UI SDK ships the interaction behaviors those components are made of, so an agent can compose new components from them. It is a different library with a different job, built by the same Vercel Labs team.

What does the agent bridge do?

The bridge, created with createAgent(), lets an agent read a page's component state through agent.snapshot() and operate controls through agent.act(), without screenshots. Apps control what is allowed with an allow callback, and change callbacks can cancel agent-made changes.

Is UI SDK stable enough for production?

Not yet by Vercel's own terms. It is in public beta at version 0.1.0-beta.1, and the README warns that APIs, documentation, and behaviors may change before general availability. A second beta build appeared a day after launch, so expect movement.

How reliable is the 69% fewer tool calls claim?

It is Vercel's own measurement on one project-settings task, run three times, with both agents using Sonnet through Claude Code. The browser-tools baseline also used a different component library, and Vercel does not name the Sonnet version. Treat it as directional, not as a guarantee.

Sources

• Vercel Labs, UI SDK docs — ui-sdk.dev (official; behavior list, Select example, agent bridge description, "more than twice as fast, at less than half the cost")
• Vercel Labs, UI SDK repository and README — github.com/vercel-labs/ui (official; install commands, skill setup, beta terms, security policy; 4,220 stars and 112 forks verified via GitHub API, November 14, 2026)
• npm registry, @ui-sdk packages — npmjs.com/package/@ui-sdk/core (0.1.0-beta.1 current release, published November 12, 2026; 0.1.0-beta.2 published November 13, 2026; React peer dependency React 19+ verified)
• MarkTechPost, "Vercel Releases UI SDK: 50+ UI Behaviors for AI Coding Agents" — marktechpost.com (November 14, 2026; benchmark table, framework minimums, comparison with Radix, React Aria, Base UI, and Ark UI)
• Vercel, Public Beta Agreement — vercel.com (beta terms referenced by the UI SDK README)
• ForexInvestors, USD/GBP and USD/CAD rates — forexinvestors.com (November 14, 2026: 1 USD = 0.7569 GBP, 1.4267 CAD)