Vercel lanza UI SDK: agentes de IA arman interfaces

Qué es UI SDK de Vercel y por qué no es otra librería de componentes

Vercel Labs publicó UI SDK, una biblioteca abierta en fase beta con más de 50 comportamientos de interfaz que los agentes de programación ensamblan para construir componentes accesibles. El dato que importa: no es un catálogo de componentes para copiar, sino un conjunto de piezas funcionales que el agente combina según la pantalla que debe resolver.

La distinción parece semántica y no lo es. Según la comparativa publicada por MarkTechPost, Radix Primitives y Base UI entregan componentes sin estilos, y React Aria entrega hooks y componentes. UI SDK va un paso antes: entrega un popup, un modelo de selección y una búsqueda por escritura, y deja que el agente decida qué armar con eso.

Con esas tres piezas se puede producir un selector simple, un autocompletado o un combobox que nadie diseñó todavía. Cuando la interfaz que necesitas no encaja en el catálogo, el catálogo deja de ser un límite.

¿Y esto cómo se aplica en tu negocio?

Dueños de negocio de Latinoamérica y España usan un agente de IA para ganar más y recuperar su tiempo. El Kit «tu mano derecha con IA» te muestra cómo en un video de 11 minutos, con una ficha para armar el tuyo. CAR está cerrada por ahora; al anotarte, te avisamos cuando abra.

👥 Quiero el Kit →

El proyecto corre en React 19+, Vue 3.5+, Svelte 5.33+, Solid 2.0.0-rc.14+ y Web Components. Los seis paquetes publicados en npm están en la versión 0.1.0-beta.1, bajo licencia Apache-2.0 y con fecha de publicación del 12 de noviembre de 2026.

¿Cómo funciona por dentro: primitivas, partes y adaptadores?

El núcleo, @ui-sdk/core, organiza todo en primitivas definidas con definePrimitive. Cada primitiva declara estado, una interfaz de programación y slots: los puntos donde se conectan atributos, eventos y comportamientos con elementos concretos del documento web.

Después, cada adaptador renderiza esa misma definición con createParts. El README del proyecto afirma que las partes se mantienen iguales en los cinco adaptadores. En la práctica, una sola definición de comportamiento sirve tanto para una app en React como para una en Svelte, sin reescribir la lógica de foco, teclado o accesibilidad.

El ejemplo de búsqueda del README usa createFocusRecovery para gestionar el foco y mostrar un botón de limpieza solo cuando el campo tiene texto. Entre los comportamientos documentados aparecen:

createRovingFocus, para moverse por una lista con las flechas usando un único punto de tabulación.
createTypeahead, para saltar a un elemento escribiendo unas letras.
createPopup, que se abre junto a su disparador y permanece en pantalla.
createSelection, con selección simple o múltiple usando Shift y Ctrl.
createReorder, createResize, createViewport y createVirtualizer.

Las guías agrupan todo en diez categorías, desde foco y teclas hasta canvas. También hay componentes preconstruidos —Select, Combobox, Date Picker, Menu, Tree y Color Picker— que funcionan como ejemplos de lo que se puede armar con las primitivas disponibles.

Cómo se le enseña la librería al agente

La instalación descrita es una skill más una nota en AGENTS.md. El comando indicado es npx skills add vercel-labs/ui --skill ui-sdk, y la nota dirige al agente hacia la skill de UI SDK y al archivo llms.txt de la documentación. Las páginas sin paso de build pueden cargar web.js y web.css desde el sitio del proyecto, y web.css es opcional: aplica una apariencia predeterminada.

El puente de agente: qué cambia cuando la IA deja de mirar capturas

La segunda mitad de la propuesta es la más interesante para quien automatiza producto. La documentación describe createAgent(), que se configura antes de que la página se renderice y permite saber qué componentes existen, cuál es su estado y qué acciones se pueden ejecutar.

Con agent.snapshot() el agente obtiene una descripción de componentes y acciones disponibles. Con agent.act() ejecuta operaciones, por ejemplo cambiar el nombre de un proyecto mediante setValue. La interacción se apoya en el estado expuesto por la aplicación, no en interpretar una captura de pantalla.

Aquí hay un detalle de diseño que conviene copiar en cualquier producto que exponga acciones a un agente: las aplicaciones pueden definir un callback allow para aceptar o rechazar cada acción propuesta. Los callbacks de cambio reciben el origen agent, de modo que tu código puede distinguir un cambio hecho por una persona de uno hecho por automatización, y cancelarlo si hace falta. En navegadores compatibles, las herramientas también pueden registrarse vía WebMCP.

Nada de esto es una garantía de seguridad independiente. Son mecanismos descritos en la documentación: la aprobación o el rechazo quedan en manos de la aplicación que los implemente.

Los números de la prueba: 69% menos llamadas y 61% menos tiempo

Vercel comparó su puente contra herramientas de navegador en una tarea de configuración de proyecto: renombrar el proyecto, actualizar miembros y ajustes de notificaciones, y guardar. Ambos ensayos usaron Sonnet a través de Claude Code, con la misma tarea y el mismo mensaje de sistema. Las cifras son medianas de tres ejecuciones.

Llamadas a herramientas: de 16 a 5, una reducción reportada de 69%.
Texto leído: de 39.800 a 6.800 caracteres, un 83% menos.
Tiempo: de 41 a 16 segundos, un 61% menos.
Costo: de US$0,073 a US$0,032 por ejecución.

Traducido a operación: si estás construyendo un agente que opera tu propio panel de administración, el cuello de botella no es el modelo, es cuántas veces tiene que ir y volver para entender la pantalla. Reducir eso es reducir factura y latencia al mismo tiempo.

¿Qué tan sólida es esa evidencia?

Menos de lo que sugiere el titular. El propio Vercel presenta las cifras como orientativas y no como una evaluación amplia de rendimiento entre aplicaciones distintas. Los límites son concretos:

El benchmark cubrió una sola tarea y tres ejecuciones.
La alternativa con herramientas de navegador usó una biblioteca de componentes diferente, así que no todo el resultado se puede atribuir al puente.
Vercel no identificó la versión de Sonnet utilizada.

Con esa muestra, los datos sirven como señal inicial sobre el ahorro de interacciones y de lectura, no como demostración de que la misma diferencia aparecerá en tus tareas, tus frameworks o tu configuración de agente. Cualquier promesa de ahorro basada solo en este benchmark está incompleta.

¿Cómo se compara con Radix, React Aria, Base UI y Ark UI?

MarkTechPost publicó una tabla comparativa con versiones de npm al 13 de noviembre de 2026. Lo relevante no son los números de versión sino el modelo de cada librería:

Radix Primitives (MIT, versión 1.8.1): componentes sin estilos, solo React.
React Aria Components (Apache-2.0, 1.22.1): hooks y componentes, solo React.
Base UI (MIT, 1.9.0): componentes sin estilos, solo React.
Ark UI (MIT, 5.40.0): componentes sobre máquinas de estado de Zag.js, para React, Vue, Solid y Svelte.
UI SDK (Apache-2.0, 0.1.0-beta.1): comportamientos que el agente compone, en cinco frameworks.

React Aria y Ark UI ya separaban comportamiento de marcado antes de que existiera UI SDK. La diferencia que aporta Vercel es la capa para agentes: una skill, un llms.txt empaquetado y un puente de ejecución en tiempo real. Y ahí hay una asimetría que conviene registrar: la tabla de MarkTechPost indica que ninguna de las otras cuatro declara explícitamente skill de agente o puente de runtime.

¿Qué significa esto para tu startup?

El ahorro real no está en escribir menos CSS. Está en cuánto cuesta que un agente opere el software que ya tienes.

Si tu producto tiene un panel con acciones de escritura, define hoy un contrato de estado y acciones. No necesitas migrar a UI SDK: necesitas poder decirle a un agente qué existe, en qué estado está y qué puede hacer, sin que tenga que adivinar con capturas. snapshot() y act() son una buena referencia de forma.
Empieza por una acción de bajo riesgo y mide. Toma una sola tarea acotada —renombrar algo, ajustar una preferencia— y cuenta llamadas a herramientas, caracteres leídos, tiempo y costo. Es la única forma de saber si el ahorro del 69% aparece en tu caso o si era el de Vercel.
Antes de exponer acciones, implementa el equivalente al callback allow. Aprobación explícita por acción y registro del origen del cambio. Si tu agente puede escribir sin ese filtro, tienes un problema de permisos, no de interfaz.
No planifiques una migración este trimestre. La API está en 0.1.0-beta.1 y los requisitos mínimos son altos: React 19, Vue 3.5, Svelte 5.33 y Solid 2 en release candidate. Si tu stack está una versión atrás, la adopción implica actualizar primero.

Conclusión

UI SDK no compite por quién tiene el mejor componente de select. Compite por una pregunta distinta: si un agente va a construir y operar interfaces, ¿qué necesita saber el agente sobre esa interfaz? La respuesta de Vercel es un catálogo de comportamientos con nombre propio, documentación legible por máquinas y un puente que expone estado y acciones.

La evidencia todavía es un plano de una sola tarea con tres ejecuciones. Eso no invalida la dirección, pero sí obliga a probarla con tus propios números antes de mover nada en producción. La parte que ya puedes copiar sin esperar a que la beta madure es el diseño: separar comportamiento de markup y darle al agente un contrato explícito en lugar de una pantalla que interpretar.