{"id":193,"date":"2025-12-16T13:15:45","date_gmt":"2025-12-16T13:15:45","guid":{"rendered":"https:\/\/elbrinner.com\/?p=193"},"modified":"2025-12-16T20:25:36","modified_gmt":"2025-12-16T20:25:36","slug":"devui-depura-agentes-en-tu-propio-proyecto","status":"publish","type":"post","link":"https:\/\/elbrinner.com\/index.php\/2025\/12\/16\/devui-depura-agentes-en-tu-propio-proyecto\/","title":{"rendered":"DevUI: depura agentes en tu propio proyecto"},"content":{"rendered":"

\"\"\u00bfQu\u00e9 es DevUI?<\/strong><\/h2>\n

La ventana al interior de los agentes.<\/p>\n

\ud83c\udf10 El contexto actual<\/strong><\/h2>\n

Hoy convivimos con un ecosistema cada vez m\u00e1s complejo de agentes inteligentes<\/strong>:<\/p>\n

    \n
  • Agentes que hablan con otros agentes (A2A<\/strong>).<\/li>\n
  • Agentes que se conectan con herramientas externas<\/strong> mediante protocolos como MCP<\/strong>.<\/li>\n
  • Agentes que ejecutan funciones internas<\/strong> (callFunction).<\/li>\n
  • Agentes que env\u00edan eventos UI-Agent<\/strong> hacia el frontend.<\/li>\n
  • Y agentes que, adem\u00e1s, act\u00faan como orquestadores de otros agentes<\/strong>, coordinando flujos completos de trabajo.<\/li>\n
  • Entre otros…<\/li>\n<\/ul>\n

    Con tantas piezas movi\u00e9ndose al mismo tiempo, surge una pregunta inevitable: \u00bfqu\u00e9 est\u00e1 ocurriendo realmente dentro de este sistema multiagente?<\/strong><\/p>\n

     <\/p>\n

    \ud83d\udd0e La necesidad de transparencia<\/strong><\/h2>\n

    Los sistemas multiagente son potentes, pero tambi\u00e9n opacos. Para los desarrolladores, depurar y entender qu\u00e9 sucede dentro de ellos era como mirar una caja negra:<\/p>\n

      \n
    • \u00bfQu\u00e9 agentes est\u00e1n activos?<\/li>\n
    • \u00bfQu\u00e9 herramientas invocan y en qu\u00e9 orden?<\/li>\n
    • \u00bfC\u00f3mo fluyen los mensajes y las respuestas del modelo?<\/li>\n
    • \u00bfQu\u00e9 decisiones toma el supervisor al distribuir tareas?<\/li>\n<\/ul>\n

      De esa necesidad nace DevUI<\/strong>: una interfaz que expone, en tiempo real, la vida interior de los agentes y sus workflows.<\/p>\n

       <\/p>\n

      \ud83d\udda5\ufe0f \u00bfQu\u00e9 ofrece DevUI?<\/strong><\/h2>\n

      \"DEVUI<\/p>\n

      DevUI<\/strong> no es solo un panel visual:<\/p>\n

        \n
      • Panel de agentes<\/strong>: lista de los agentes registrados en tu aplicaci\u00f3n.<\/li>\n
      • Logs en tiempo real<\/strong>: trazas de ejecuci\u00f3n y coordinaci\u00f3n.<\/li>\n
      • Streaming de respuestas<\/strong>: visualizaci\u00f3n paso a paso del modelo.<\/li>\n
      • Controles de entorno<\/strong>: cambiar credenciales y despliegues sin modificar el c\u00f3digo.<\/li>\n
      • Visibilidad de tokens<\/strong>: m\u00e9tricas claras de tokens de entrada y salida<\/strong>, \u00fatiles para depurar y optimizar consumo.<\/li>\n<\/ul>\n
        \n
        \n
        \n
        <\/div>\n

        \u2699\ufe0f Configuraci\u00f3n simples<\/h2>\n

        No necesitas clonar repositorios ni ejecutar c\u00f3digo externos. Solo instala el paquete NuGet en tu proyecto:<\/p>\n

        dotnet add package Microsoft.Agents.AI.DevUI<\/pre>\n<\/div>\n
        Configuraci\u00f3n en pocas l\u00edneas.<\/p>\n
        \/\/ Registra en el contenedor de servicios la capacidad de generar respuestas.\r\n\/\/ Esto habilita que el agente pueda procesar peticiones y devolver resultados.\r\nbuilder.Services.AddOpenAIResponses();\r\n\r\n\/\/ Registra en el contenedor de servicios la capacidad de manejar conversaciones.\r\n\/\/ Permite que el agente gestione di\u00e1logos con estado, incluyendo historial y contexto.\r\nbuilder.Services.AddOpenAIConversations();\r\n\r\n\r\n\/\/ Expone los endpoints HTTP para las respuestas.\r\n\/\/ Con esto, el agente puede recibir solicitudes externas y responder de forma directa.\r\napp.MapOpenAIResponses();\r\n\r\n\/\/ Expone los endpoints HTTP para las conversaciones.\r\n\/\/ Esto habilita la interacci\u00f3n continua con el agente a trav\u00e9s de un API REST.\r\napp.MapOpenAIConversations();\r\n\r\n\r\n\/\/ Solo en entorno de desarrollo se habilita la interfaz DevUI.\r\n\/\/ DevUI es una herramienta visual para probar, depurar y explorar los agentes,\r\n\/\/ mostrando endpoints, configuraciones y permitiendo interacci\u00f3n r\u00e1pida.\r\nif (builder.Environment.IsDevelopment())\r\n{\r\n    app.MapDevUI();\r\n}\r\n<\/pre>\n<\/div>\n
        Puedes usar tu proveedor de modelo preferido ejemplo Azure OpenAi y Ollama.<\/p>\n
        Azure OpenAI<\/strong><\/p>\n
        var builder = WebApplication.CreateBuilder(args);\r\n\/\/ Configurar Azure OpenAI Client\r\n AzureOpenAIConfig.Register(builder);\r\n\r\n<\/pre>\n
        Ollama<\/strong><\/p>\n
        var builder = WebApplication.CreateBuilder(args);\r\n\/\/ Configurar Ollama Client\r\nOllamaConfig.Register(builder);<\/pre>\n
         <\/p>\n
        \n
        Con esto, tu proyecto ya expone DevUI en http:\/\/localhost:8001\/devui<\/strong><\/p>\n
        \ud83e\uddea Ejemplo r\u00e1pido con agentes de prueba<\/h2>\n
        builder.Services.AddAgent(\"EchoAgent\", async (ctx, input) => $\"Echo -> {input}\");\r\nbuilder.Services.AddAgent(\"UpperAgent\", async (ctx, input) => input?.ToUpperInvariant() ?? \"\");\r\n<\/pre>\n<\/div>\n
         <\/p>\n
        Al abrir DevUI ver\u00e1s ambos agentes listados, podr\u00e1s enviarles mensajes y observar c\u00f3mo responden y se trazan sus pasos en tiempo real.<\/p>\n
        Puedes bajar la prueba de concepto que hice en mi github: https:\/\/github.com\/elbrinner\/DEV-UI-AGENT<\/a><\/p>\n
        Referencias:<\/strong><\/p>\n
        https:\/\/github.com\/microsoft\/agent-framework\/tree\/main\/dotnet\/samples\/GettingStarted\/DevUI<\/a><\/p>\n