AG-UI Protocol

En el Radar compartido: Trial (valoración de la edición aportada).

Cómo funciona

Normaliza eventos de mensajes, llamadas a herramientas y actualizaciones de estado sobre transportes web. Desacopla la experiencia visual del framework de orquestación.

Ejemplo de uso

Una aplicación recibe eventos de búsqueda y resultados mientras un agente prepara un informe. La interfaz permite cancelar y presenta una aprobación explícita antes de enviarlo.

Lugar en el ecosistema de protocolos

Protocolo	Conecta
MCP	Agente ↔ herramientas y datos
A2A	Agente ↔ agente
AG-UI	Agente ↔ interfaz de usuario

AG-UI nació en CopilotKit y es abierto. Define qué eventos viajan entre backend y frontend, no cómo se construye el agente.

Tipos de evento

Familia	Eventos
Ciclo de vida	RUN_STARTED, RUN_FINISHED, RUN_ERROR, STEP_STARTED, STEP_FINISHED
Mensajes	TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT (streaming de tokens), TEXT_MESSAGE_END
Herramientas	TOOL_CALL_START, TOOL_CALL_ARGS, TOOL_CALL_END, TOOL_CALL_RESULT
Estado	STATE_SNAPSHOT (estado completo), STATE_DELTA (cambios en JSON Patch), MESSAGES_SNAPSHOT
Extensión	CUSTOM, RAW

Ejemplo de flujo

RUN_STARTED
STEP_STARTED          {"stepName": "buscar_creditos"}
TOOL_CALL_START       {"toolCallName": "consultar_cartera"}
TOOL_CALL_ARGS        {"delta": "{\"cliente\":\"42\"}"}
TOOL_CALL_END
STATE_DELTA           [{"op":"add","path":"/creditos","value":[…]}]
TEXT_MESSAGE_START
TEXT_MESSAGE_CONTENT  {"delta": "Tienes 2 créditos vigentes…"}
TEXT_MESSAGE_END
RUN_FINISHED

Los eventos viajan normalmente por Server-Sent Events o WebSockets; el protocolo es independiente del transporte.

Patrones que habilita

• Estado compartido: la interfaz muestra en tiempo real lo que el agente va construyendo (un formulario rellenado, un plan, una tabla).
• Herramientas en el frontend: el agente pide a la interfaz que ejecute algo local (abrir un modal, pedir confirmación).
• Humano en el bucle: la ejecución se pausa hasta que el usuario aprueba una acción sensible.
• UI generativa: el agente indica qué componente mostrar con qué datos.

Integraciones

Existen adaptadores para frameworks de agentes como LangGraph, CrewAI, Mastra, Pydantic AI y ADK, y SDKs de cliente en TypeScript. Así se puede cambiar el framework del backend sin rehacer la interfaz.

Criterios de implementación

Gestionar reconexión, orden de eventos y compatibilidad del contrato. Mostrar progreso y resultados útiles sin depender de razonamientos internos privados del modelo.