Vercel推出供编程Agent组合的UI行为库

Vercel Labs 发布的 UI SDK，想让 AI 编程代理从「拼现成组件」走向「组合交互行为」：把焦点、选择、弹层等能力交给代理，再由它组装界面。它还提供运行时桥接，让代理直接读取组件状态、执行操作。

这件事值得看，原因不只是官方宣称任务耗时下降了 61%。更有意思的是，它同时处理了两个问题：AI 怎么写出交互完整的组件，以及 AI 怎么操作这些组件。不过，目前的性能证据只有一个任务、三次运行，离普遍结论还很远。

把行为拆开，能解决组件库的什么问题

UI SDK 是一个开源 beta 无头库（headless library）。这里的「无头」指它主要提供交互逻辑，不替应用决定最终外观。

以 Select 为例，代理拿到的是 popup、selection model 和 typeahead，分别负责弹层、选中状态、输入字符定位。同一组能力还能组合成 autocomplete 或 combobox，不必被某个成品组件的结构固定住。

原文列出的行为包括：

• createRovingFocus：列表只有 1 个 Tab 停靠点，内部用方向键移动。
• createTypeahead：输入几个字母，跳到匹配项。
• createPopup：弹层跟随触发器，并保持在屏幕内。
• createSelection：处理单选、多选，以及 Shift、Ctrl 操作。
• createReorder、createResize、createViewport、createVirtualizer：覆盖重排、缩放、视口和虚拟化。

这些行为及所需的 ARIA 支持集中在 @ui-sdk/core，文档分成从 Focus、Keys 到 Canvas 的 10 类。仓库有 51 个组件模块，提供 50+ 行为，也包含 Select、Combobox、Date Picker、Menu、Tree、Color Picker 等预构建组件。

开发时用 definePrimitive 定义状态、API 和 slots，再通过 slots 把属性、事件、行为接到 DOM 上。各框架用 createParts 渲染，README 称 5 个适配器中的 parts 一致。原文的搜索框示例使用 createFocusRecovery，Clear 按钮仅在有文本时出现，但没有附出完整代码，不能据此判断具体实现。

它真正想复用的是交互规则，而不只是组件长相。

代理既要会写组件，也要能操作组件

接入分为开发阶段和运行阶段。

开发阶段，官方让用户把一段安装提示交给代理，由它安装依赖，并在 AGENTS.md 中添加指引，指向 ui-sdk skill 和包文档里的 llms.txt。skill 的安装命令是：

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

注意最后的 --skill ui-sdk，它指定要安装的 skill。

React 项目安装核心和适配器使用：

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

注意这一行同时安装了适配器与核心包；其他框架要替换适配器。无需构建的页面也可按 skill 说明加载 ui-sdk.dev 提供的 web.js、web.css，可选的 web.css 提供默认外观。

运行阶段，则在页面渲染前调用 createAgent()。代理通过 agent.snapshot() 获取组件、状态和可执行动作，再用 agent.act() 执行动作，例如通过 setValue 修改项目名称。

这让代理有机会绕开截图识别和逐个寻找 DOM 元素，直接操作应用暴露的能力。应用可用 allow 回调允许或拒绝动作；变更回调会收到 source: "agent"，也可以取消变更。工具还可通过 WebMCP 注册给支持它的浏览器。

这里的前提很具体：应用必须接入桥接，并暴露相应动作。它不是给任意网站自动补上可操作接口。

快了多少，以及这些数字能说明什么

Vercel 比较了桥接与浏览器工具完成项目设置任务的表现：重命名项目、更新成员及通知设置，最后保存。两边都通过 Claude Code 使用 Sonnet，任务和系统提示相同，结果取 3 次运行的中位数。

指标	浏览器工具	UI SDK + bridge	变化
工具调用	16	5	-69%
读取字符数	39.8k	6.8k	-83%
耗时	41 s	16 s	-61%
成本	$0.073	$0.032	-56%

这些结果与桥接的工作方式相符：代理直接拿到结构化状态和动作，通常就有机会减少读取与调用。但实验仅覆盖 1 个任务，浏览器工具组还用了不同组件库，Sonnet 的具体版本也未披露。因此，不能把差异全部归因于桥接，更不能直接套到自己的项目。

接入门槛也需要一起看。6 个 npm 包于 2026 年 11 月 12 日发布，版本均为 0.1.0-beta.1，采用 Apache-2.0。支持现代浏览器，不需要 GPU；框架要求是 React 19+、Vue 3.5+、Svelte 5.33+、Solid 2.0.0-rc.14+，也支持普通 Web Components。beta API 仍可能变化。

我的判断

我认可它把「代理如何理解和操作组件」纳入组件库设计。skill、llms.txt 和运行时桥接串起来，比单独提供一份组件文档更完整。

但行为与标记分离并不是新发明。React Aria 的 hooks、Ark UI 底层的 Zag.js 状态机已经在做类似拆分。UI SDK 的差异主要在代理这一层，而不是首次实现无样式组件。

原文截至 2026 年 11 月 13 日的对照是：Radix Primitives 1.8.1、React Aria Components 1.22.1、Base UI 1.9.0、Ark UI 5.40.0；对应 React 要求分别为 16.8 到 19、16.8 到 19、17 到 19、18+。前三者面向 React，Ark UI 覆盖 React、Vue、Solid、Svelte。许可证除 React Aria 为 Apache-2.0 外，其余三者为 MIT。表中其他库的代理能力标为「未披露」，不能读成「完全没有」。

对于已有组件库的团队，原文没有提供迁移成本、复杂交互质量或可访问性对照数据。是否值得替换，仍缺证据。可以把这次实验看成验证方向的信号，暂时别把它当成选型排名。

能拿来做什么

• 如果项目已经满足框架版本要求，可以先挑一个 Select 或 Combobox，验证行为组合是否覆盖键盘、焦点和选择需求，再决定是否扩大使用范围。
• 如果正在做 AI 操作后台的能力，可以参考 snapshot() 与 act() 的分工，把组件状态和允许执行的动作明确暴露出来，并用 allow 和变更回调控制执行。
• 如果要复测效率，就用同一个应用、同一个模型版本和同一批任务比较两种操作方式，同时记录调用数、读取量、耗时与成本，减少原文实验中的干扰因素。
• 如果团队仍在 React 18 或更早版本，先把 React 19+ 的要求列入接入成本；已有组件库也可以先评估增加结构化操作接口的方案。