Vercel 发布 UI SDK 测试版：把弹层、选择、键盘导航等拆成 50 多个「行为」交给 AI 智能体组装组件，支持 React、Vue、Svelte、Solid 和 Web Components，Apache 2.0 开源

核心背景与行业痛点

让 AI 智能体写前端，最常见的做法是给它一套现成组件，比如一个 Select。智能体能拼出 Select，但需求一变成自动补全、多选标签输入或从没见过的控件，它就只能从零手写键盘导航、焦点、ARIA 等细节，容易出错，也很难测。另一头，智能体操作网页时大多靠截图识别，又慢又费 token。

架构亮点与底层机制

UI SDK 把组件拆到更底层的「行为」：createPopup 负责打开、定位和关闭，createSelection 负责单选多选，createTypeahead 负责输入跳转。核心逻辑在 @ui-sdk/core，用 definePrimitive 把多个行为组合成一个原语，再用各框架适配包的 createParts 渲染，五个框架的部件名称一致。官方还提供颜色选择器、日历、树、命令面板等示例组件，全部由同一批行为搭成。组件还能通过 WebMCP 暴露给浏览器里的智能体，让它直接读取状态、调用操作。

权威 Benchmark 与实测跑分对比

官方未公布标准化 Benchmark。官网只给出厂商口径：智能体不依赖截图直接操作控件，速度提升一倍以上、成本不到一半，但没有公开测试任务和对比对象。目前 GitHub 仓库约 100 星，处于早期阶段，效果仍需社区复测。

开发者实战落地与开箱指南

React 项目需 React 19 及以上，运行 npm install @ui-sdk/react @ui-sdk/core，其他框架换成对应适配包。再执行 npx skills add vercel-labs/ui --skill ui-sdk，并在 AGENTS.md 里提示智能体先读 node_modules 下的 llms.txt。之后直接让智能体「用 ui-sdk 做一个带清除按钮的搜索框」即可。现在是 beta，建议先用在内部工具或新页面，别急着替换生产组件库。