Vercel 发布 UI SDK：不给 Agent 现成组件，给它 50 多种“交互行为”，还让它绕过截图直接操作界面

Vercel 推出 UI SDK beta，由 shadcn 和 Shu Ding 操刀，Apache 2.0 开源。 北京时间 11 月 13 日凌晨 2 点 41 分，Vercel 官方只发了一句“Introducing the UI SDK”加一段 100 秒视频，几个小时点赞 2600+、收藏近 2000——收藏数快赶上点赞，这是开发者“先存着回头细看”的典型信号。

一句话：这不是又一个组件库，而是一个给 Agent 用的“行为库”。

不给 Select，给造 Select 的零件

官方的例子很直白：给 Agent 一个 Select 组件，它只能做出 Select。换成给它 Select 背后的三块零件——弹出层 createPopup、列表选择 createSelection、打字跳转 createTypeahead——它不仅能拼出 Select，还能拼出 autocomplete、combobox，甚至一个还没人起过名字的新控件。

这些 behavior 就是一个组件真正难写的部分：键盘导航、焦点管理、单选/多选（带 Shift、Ctrl 的文件管理器式选择）、弹层定位与关闭、拖拽排序、尺寸调整、画布平移缩放、虚拟列表，以及对应的 ARIA 无障碍语义。官方说做了 50 多种，全部放在 @ui-sdk/core，再通过适配器跑在 React、Vue、Svelte、Solid 和 Web Components 上。

用法也很“Agent 原生”：npm install @ui-sdk/react @ui-sdk/core，然后 npx skills add vercel-labs/ui --skill ui-sdk 把技能装给你的 Agent。人类几乎不用自己写——官网原话是“怎么用 behavior 搭组件？你不用，问你的 Agent。”

真正的看点在后半段：Agent 不看截图，直接调组件 API

大多数人会把它读成“AI 写前端更准了”。这只说对了一半。

UI SDK 还带一个 agent bridge：createAgent() 之后，agent.snapshot() 会把页面上每个组件的标签、当前状态和可调用动作列出来，比如一个输入框是 {label: "Project name", value: "Apollo", actions: ["setValue","clear"]}。Agent 想改名，直接按标签调 setValue("Atlas")，变更走组件自己的 API 和回调。应用可以挂一个 allow 回调审批或拒绝 Agent 的请求，回调里还能看到 source: "agent" 并取消改动。这套工具也能通过 WebMCP 注册给支持的浏览器。

官方给了一组可核对的基准：同一个“项目设置”任务（改名、改成员、改通知、保存），都是 Claude Code 跑 Sonnet、同样的 system prompt，三次取中位数——

• 工具调用：16 次 → 5 次（−69%）
• 读取文本：39.8k → 6.8k 字符（−83%）
• 耗时：41 秒 → 16 秒（−61%）
• 成本：$0.073 → $0.032（−56%）

对照组是在另一套组件库做的同一屏上用浏览器工具硬操作。这就是官网那句“快两倍以上、成本不到一半”的出处。

为什么这件事值得盯

过去一年 computer use 的主流路线是“看截图 + 读无障碍树 + 模拟点击”，本质是让 Agent 去适应给人设计的界面。UI SDK 反过来：界面在出生时就带着给 Agent 的说明书和操作口。label 在屏幕上是文字，在 Agent 眼里是地址。

这和 shadcn 一贯的打法一脉相承——shadcn/ui 当年把组件“复制进你的代码库”，这次把组件再往下拆成行为，让 Agent 现场组装。仓库 10 月 26 日就建了，挂着 headless、mcp、webmcp 这些标签，发布当天星标过千。

当然它还是 beta，API 随时会变，基准也只有一个任务、三次运行、厂商自测。但方向很清楚：前端的下一个默认值，不只是“好看、无障碍”，而是“Agent 能读、能改、能被审批”。Vercel 想把这一层标准握在自己手里。