AG-UI: la interfaz que le faltaba a tus agentes de IA en AWS

Cómo conectar agentes de IA con interfaces reales usando AG-UI, CopilotKit y Amazon Bedrock AgentCore: UI generativa, estado compartido y human-in-the-loop, con código, arquitectura y recursos de mi charla en el AWS Community Day Bolivia 2026.

Juan Carlos Pampa Huanca

Full Stack Developer

Published Oct 1, 2026

Last modified Oct 1, 2026

Introducción: "solo es un chat"

AG-UI es el protocolo abierto que conecta a un agente de IA con la interfaz del usuario, y en AWS ya se despliega de forma nativa sobre Amazon Bedrock AgentCore Runtime. Este post resume la charla que presenté en el AWS Community Day Bolivia 2026 (Santa Cruz de la Sierra, 29 de agosto de 2026) y reúne en un solo lugar los recursos, repositorios y demos que mostré.

Cuando nos piden "un chat con IA", la frase suena sencilla. En la práctica implica resolver token streaming, una arquitectura de eventos, estado compartido, memoria de sesión, reconexión, interrupciones, tool calls, manejo de errores, historial, rate limits, parseo de Markdown y hasta el auto-scroll. Cada framework de agentes (Strands, LangGraph, CrewAI, Claude Agent SDK) emite su streaming en un formato distinto, así que el frontend termina acoplado al backend.

A medida que los agentes van más allá de responder texto (renderizan gráficos, actualizan un lienzo compartido o se detienen a pedir aprobación), hace falta un contrato estándar entre el agente y la interfaz. Ese contrato es AG-UI.

¿Qué es AG-UI?

AG-UI (Agent-User Interaction Protocol) es un protocolo abierto, ligero y basado en eventos que estandariza cómo un agente de IA se comunica con una aplicación orientada al usuario. Lo mantiene el equipo de CopilotKit y funciona con varios frameworks de agentes y librerías de frontend (React, Angular, Vue). El resultado: el código del agente y el del frontend quedan desacoplados.

AG-UI completa el stack de protocolos agénticos. AgentCore Runtime soporta los tres:

Protocolo	Conecta	Para qué
MCP (Model Context Protocol)	Agente → herramientas	Exponer APIs, datos y funciones al agente
A2A (Agent2Agent)	Agente → agentes	Delegar tareas entre agentes
AG-UI	Agente → usuario	Streaming, UI generativa, estado compartido, aprobaciones

Sus principios de diseño son cinco: arquitectura basada en eventos, esquema flexible, gestión del contexto por sesión, seguridad desde el diseño y extensiones enchufables. Con ellos aborda cuatro desafíos: interacciones ricas (componentes de UI adaptativos), sesiones con estado a lo largo de varios turnos, comunicación de baja latencia y extensibilidad para nuevas capacidades.

Una precisión sobre el transporte: AG-UI es agnóstico al transporte. En AgentCore Runtime los eventos viajan como Server-Sent Events (SSE) sobre HTTP; WebSockets es otra opción válida en otros entornos.

Eventos AG-UI y CopilotKit

AG-UI define un flujo tipado de eventos. Una ejecución con una llamada a herramienta se ve así:

1
2
3
4
5
6
7
8
9
10
data: {"type": "RUN_STARTED", "threadId": "t1", "runId": "r1"}
data: {"type": "TEXT_MESSAGE_START", "messageId": "m1", "role": "assistant"}
data: {"type": "TEXT_MESSAGE_CONTENT", "messageId": "m1", "delta": "Consultando..."}
data: {"type": "TEXT_MESSAGE_END", "messageId": "m1"}
data: {"type": "TOOL_CALL_START", "toolCallId": "tc1", "toolCallName": "get_weather"}
data: {"type": "TOOL_CALL_ARGS", "toolCallId": "tc1", "delta": "{\"location\": \"Santa Cruz\"}"}
data: {"type": "TOOL_CALL_END", "toolCallId": "tc1"}
data: {"type": "TOOL_CALL_RESULT", "toolCallId": "tc1", "content": "{\"temp\": 31}"}
data: {"type": "STATE_SNAPSHOT", "snapshot": {}}
data: {"type": "RUN_FINISHED", "threadId": "t1", "runId": "r1"}

Cualquier backend que emita estos eventos puede alimentar el mismo frontend. Las familias principales son: ciclo de vida (RUN_STARTED, RUN_FINISHED), mensajes de texto (TEXT_MESSAGE_*), llamadas a herramientas (TOOL_CALL_*) y estado (STATE_SNAPSHOT, STATE_DELTA). La especificación detalla el resto.

CopilotKit es el SDK de código abierto que lleva el protocolo al frontend. Aporta:

Chat UI: componentes listos (CopilotChat, CopilotSidebar, CopilotPopup) o modo totalmente headless.
UI generativa: el agente decide qué componente React renderizar y le pasa los datos.
Human-in-the-loop: el agente se detiene y espera la confirmación del usuario.
Frontend tools: el agente invoca funciones de tu aplicación.
Estado compartido en tiempo real, de lectura/escritura o solo lectura.

El flujo es: el usuario interactúa con tu app, la app llama al agente vía AG-UI, CopilotKit se comunica con el backend (CrewAI, LangGraph, Mastra, Agno, AG2, Strands, Amazon Bedrock y más) y devuelve una respuesta estandarizada. Del lado de los canales, CopilotKit ya cubre web, Slack, Teams, iOS, Android y WhatsApp.

Para explorar sin instalar nada, el AG-UI Dojo muestra cada patrón (chat, tool rendering, HITL, UI generativa, estado compartido, razonamiento) con su código, y permite elegir la integración "AWS Strands (Python)".

Implementarlo en AWS

Desde junio de 2026, AWS publica una ruta completa para llevar AG-UI a producción: AgentCore Runtime aloja el agente con el flag de protocolo AG-UI y actúa como proxy transparente. Se encarga de la autenticación (SigV4 u OAuth 2.0 con Amazon Cognito), el aislamiento de sesiones, el escalado y la observabilidad. El contenedor solo expone POST /invocations para las peticiones AG-UI y GET /ping para el health check, en el puerto 8080. Los detalles están en Deploy AG-UI servers in AgentCore Runtime .

Amazon Bedrock AgentCore

Componente	Qué aporta
Runtime	Ejecuta el agente en sesiones aisladas, con streaming
Code Interpreter	Sandbox para ejecutar el código que genera el agente
Identity	Credenciales del agente y acceso a recursos en nombre del usuario
Memory	Contexto de sesión y memoria persistente entre conversaciones
Gateway	Convierte APIs y funciones Lambda existentes en herramientas MCP
Observability	Métricas, logs y trazas de cada ejecución

Servicios de soporte

Servicio	Rol en la solución
AWS Amplify	Hosting y despliegue del frontend React
Amazon Cognito	Autenticación de usuarios y emisión de tokens (JWT y M2M)
Amazon API Gateway	Publica y enruta APIs con autorización y throttling
AWS Lambda	CopilotKit Runtime y herramientas personalizadas
Amazon DynamoDB	Datos de la aplicación, NoSQL de baja latencia
Amazon CloudWatch / AWS X-Ray	Métricas, logs, alarmas y trazado distribuido

Strands Agents

Strands Agents es el SDK de código abierto de AWS para construir agentes. Es agnóstico al modelo, trae MCP nativo y herramientas tipadas, soporta multi-agente y está pensado para producción. La librería ag-ui-strands lo envuelve para que sus eventos salgan como AG-UI sin código adicional.

FAST: el punto de partida

El Fullstack AgentCore Solution Template (FAST) conecta Runtime, Gateway, Identity, Memory y Code Interpreter con un frontend React y Cognito, todo en AWS CDK. Desde la versión 0.4.1 incluye dos patrones AG-UI, agui-strands-agent y agui-langgraph-agent, que comparten un único parser en el frontend. Cambiar de framework es cambiar una línea de configuración:

1
2
3
4
# infra-cdk/config.yaml
backend:
  pattern: agui-strands-agent   # o agui-langgraph-agent
  deployment_type: docker

Arquitectura de la demo

El usuario inicia sesión con Cognito (OIDC) y el frontend servido por Amplify envía el JWT a API Gateway. Una Lambda en Node.js con el CopilotKit Runtime (AgentCoreRunner) reenvía la petición a AgentCore Runtime por AG-UI/SSE con un bearer token. Dentro de AgentCore, el agente guarda checkpoints en Memory y llama a herramientas a través de Gateway (MCP + token M2M obtenido con client-credentials), que a su vez invoca funciones Lambda.

1
2
3
4
Usuario ──JWT──▶ API Gateway ──▶ Lambda (CopilotKit Runtime) ──AG-UI/SSE──▶ AgentCore Runtime
   │                                                                          │
   ├── Amplify (sirve el frontend)                                           ├── Memory (checkpoints)
   └── Cognito (inicio de sesión OIDC)                                       └── Gateway (MCP, M2M) ──▶ Lambda tools

El único contrato entre la Lambda de CopilotKit y el agente es el flujo de eventos AG-UI; todo lo demás lo gestiona AgentCore.

Demo y código: UI generativa, estado compartido y human-in-the-loop

La demo parte del sample CopilotKit + FAST , que reemplaza el chat básico de FAST por CopilotKit e incluye patrones para Strands y LangGraph. Estos son los comportamientos que lo distinguen de un chat convencional.

1. El agente en el backend (Strands)

Cada petición crea un agente nuevo con las herramientas de Gateway del usuario que llama, y StrandsAgent traduce su streaming a eventos AG-UI:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
from ag_ui_strands import StrandsAgent, StrandsAgentConfig
from bedrock_agentcore.runtime import BedrockAgentCoreApp, RequestContext
from strands import Agent

app = BedrockAgentCoreApp()

@app.entrypoint
async def invocations(payload: dict, context: RequestContext):
    run_input = RunAgentInput.model_validate(payload)
    user_id = extract_user_id_from_context(context)

    agent = Agent(
        model=MODEL,
        system_prompt=SYSTEM_PROMPT,
        tools=[create_gateway_mcp_client(user_id), CODE_INTERPRETER],
    )
    agui_agent = StrandsAgent(agent=agent, name="demo_agent",
                              config=StrandsAgentConfig())

    async for event in agui_agent.run(run_input):
        yield event.model_dump(mode="json", by_alias=True, exclude_none=True)

BedrockAgentCoreApp lee las cabeceras del Runtime (token de workload, autorización e id de sesión), así Gateway y Memory funcionan sin configuración extra. Memory es opcional: si MEMORY_ID no está definido, el agente corre sin persistencia.

2. UI generativa: el agente renderiza componentes React

El frontend registra componentes que el agente puede invocar como si fueran herramientas. Cuando llega TOOL_CALL_START con ese nombre, CopilotKit dibuja el componente dentro de la conversación:

1
2
3
4
5
6
useComponent({
  name: "pieChart",
  description: "Muestra datos como un gráfico circular.",
  parameters: PieChartPropsSchema,
  render: PieChart,
});

3. Estado compartido: un tablero de tareas sincronizado

El agente modifica una lista de tareas con una herramienta y el tablero se actualiza en tiempo real mediante STATE_SNAPSHOT. Si el usuario edita una tarea en la UI, el agente ve el cambio en su siguiente turno porque el estado se inyecta en el prompt del sistema.

4. Human-in-the-loop: el agente se detiene y espera

El agente pide agendar una reunión, el frontend muestra un selector de horario y la respuesta del usuario vuelve como TOOL_CALL_RESULT:

1
2
3
4
5
6
7
8
9
10
11
useHumanInTheLoop({
  name: "scheduleTime",
  description: "Agenda una reunión con el usuario.",
  parameters: z.object({
    reasonForScheduling: z.string(),
    meetingDuration: z.number(),
  }),
  render: ({ respond, status, args }) =\> (
    \<MeetingTimePicker status={status} respond={respond} {...args} /\>
  ),
});

En el inspector de CopilotKit se ve cada evento AG-UI en orden (TEXT_MESSAGE_CONTENT, STATE_SNAPSHOT, RUN_FINISHED), lo que facilita mucho la depuración.

Despliegue y limpieza

Con un solo script se aprovisiona todo el stack: user pool de Cognito, repositorio ECR, AgentCore Runtime, Gateway y Memory, la Lambda del CopilotKit Runtime detrás de API Gateway y el hosting en Amplify.

Requisitos: cuenta de AWS con permisos para CloudFormation, ECR, Bedrock AgentCore, Cognito y Amplify; AWS CLI v2; AWS CDK; Node.js 18+ y Python 3.11+; Docker en ejecución; acceso habilitado en Amazon Bedrock al modelo que use el agente.

1
2
3
4
5
git clone https://github.com/aws-samples/sample-FAST-applications.git
cd sample-FAST-applications/samples/copilotkit-generative-ui
cp config.yaml.example config.yaml
# Edita config.yaml: stack_name_base y admin_user_email
./deploy-strands.sh   # o ./deploy-langgraph.sh

Al terminar, abre la URL de Amplify, inicia sesión y verifica tres cosas:

Pide un gráfico circular con los datos de ejemplo: aparece dentro del chat.
Pide agregar tres tareas al tablero: se actualiza en tiempo real.
Pide agendar una reunión: el agente se detiene y muestra el selector de horario.

Para no seguir generando costos, elimina el stack al terminar:

1
2
cd sample-FAST-applications/samples/copilotkit-generative-ui
npx cdk destroy --all

Si el repositorio de ECR conserva imágenes, bórralo manualmente.

Conclusiones

AG-UI completa el stack: MCP conecta herramientas, A2A conecta agentes y AG-UI conecta al usuario.
Con AG-UI cambia el framework, no la interfaz. Pasar de Strands a LangGraph en FAST no toca el frontend.
El agente no vive en tu laptop, vive en AgentCore, con autenticación, aislamiento de sesiones, memoria y observabilidad gestionados.
Con AWS, lo difícil nunca fue desplegar el agente, sino operarlo. AgentCore resuelve justamente esa parte.

Gracias a los AWS User Groups de Santa Cruz de la Sierra, La Paz, Sucre y Cochabamba, y a AWS Girls Bolivia, por la organización del Community Day.

Recursos y enlaces

Recurso	Qué encontrarás
Build generative UI for AI agents on Amazon Bedrock AgentCore with the AG-UI protocol	Artículo de AWS Machine Learning Blog (30 de junio de 2026) en el que se basa la demo
Deploy AG-UI servers in AgentCore Runtime	Contrato del protocolo y despliegue en AgentCore
FAST: Fullstack AgentCore Solution Template	Plantilla con los patrones `agui-strands-agent` y `agui-langgraph-agent`
Sample CopilotKit + FAST	Código de la demo: UI generativa, estado compartido y HITL
Accelerate agentic application development with FAST	Recorrido completo por la arquitectura de FAST
Amazon Bedrock AgentCore	Página del servicio
Strands Agents	SDK de código abierto de AWS para agentes
AG-UI: introducción	Documentación oficial del protocolo
AG-UI: especificación y eventos	Tipos de eventos y diseño del protocolo
AG-UI Dojo	Demos interactivas por framework, incluida AWS Strands (Python)
CopilotKit Interactive Dojo	Catálogo de patrones de CopilotKit con su código
CopilotKit	Vista previa de los frontends (web, Slack, Teams, iOS, Android, WhatsApp)
Documentación de CopilotKit	Guía de integración del frontend
Blog de CopilotKit	Novedades: React Native, CrewAI compatible con AG-UI, aimock, Angular

Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.

Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article

Builder Center

AG-UI: la interfaz que le faltaba a tus agentes de IA en AWS

Juan Carlos Pampa Huanca

Introducción: "solo es un chat"

¿Qué es AG-UI?

Eventos AG-UI y CopilotKit

Implementarlo en AWS

Amazon Bedrock AgentCore

Servicios de soporte

Strands Agents

FAST: el punto de partida

Arquitectura de la demo

Demo y código: UI generativa, estado compartido y human-in-the-loop

1. El agente en el backend (Strands)

2. UI generativa: el agente renderiza componentes React

3. Estado compartido: un tablero de tareas sincronizado

4. Human-in-the-loop: el agente se detiene y espera

Despliegue y limpieza

Conclusiones

Recursos y enlaces