Permite a los Agentes IA
Generar UI de Forma Segura
A2UI es un protocolo de UI declarativo abierto que permite a los agentes IA renderizar interfaces interactivas ricas de forma segura en múltiples plataformas sin ejecutar código arbitrario.
Cuatro Características Principales
Diseñado para interacciones UI en la era de la IA, resolviendo el renderizado seguro a través de límites de confianza
Seguridad Primero
Security by Design
Usa formato de datos declarativo, no código ejecutable. Los agentes solo pueden usar componentes pre-aprobados, eliminando riesgos de inyección UI a nivel arquitectónico.
Amigable con LLM
LLM-Friendly Format
Estructura JSON plana optimizada para generación token a token de LLM. El modelo de lista de adyacencia soporta análisis eficiente y actualizaciones incrementales.
Agnóstico de Framework
Framework Agnostic
La misma respuesta A2UI puede renderizarse en React, Angular, Flutter o plataformas móviles nativas usando componentes nativos de cada plataforma.
Renderizado Progresivo
Progressive Rendering
Soporta actualizaciones UI en streaming, los usuarios ven la interfaz construirse progresivamente en tiempo real. Respuesta instantánea, experiencia natural.
Cómo Funciona
A2UI permite comunicación segura entre Agentes IA y clientes a través de un protocolo declarativo
Usuario Envía Mensaje
El usuario envía una solicitud al Agente IA, ej., "Buscar restaurantes cercanos"
Agente Genera A2UI
El Agente IA genera un mensaje A2UI describiendo la UI (árbol de componentes en formato JSON)
Streaming
El mensaje se transmite al cliente en streaming, soportando renderizado mientras genera
Renderizado Local
El cliente renderiza UI usando componentes nativos (React/Flutter/Angular)
Interacción del Usuario
El usuario interactúa con la UI, los eventos se envían de vuelta al Agente
Actualización de Respuesta
El Agente responde con nuevo mensaje A2UI, la UI se actualiza dinámicamente
Vista General de Arquitectura
Prueba A2UI Composer
Construye y prueba interfaces A2UI directamente en tu navegador con herramientas visuales,
arrastra y suelta componentes, vista previa en vivo, exporta JSON con un clic
Desarrollado por CopilotKit
Constructor Visual
Arrastra y suelta componentes para construir UI rápidamente, WYSIWYG
Vista Previa en Vivo
Vista previa de renderizado instantáneo, respuesta en milisegundos
Exportar JSON
Exportación con un clic a formato A2UI estándar
Ejemplos de Código
Una respuesta A2UI, renderizado nativo en múltiples plataformas
1{2 "type": "surface",3 "surface_id": "main_content",4 "components": [5 {6 "id": "card_1",7 "type": "card",8 "props": {9 "title": "Italian Restaurant",10 "subtitle": "0.5 km away",11 "image": "https://..."12 },13 "children": ["rating_1", "btn_1"]14 },15 {16 "id": "rating_1",17 "type": "rating",18 "props": { "value": 4.5, "count": 128 }19 },20 {21 "id": "btn_1",22 "type": "button",23 "props": {24 "label": "View Details",25 "action": "view_restaurant"26 }27 }28 ]29}Frameworks y plataformas soportados
Empoderando Cada Rol
Sea cual sea tu rol, A2UI te ayuda a construir mejores productos impulsados por IA
Desarrollador
- SDK claro y especificaciones de protocolo
- No atado a ningún framework específico
- Soporte para componentes personalizados
- Soporte nativo de salida en streaming
- Seguridad de tipos TypeScript
Product Manager
- Arquitectura declarativa, segura y compatible
- Define una vez, renderiza en todas partes
- Renderizado streaming, respuesta instantánea
- Respaldado por Google, confiable
- Comunidad open source, iteración continua
- Reduce barreras de desarrollo de productos IA
Diseñador
- Usa componentes nativos, mantén consistencia de diseño
- Experiencia nativa multiplataforma
- IA genera UI contextual
- Herramienta visual Composer
- Soporte de estilos personalizados
Recursos para Desarrolladores
Desde documentación hasta ejemplos, comienza con A2UI rápidamente
Inicio Rápido
Comienza con A2UI en 5 minutos, ejecuta tu primer ejemplo
Conceptos Básicos
Aprende sobre Surface, Component, Data Binding y otros conceptos principales
Guía del Desarrollador
Integra A2UI en tu app, o construye un Agente IA
Especificaciones
Especificaciones técnicas completas y referencia de tipos de mensaje
Demos de Ejemplo
Experimenta A2UI en acción
A2UI es código abierto, contribuciones bienvenidas
Ver en GitHubApache 2.0