Vercel Labs has released UI SDK, an open-source beta library of interface behaviors built for coding agents. Vercel UI SDK is a headless library that ships behaviors, not finished components. Agents combine those behaviors into accessible components for React, Vue, Svelte, Solid and Web Components. You can check the deployment options and specs here through our GPULeaderboard.com chrome extension.
TL;DR
- Size: 50+ behaviors, 51 component modules in the repo, 6 npm packages at
0.1.0-beta.1 - Runs on: Any modern browser, no GPU. React 19+, Vue 3.5+, Svelte 5.33+, Solid 2 RC, or plain Web Components
- Performance: In Vercel’s own test, an agent used 69% fewer tool calls on a settings task
- Best: Task time fell 61%, from 41 s to 16 s, with the agent bridge (self-reported)
- Worst: That benchmark covers 1 task and 3 runs, and beta APIs may still change
What is Vercel UI SDK?
UI SDK is a library of UI behaviors from Vercel Labs that agents assemble into components. The README lists keyboard navigation, focus, selection, dismissal, popups, drag and drop, and the ARIA they need. All of it lives in @ui-sdk/core. Thin adapters render it in each framework.
The project site explains the idea with a Select. You do not hand the agent a finished Select. 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.
How does UI SDK work?
Components start as primitives defined with definePrimitive. A primitive declares state, an API and slots. Slots attach attributes, events and behaviors to DOM parts. The README example builds a search field with createFocusRecovery. Its Clear button appears only when there is text.
Each framework then renders the primitive with createParts. The README says the parts are the same in all 5 adapters. So 1 behavior definition can serve a React app and a Svelte app.
Which behaviors ship?
Behaviors shown on ui-sdk.dev include:
createRovingFocus: arrow keys move through a list with 1 Tab stopcreateTypeahead: type a few letters to jump to an itemcreatePopup: opens next to its trigger and stays on screencreateSelection: select 1 or many, with Shift and CtrlcreateReorder,createResize,createViewportandcreateVirtualizer
The docs group behaviors into 10 categories, from Focus and Keys to Canvas. Prebuilt components include Select, Combobox, Date Picker, Menu, Tree and Color Picker.
How do agents learn it?
Setup is a prompt you paste into your agent. It installs the packages and adds a note to AGENTS.md. That note points the agent to the ui-sdk skill and to llms.txt inside the package docs. 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, per the skill listing.
‘;var p=demo.querySelector(‘.popb’),o=false;anim=setInterval(function(){o=!o;p.style.height=o?’64px’:’0′},1100);return}
a=items(4);
if(b[2]===’roving’){anim=setInterval(function(){a.forEach(function(x){x.classList.remove(‘hl’)});a[k%4].classList.add(‘hl’);k++},700)}
else if(b[2]===’type’){anim=setInterval(function(){a.forEach(function(x){x.classList.remove(‘hl’)});a[[0,2,3,1][k%4]].classList.add(‘hl’);k++},900)}
else if(b[2]===’sel’){anim=setInterval(function(){var s=k%5;a.forEach(function(x,j){x.classList.toggle(‘hl’,jconst agent = createAgent()’,null],
[‘agent.snapshot() // 4 components, state, actions‘,null],
[‘allow(“setValue”) // app approves‘,null],
[‘agent.act(“name”, “setValue”, “acme-app”)’,function(){var f=document.getElementById(‘fname’);f.textContent=”acme-app”;f.classList.add(‘flash’)}],
[‘agent.act(“members”, …)’,function(){var f=document.getElementById(‘fmem’);f.textContent=”3 members”;f.classList.add(‘flash’)}],
[‘agent.act(“notifications”, …)’,function(){document.getElementById(‘ftg’).classList.add(‘onn’)}],
[‘onChange({ source: “agent” }) // save‘,function(){var f=document.getElementById(‘fst’);f.textContent=”Saved”;f.classList.add(‘flash’)}]];
var log=document.getElementById(‘log’),run=null;
function reset3(){clearTimeout(run);log.innerHTML=”;document.getElementById(‘fname’).textContent=”acme-web”;document.getElementById(‘fmem’).textContent=”2 members”;document.getElementById(‘fst’).textContent=”Unsaved”;document.getElementById(‘ftg’).classList.remove(‘onn’);R.querySelectorAll(‘.fi’).forEach(function(f){f.classList.remove(‘flash’)})}
function go(i){if(i>=steps.length)return;var d=document.createElement(‘div’);d.innerHTML=’> ‘+steps[i][0];log.appendChild(d);setTimeout(function(){d.classList.add(‘in’)},20);if(steps[i][1])steps[i][1]();run=setTimeout(function(){go(i+1)},650)}
document.getElementById(‘run3’).onclick=function(){reset3();go(0)};
document.getElementById(‘reset3’).onclick=reset3;
/* tab 4 */
var M=[[‘Tool calls’,16,5,’16’,’5′,’-69%’],[‘Text read (chars)’,39.8,6.8,’39.8k’,’6.8k’,’-83%’],[‘Time’,41,16,’41 s’,’16 s’,’-61%’],[‘Cost’,0.073,0.032,’$0.073′,’$0.032′,’-56%’]];
var bw=document.getElementById(‘bars’);
M.forEach(function(m){var r=document.createElement(‘div’);r.className=”row”;r.innerHTML=’
‘+m[0]+’‘+m[5]+’
‘+m[3]+’
‘+m[4]+’
‘;bw.appendChild(r)});
function bars(){var r=bw.querySelectorAll(‘.row’);r.forEach(function(row,j){var a=row.querySelector(‘i.a’),b=row.querySelector(‘i.b’);a.style.width=”0″;b.style.width=”0″;setTimeout(function(){a.style.width=”100%”;b.style.width=(M[j][2]/M[j][1]*100)+’%’},80+j*120)})}
document.getElementById(‘replay4’).onclick=bars;
window.addEventListener(‘load’,post);window.addEventListener(‘resize’,post);setTimeout(post,300);
})();
