En esta guía práctica aprenderás a construir un frontend para tus agentes del Marco de Agentes de Microsoft usando el protocolo AG-UI y CopilotKit. Microsoft Agent Framework se encargará del backend de los agentes y CopilotKit del frontend, mientras que AG-UI actúa como puente que permite la comunicación entre ambos. A lo largo del artículo encontrarás ejemplos, recomendaciones y las piezas clave para integrar agentes IA con aplicaciones a medida.
Qué es Microsoft Agent Framework El Marco de Agentes de Microsoft es un SDK y runtime de código abierto pensado para crear, orquestar y desplegar agentes de IA y flujos de trabajo multiagente. Soporta Python y .NET y permite construir desde chatbots simples hasta sistemas complejos con agentes que colaboran entre sí. Sus características principales incluyen agentes modulares capaces de razonar y usar herramientas, workflows basados en grafos para controlar ejecución secuencial o paralela, y compatibilidad con protocolos como Model Context Protocol y Agent2Agent para integraciones cross-runtime.
Requisitos previos Antes de empezar necesitas instalar .NET 9.0 SDK, Node.js 20 o superior y disponer de un token de GitHub Personal Access Token si vas a usar GitHub Models. Opcionalmente puedes tener un endpoint y despliegue de Azure OpenAI si prefieres esa plataforma.
Crear un agente full stack con CLI Puedes generar un proyecto inicial rápidamente con la utilidad npx copilotkit@latest init -m microsoft-agent-framework y luego instalar dependencias con pnpm install o npm install. Después configura tu token de GitHub con gh auth token y dotnet user-secrets set GitHubToken tu-token. Arranca el servidor de desarrollo con pnpm dev o npm run dev y accede a la interfaz en https://localhost:3000 para verificar que el agente CopilotKit y AG-UI están funcionando.
Integración del agente con AG-UI en el backend Para exponer tu agente al frontend mediante AG-UI crea una aplicación web .NET, añade los paquetes Microsoft.Agents.AI.Hosting.AGUI.AspNetCore y clientes OpenAI, y registra los servicios AG-UI. Define una fábrica de agentes que cree instancias del agente configuradas con sus herramientas, estado compartido y serializadores JSON. Mapea el endpoint AG-UI en la ruta raíz y arranca la app para que el agente quede disponible en el puerto configurado, por ejemplo en https://localhost:8000.
Diseñar la lógica del agente y herramientas En la fábrica del agente crea las funciones o herramientas que el agente podrá invocar, por ejemplo obtener, añadir o reemplazar elementos del estado compartido y un ejemplo de herramienta para consultar el clima. Define modelos de datos para las respuestas y snapshots de estado y registra el contexto de serialización para que AG-UI pueda enviar y recibir datos correctamente.
Agregar un frontend con CopilotKit CopilotKit permite crear interfaces React que se conectan a agentes AG-UI. Instala los paquetes @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime, crea una ruta API que actúe como proxy copiando la configuración del runtime y usando HttpAgent para apuntar al endpoint AG-UI del backend. Dentro de la app React envuelve las partes interactivas con el proveedor CopilotKit y define componentes de UI como CopilotSidebar, CopilotChat o CopilotPopup para facilitar la interacción con el agente.
Sincronizar estado y UI generativa Usa el hook useCoAgent para sincronizar el estado del agente bidireccionalmente con la interfaz y comparte datos como listas de proverbios u otros recursos en tiempo real. Con useCopilotAction puedes registrar acciones basadas en herramientas que renderizan componentes personalizados cuando se invocan, por ejemplo una tarjeta de clima que muestre los argumentos pasados al tool get_weather y renderice resultados en la conversación.
Human in the Loop Implementa flujos Human in the Loop para que el agente solicite validación o entrada humana durante su ejecución. CopilotKit incorpora mecanismos para renderizar componentes que devuelven respuestas asincrónicas desde la UI y permiten aprobar o rechazar acciones delicadas sin romper la experiencia conversacional.
Streaming de respuestas Para mostrar al usuario respuestas en tiempo real, vincula los campos del estado del agente a componentes visuales y aprovecha la capacidad de CopilotKit para renderizar resultados y progresos mientras el agente procesa una solicitud. Esto mejora la experiencia de usuario al mostrar salidas parciales y llamadas a herramientas de forma dinámica.
Por qué elegir a Q2BSTUDIO En Q2BSTUDIO somos una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida, con experiencia en inteligencia artificial, ciberseguridad y servicios cloud AWS y Azure. Ayudamos a empresas a diseñar, implementar y escalar soluciones basadas en agentes IA, automatización de procesos e integración con plataformas de inteligencia de negocio como Power BI. Si buscas desarrollar una aplicación a medida que incluya agentes IA o mejorar la seguridad y la arquitectura cloud de tu proyecto, podemos asesorarte y ejecutar el desarrollo. Conoce nuestros servicios de desarrollo de aplicaciones y software a medida en desarrollo de aplicaciones y software multiplataforma y explora nuestras soluciones de inteligencia artificial para empresas en servicios de inteligencia artificial.
Palabras clave y posicionamiento Este artículo incluye conceptos relevantes para SEO como aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi para ayudar a mejorar el posicionamiento de tus servicios digitales.
Conclusión Construir un frontend para agentes del Marco de Agentes de Microsoft combinando AG-UI y CopilotKit permite conectar backends potentes con interfaces atractivas y seguras. La arquitectura propuesta facilita el desarrollo de agentes capaces de usar herramientas, mantener estado compartido, solicitar intervención humana y renderizar UI personalizada en tiempo real. En Q2BSTUDIO podemos transformar estas ideas en productos reales, desde prototipos hasta soluciones empresariales completas, incluyendo desarrollo a medida, integración cloud y soporte en ciberseguridad e inteligencia de negocio.
