Vercel Labs presentó UI SDK, una biblioteca abierta en fase beta que reúne más de 50 comportamientos de interfaz para que agentes de programación compongan componentes en distintos frameworks. La herramienta separa las interacciones del componente visual y permite reutilizarlas en aplicaciones hechas con varias tecnologías.

Más de 50 comportamientos para distintas interfaces

El proyecto no entrega piezas cerradas para copiar y pegar, sino comportamientos que un agente puede ensamblar según la necesidad de la interfaz. Entre ellos figuran navegación por teclado, gestión del foco, selección, descarte y ventanas emergentes, además de atributos ARIA para hacer accesibles esas interacciones.

La propuesta apunta a tareas como crear un selector, un autocompletado o un cuadro combinado. En lugar de recibir un componente terminado, el agente puede combinar elementos funcionales como un popup, un modelo de selección y una función de búsqueda rápida.

El núcleo del proyecto, identificado como @ui-sdk/core, organiza esas capacidades en primitivas definidas con definePrimitive. Cada una declara estado, una interfaz de programación y partes que conectan atributos, eventos y comportamientos con elementos del documento web.

En el ejemplo de búsqueda incluido en la documentación, createFocusRecovery ayuda a gestionar el foco y a mostrar un botón de limpieza cuando el campo contiene texto. Después, los adaptadores renderizan la misma definición en distintos frameworks mediante createParts.

Compatibilidad con React, Vue, Svelte, Solid y Web Components

UI SDK contempla React, Vue, Svelte, Solid y Web Components, por lo que una misma definición de comportamiento puede reutilizarse en aplicaciones basadas en tecnologías distintas. Entre las funciones documentadas aparecen el movimiento por listas con las flechas del teclado, el salto a elementos mediante escritura, la selección individual o múltiple y herramientas para reordenar, cambiar tamaño o virtualizar contenido.

Las guías del proyecto agrupan los comportamientos en diez categorías, desde gestión del foco y teclas hasta funciones para lienzo. También muestran componentes preconstruidos como Select, Combobox, Date Picker, Menu, Tree y Color Picker.

Para orientar a un agente, los desarrolladores pueden instalar una habilidad y añadir una instrucción a AGENTS.md. La documentación indica que esa nota dirige al agente hacia la habilidad de UI SDK y el archivo llms.txt.

Los seis paquetes publicados en npm están en la versión 0.1.0-beta.1, con licencia Apache-2.0 y fecha de publicación del 12 de noviembre de 2026. Los requisitos mínimos indicados son React 19, Vue 3.5, Svelte 5.33 y Solid 2.0.0-rc.14; además, un archivo opcional web.css aplica una apariencia predeterminada.

Un puente para que el agente actúe sobre la interfaz

La propuesta también busca que un agente pueda operar directamente una interfaz durante su ejecución. La documentación describe createAgent(), que se configura antes de que la página se renderice y permite consultar qué componentes existen, cuál es su estado y qué acciones pueden realizarse.

Con agent.snapshot(), el agente obtiene una descripción de los componentes y las acciones disponibles; con agent.act(), puede ejecutar operaciones, como cambiar el nombre de un proyecto mediante setValue. Así, la interacción se organiza alrededor del estado y las acciones expuestas por la aplicación, en lugar de depender solo de la lectura visual de una captura.

Las aplicaciones pueden definir un callback allow para aceptar o rechazar las acciones propuestas por el agente, y los callbacks de cambio reciben el origen agent. La documentación también permite cancelar un cambio y señala que, en navegadores compatibles, las herramientas pueden registrarse mediante WebMCP.

Ese diseño incorpora controles para que la automatización no equivalga a conceder acceso irrestricto a cada acción. La aprobación o el rechazo quedan en manos de la aplicación, mientras que la identificación del origen permite distinguir los cambios iniciados por el agente.

Una prueba interna con menos llamadas y menos costo

Vercel comparó su puente de agente con herramientas de navegador en una tarea de configuración de proyecto. El agente debía renombrar el proyecto, actualizar miembros y ajustes de notificaciones y guardar los cambios; ambos ensayos utilizaron Sonnet a través de Claude Code y compartieron la misma tarea y el mismo mensaje de sistema.

En las medianas de tres ejecuciones, las llamadas a herramientas bajaron de 16 a 5 con UI SDK, una reducción reportada de 69%. El texto leído descendió de 39.800 a 6.800 caracteres, equivalente a 83% menos, mientras que el tiempo pasó de 41 a 16 segundos y el costo, de USD $0,073 a USD $0,032.

La compañía presentó esas cifras como orientativas, no como una evaluación amplia del rendimiento en distintas aplicaciones. El benchmark cubrió una sola tarea y tres ejecuciones, y la alternativa con herramientas de navegador usó una biblioteca de componentes diferente.

Vercel tampoco identificó la versión de Sonnet utilizada en la comparación. Por ello, los datos sirven como una señal inicial sobre el posible ahorro de interacciones y lectura de contenido, pero no permiten extrapolar el mismo resultado a otras tareas, marcos de trabajo o configuraciones de agentes.