DevUI: depura agentes en tu propio proyecto

¿Qué es DevUI?

La ventana al interior de los agentes.

🌐 El contexto actual

Hoy convivimos con un ecosistema cada vez más complejo de agentes inteligentes:

• Agentes que hablan con otros agentes (A2A).
• Agentes que se conectan con herramientas externas mediante protocolos como MCP.
• Agentes que ejecutan funciones internas (callFunction).
• Agentes que envían eventos UI-Agent hacia el frontend.
• Y agentes que, además, actúan como orquestadores de otros agentes, coordinando flujos completos de trabajo.
• Entre otros…

Con tantas piezas moviéndose al mismo tiempo, surge una pregunta inevitable: ¿qué está ocurriendo realmente dentro de este sistema multiagente?

🔎 La necesidad de transparencia

Los sistemas multiagente son potentes, pero también opacos. Para los desarrolladores, depurar y entender qué sucede dentro de ellos era como mirar una caja negra:

• ¿Qué agentes están activos?
• ¿Qué herramientas invocan y en qué orden?
• ¿Cómo fluyen los mensajes y las respuestas del modelo?
• ¿Qué decisiones toma el supervisor al distribuir tareas?

De esa necesidad nace DevUI: una interfaz que expone, en tiempo real, la vida interior de los agentes y sus workflows.

🖥️ ¿Qué ofrece DevUI?

DevUI no es solo un panel visual:

• Panel de agentes: lista de los agentes registrados en tu aplicación.
• Logs en tiempo real: trazas de ejecución y coordinación.
• Streaming de respuestas: visualización paso a paso del modelo.
• Controles de entorno: cambiar credenciales y despliegues sin modificar el código.
• Visibilidad de tokens: métricas claras de tokens de entrada y salida, útiles para depurar y optimizar consumo.

dotnet add package Microsoft.Agents.AI.DevUI

// Registra en el contenedor de servicios la capacidad de generar respuestas.
// Esto habilita que el agente pueda procesar peticiones y devolver resultados.
builder.Services.AddOpenAIResponses();

// Registra en el contenedor de servicios la capacidad de manejar conversaciones.
// Permite que el agente gestione diálogos con estado, incluyendo historial y contexto.
builder.Services.AddOpenAIConversations();


// Expone los endpoints HTTP para las respuestas.
// Con esto, el agente puede recibir solicitudes externas y responder de forma directa.
app.MapOpenAIResponses();

// Expone los endpoints HTTP para las conversaciones.
// Esto habilita la interacción continua con el agente a través de un API REST.
app.MapOpenAIConversations();


// Solo en entorno de desarrollo se habilita la interfaz DevUI.
// DevUI es una herramienta visual para probar, depurar y explorar los agentes,
// mostrando endpoints, configuraciones y permitiendo interacción rápida.
if (builder.Environment.IsDevelopment())
{
    app.MapDevUI();
}

builder.Services.AddAgent("EchoAgent", async (ctx, input) => $"Echo -> {input}");
builder.Services.AddAgent("UpperAgent", async (ctx, input) => input?.ToUpperInvariant() ?? "");