Dynamic Generative UI Frontends con CopilotKit y agentes de IA.
De chatbots de solo texto → a interfaces dinámicas generadas por agentes.
Chatbot de texto
Texto entra, texto sale
A2UI · JSON declarativo
El agente describe la UI
UI generada por el agente
Componentes en tiempo real
Presentador
Angel Arrieta
Founding Tech Lead · Medellín
Problema · Cómo llegamos hasta aquí
Hablábamos con la máquina escribiendo comandos. Todo era texto, en ambos sentidos.
Ventanas, botones y formularios. Potente — pero cada pantalla se diseña 100% a mano.
La IA llega a las masas… como un chat: texto que entra, texto que sale.
Mostrar datos complejos —dashboards, listas, formularios— solo con texto es incómodo. El agente “piensa”, pero la UI sigue estática y el trabajo extra lo hace el usuario.
Concepto · ¿Qué es Generative UI?
Interfaces donde parte de la UI se genera o controla dinámicamente por un agente, en tiempo de ejecución.
El agente no solo decide qué decir, también decide qué componentes mostrar y cómo organizarlos.
Todas las pantallas y layouts se definen 100% a mano en diseño y código.
Algunas partes se adaptan a la intención del usuario y al contexto, gracias al agente.
Taxonomía · El espectro de Generative UI
Un mismo eje: de totalmente controlado a totalmente abierto. Haz clic en cada nodo.
El enfoque de esta charla.
El agente devuelve una especificación estructurada (JSON / A2UI); el cliente la renderiza con componentes nativos del catálogo.
👉 En esta charla nos enfocamos en Declarative — la base de A2UI.
Google · La especificación
La especificación de Generative UI de Google para interfaces controladas por agentes.
“A2UI es el lenguaje en JSON que usan los agentes para decirle al frontend qué UI mostrar.”
Basic catalog · Sin componentes custom
Cada superficie A2UI está respaldada por un catálogo de componentes permitidos.
Demos y productos usando solo el catálogo básico — sin crear componentes React nuevos.
El agente no puede inventar tipos fuera del catálogo aprobado.
Ecosistema · AG-UI ≠ A2UI
Se parecen en el nombre, pero resuelven cosas distintas — y se complementan.
El QUÉ — la especificación de Generative UI.
El agente entrega widgets / UI declarativa. Es una gen UI spec, junto a MCP-UI y Open-JSON-UI.
El CÓMO — el protocolo de interacción.
La conexión runtime bi-direccional entre el backend agéntico y tu app. No es una spec de gen UI; la transporta.
👉 A2UI describe la UI · AG-UI la transporta en tiempo real.
El puente · ¿Dónde entra CopilotKit?
El stack de frontend (React/Next.js) que implementa AG-UI + A2UI para conectar agentes y UI.
CopilotKitProvider para configurar el runtime y A2UI.CopilotChat para chat + UI generativa.surfaceUpdate y pinta el catálogo básico.“La forma más rápida de traer A2UI a frontends React sin re-inventar el runtime.”
Backend · Agente + A2UI
CopilotRuntime con nuestros agentes.a2ui: {} para transmitir mensajes A2UI.surfaceUpdate, no solo texto.{
"surfaceUpdate": {
"surfaceId": "summary-surface",
"components": [{
"id": "card-1",
"component": {
"type": "Card",
"props": {
"title": "Resumen de hoy",
"body": "Card generado con A2UI."
}
}
}]
}
}Frontend · React + CopilotKit + A2UI
CopilotKitProvider → /api/copilotkit.a2ui={{}}.CopilotChat devuelve texto y componentes UI A2UI.<CopilotKitProvider
runtimeUrl="/api/copilotkit"
a2ui={{}} // usar catálogo básico A2UI
>
<CopilotChat title="Google A2UI Demo" />
</CopilotKitProvider>Demo en vivo · A2UI → render real
Edita el surfaceUpdate y pulsa Renderizar. Esto es lo que hace el renderer del catálogo básico.
Conclusiones
¡Gracias! 🚀
Preguntas → Angel Arrieta