Investigación — A2UI, AG-UI y UI para Agentes ADK

Investigación: A2UI / AG-UI / UI de Producción para ADK

Fecha: Abril 2026 Contexto: Tenemos 7 agentes ADK desplegados en Cloud Run como servidores A2A. Queremos una interfaz web real y productiva para usuarios no-developers.

---

1. El Mapa de Protocolos (No son lo mismo)

Antes de entrar en cada uno, la distinción crítica que mucha gente confunde:

Protocolo	Quién lo hizo	Para qué sirve	Capa
MCP	Anthropic	Conectar agentes con tools y datos	Backend → Tools
A2A	Google	Agente ↔ Agente (inter-agent)	Agent → Agent
AG-UI	CopilotKit (MIT)	Streaming de eventos entre agente y frontend	Agent → Frontend
A2UI	Google (Apache 2.0)	Formato declarativo para UI generada por agentes	Agent → UI components

AG-UI y A2UI no compiten: AG-UI es el canal de comunicación, A2UI es el formato del payload de UI. Son complementarios. CopilotKit implementa ambos.

---

2. A2UI — Estado Real (Abril 2026)

Versión y madurez

• Versión estable: v0.8 (Public Preview)
• Versión draft: v0.9 (en desarrollo — agrega createSurface, custom catalogs)
• Target v1.0: Q4 2026 (con stability guarantees)
• GitHub: google/A2UI — 13.8k estrellas, 542 commits, Apache 2.0
• Creado por: Google, con contribuciones de CopilotKit y open source

Cómo funciona (técnico)

A2UI es un formato declarativo de datos, no código ejecutable. El agente genera JSON con una lista plana de componentes de un catálogo pre-aprobado (18 primitivas: Row, Column, TextField, Button, Card, etc.). El cliente renderiza esos componentes con su framework nativo.

Flujo:

1. Usuario envía mensaje → agente
2. Agente produce A2UI JSON (estructura + datos)
3. JSON streameado al cliente (vía AG-UI generalmente)
4. Cliente renderiza con componentes nativos
5. Interacciones del usuario → de vuelta al agente

Por qué importa el diseño: No es código que se ejecuta → no hay ataques de UI injection. El cliente solo puede renderizar lo que ya tiene en su catálogo.

Renderers disponibles HOY

• ✅ Web Components (Lit) — estable
• ✅ Angular — estable
• ✅ Flutter / Flutter GenUI SDK — estable
• ✅ AG-UI/CopilotKit — integración day-zero
• ⏳ React — Q1 2026 en roadmap ← crítico para Next.js

Integraciones en producción

• Gemini Enterprise (Google interno)
• Opal (mini-app builder)
• Flutter GenUI SDK
• CopilotKit

Veredicto A2UI para nuestro caso

A2UI está en public preview funcional pero sin React renderer nativo. Para una app Next.js necesitas usar Web Components via wrapper o esperar al renderer React (debería estar ya en Q1-Q2 2026). Para Flutter o Angular → listo hoy. Para la mayoría de devs web → aún requiere trabajo extra.

---

3. AG-UI Protocol — Estado Real (Abril 2026)

Versión y madurez

• ag-ui-protocol (Python): v0.1.15 (lanzado 1 Abr 2026) — releases activos cada 2-3 semanas
• ag_ui_adk (Python middleware): v0.4.2
• GitHub: ag-ui-protocol/ag-ui — 12.8k estrellas, 1,408 commits, MIT
• Mantenedor: CopilotKit (Markus Ecker)

Qué hace AG-UI técnicamente

Protocolo event-based que estandariza cómo los backends de agentes se conectan a frontends. Emite ~16 tipos de eventos estándar via SSE (Server-Sent Events). No reemplaza ni compite con A2A — opera en la capa usuario-fronted, no entre agentes.

Frameworks con soporte 1st-party:

• ✅ Google ADK
• ✅ LangGraph
• ✅ CrewAI
• ✅ Microsoft Agent Framework
• ✅ Pydantic AI, Agno, LlamaIndex, Mastra

Stack concreto para ADK + AG-UI (lo que realmente funciona hoy)

Backend (Python):

pip install ag-ui-adk fastapi uvicorn

from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint
from google.adk.agents import Agent
from fastapi import FastAPI

my_adk_agent = Agent(name="assistant", instruction="...", model="gemini-2.0-flash")

adk_agent = ADKAgent(
    adk_agent=my_adk_agent,
    app_name="my_app",
    user_id="demo_user",
    session_timeout_seconds=3600,
    use_in_memory_services=True  # producción: reemplazar con GCS/Vertex
)

app = FastAPI()
add_adk_fastapi_endpoint(app, adk_agent, path="/")

Frontend (Next.js):

// /api/copilotkit route
import { CopilotRuntime, ExperimentalEmptyAdapter } from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new HttpAgent({
      url: "https://tu-agente.run.app/",  // Cloud Run URL aquí
    }),
  },
});

// layout.tsx
<CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
  {children}
</CopilotKit>

Multi-agente con AG-UI (nuestro caso: 7 agentes)

El middleware crea wrappers independientes por agente:

agent1_wrapper = ADKAgent(adk_agent=agente_1, app_name="app", user_id="user")
agent2_wrapper = ADKAgent(adk_agent=agente_2, app_name="app", user_id="user")

add_adk_fastapi_endpoint(app, agent1_wrapper, path="/agents/agent1")
add_adk_fastapi_endpoint(app, agent2_wrapper, path="/agents/agent2")

Gap crítico: nuestro caso (7 agentes A2A en Cloud Run)

El middleware ag_ui_adk embebe el agente ADK en el proceso FastAPI. Es decir, el backend AG-UI actúa como un proxy/orchestrator que llama internamente a los agentes ADK.

¿Esto funciona con agentes ya desplegados como servidores A2A independientes?

No directamente. El patrón documentado asume que el ADK agent corre dentro del mismo proceso FastAPI que sirve AG-UI. Para nuestro caso (7 agentes en Cloud Run separados), necesitarías:

Opción A: Un 8vo servicio “Gateway AG-UI” que use RemoteA2aAgent de ADK para conectarse a los 7 Cloud Run endpoints y luego los exponga via AG-UI al frontend.

Opción B: Agregar un endpoint AG-UI a cada uno de los 7 agentes existentes (modifica el Dockerfile de cada uno).

La documentación oficial no cubre explícitamente el patrón de AG-UI apuntando a agentes A2A remotos ya desplegados. La documentación solo muestra localhost. La autenticación IAM para Cloud Run tampoco está documentada en ejemplos de AG-UI.

---

4. Alternativas para UI de Producción sobre ADK en Cloud Run

Opción 1: AG-UI + CopilotKit + Next.js (recomendada para React)

Stack: ag_ui_adk (Python FastAPI) + @copilotkit/react-core (Next.js) Madurez: ★★★★☆ — producción viable con trabajo de integración Pros: La más feature-rich (generative UI, human-in-the-loop, shared state), respaldada por Google Contras: Patrón documentado asume agente local, no remoto A2A. Authentication no documentada.

Opción 2: ADK API Server + Next.js directo (BFF pattern)

Stack: ADK desplegado con adk api_server en Cloud Run + Next.js con BFF (API routes proxying) Madurez: ★★★★☆ — documentado en codelabs oficiales Pros: Simple, sin dependencias extra, soporte oficial de ADK, CORS fácil de manejar Contras: No tienes generative UI ni shared state. Solo chat básico.

Patrón:

Browser → Next.js API routes → Cloud Run ADK API server

Los API routes de Next.js actúan como BFF, guardan las URLs y credentials server-side. El browser llama al BFF, el BFF llama a cada agente en Cloud Run.

Opción 3: Gradio (Python, quick & dirty)

Madurez: ★★★★☆ — usado en codelabs oficiales de Google (A2A Purchasing Concierge) Pros: Extremadamente rápido de implementar si el backend es Python Contras: No es una “UI de producción” para usuarios finales. Feo. No customizable.

Opción 4: Streamlit

Madurez: ★★★☆☆ — hay ejemplos de ADK + Streamlit Pros: Más fácil que React, visualizaciones integradas Contras: No pensado para producción de usuario final. Sessions problemáticas con agentes stateful.

Opción 5: Chainlit

Madurez: ★★★☆☆ — no hay integración oficial con ADK (issue abierto en adk-docs #509) Pros: Mejor UI conversacional que Gradio/Streamlit Contras: Necesitas integration layer custom. No hay soporte oficial.

Opción 6: A2UI + Flutter (para mobile/desktop)

Madurez: ★★★★☆ — el caso más sólido de A2UI Pros: Flutter GenUI SDK listo, Google lo usa en producción internamente Contras: Requiere app nativa, no web app. Excede nuestro scope actual.

---

5. Stack Mínimo Viable para HOY (Abril 2026)

Para demo/prototipo funcional rápido

Gradio (Python) → ADK Orchestrator con RemoteA2aAgent → 7 Cloud Run endpoints

Tiempo estimado: 2-4 horas. Resultado: feo pero funcional.

Para “producción real” con usuario no-developer

Next.js (Vercel) → Next.js API routes (BFF) → ADK A2A Orchestrator en Cloud Run → 7 agentes

• El BFF maneja autenticación IAM, secrets, CORS
• La UI es un chat custom con streaming SSE
• No necesitas AG-UI ni A2UI para esto
• El ADK API server incluye endpoints REST estándar

Tiempo estimado: 1-2 días de trabajo. Más robusto y sin dependencias alpha.

Para “producción con generative UI” (más impressive para video)

Next.js + CopilotKit → AG-UI Runtime → Gateway Service (FastAPI + ag_ui_adk + RemoteA2aAgent) → 7 Cloud Run endpoints

• Un 8vo servicio “gateway” en Cloud Run
• Ese gateway usa RemoteA2aAgent de ADK para llamar a los 7 agentes
• El gateway sirve el protocolo AG-UI al frontend
• Authentication: el gateway maneja OIDC tokens para los 7 servicios backend

Tiempo estimado: 3-5 días. Más complejo pero demo visualmente más impressive.

---

6. Veredicto: ¿Hay video aquí?

¿Vale la pena hacer un video sobre “interfaz productiva para agentes ADK”?

SÍ, hay material. Pero con el enfoque correcto.

Lo que SÍ está estable y documentado

• El protocolo AG-UI en sí (v0.1.15, activo, bien documentado)
• La integración ag_ui_adk (v0.4.2, funciona)
• El stack Next.js + CopilotKit + ADK agent local
• El patrón ADK API server en Cloud Run
• La teoría de A2UI (bien explicada, funcional en Flutter/Angular)

Lo que NO está documentado (gap que tenemos que resolver nosotros)

• AG-UI apuntando a agentes A2A ya desplegados en Cloud Run (no hay ejemplo oficial)
• Authentication IAM entre AG-UI gateway y Cloud Run services
• Multi-agent routing desde un frontend AG-UI a N agentes independientes

Ángulo de video recomendado

No hacer un video de “qué es A2UI y AG-UI” (ya hay suficiente contenido de ese tipo). Hacer:

“Construí una interfaz web para mis 7 agentes ADK en Cloud Run (y esto es lo que nadie te explica)”

El valor único es exactamente el gap: mostrar el patrón real de conectar una UI de producción a agentes A2A remotos ya desplegados, con autenticación IAM, multi-agent routing, y UX de usuario final. Eso no existe documentado.

Timing

• Abril-Mayo 2026: Buen momento. El stack está maduro suficiente. React renderer de A2UI llegará en Q1-Q2 2026 (probablemente ya).
• Después de Q4 2026: Más fácil de hacer pero menos primicia.
• Recomendación: Hacer el video como parte natural del siguiente paso del proyecto actual — después de tener los 7 agentes corriendo en Cloud Run.

---

7. Recursos Clave

• ADK AG-UI docs oficiales
• Google Developers Blog — ADK + AG-UI
• A2UI sitio oficial
• GitHub google/A2UI
• GitHub ag-ui-protocol/ag-ui
• ag_ui_adk en PyPI
• CopilotKit Blog — Frontend para ADK
• Google Developers Blog — Guía de Protocolos de Agentes
• Codelab A2A Purchasing Concierge (con Gradio)
• Mete Atamel — Tour de Protocolos de Agentes (Apr 2026)
• A2UI Roadmap
• Trendmicro ADK-AGUI middleware
• ADK Training Hub — UI Integration