Para los desarrolladores que crean aplicaciones de IA generativa, durante el último año se logró un progreso enorme. Hubo avances increíbles en los sistemas agénticos de backend que pueden razonar, planificar y ejecutar tareas complejas. Pero un agente poderoso es solo la mitad de la historia. ¿Cómo conectas sin problemas esa inteligencia al frontend de tu aplicación? ¿Cómo se crea una experiencia verdaderamente colaborativa entre el usuario y la IA?
Hoy, nos complace destacar una nueva integración que aborda directamente este desafío: el Agent Development Kit (ADK) ahora funciona con AG-UI, un protocolo abierto para crear experiencias de usuario de IA ricas e interactivas. Gracias a esta combinación, puedes crear agentes de IA sofisticados en el backend y brindarles un frontend colaborativo y listo para la producción con el mínimo esfuerzo.
El Agent Development Kit (ADK) es un kit de herramientas de código abierto que incluye baterías para crear agentes de IA que hacen cosas, no solo chatean. Abstrae las partes más difíciles de la ingeniería de agentes, lo que te permite centrarse en la lógica única de tu aplicación.
En su versión básica, el ADK les brinda estas ventajas a tus agentes:
Con el ADK, puedes pasar de una idea a un prototipo de agente de trabajo en horas, todo mientras mantienes el control total para definir el rol de tu agente y las herramientas a las que este puede acceder.
A los desarrolladores les encanta el espacio de juegos local del ADK y la depuración de la interfaz de usuario de adk web, pero saben que no es una IU que ven los usuarios. A los desarrolladores de Flutter les encanta el kit de herramientas de IA de Flutter y hay muchos otros proyectos de IU de agentes para comenzar, pero hasta ahora cualquier integración de interfaz de usuario y agente siempre se hacía a medida; no había un estándar para la comunicación entre el agente y la IU.
El equipo de CopilotKit lanzó AG-UI como un protocolo abierto y una capa de IU diseñada para estandarizar a los agentes que se comunican directamente con los usuarios en IU enriquecidas. La IU de AG se centra en el agente directo para el usuario (no en un agente en segundo plano) y utiliza integraciones de middleware y cliente a fin de lograr la generalización para cualquier frontend y backend. Proporciona una forma estandarizada para que los agentes de backend se comuniquen con las aplicaciones frontend, lo que permite una colaboración en tiempo real y con estado entre la IA y los usuarios humanos.
Los creadores de AG-UI también ofrecen CopilotKit, una biblioteca de código abierto de componentes y hooks de React que funcionan con AG-UI. De esta manera, puedes obtener una interfaz de chat pulida, barras laterales y otros elementos de la IU que se ejecutan en tu aplicación en minutos.
Si combinas un potente backend (ADK) con un protocolo de frontend flexible (AG-UI), ahora puedes crear aplicaciones de IA realmente interactivas. El ADK ejecuta el “cerebro” y la orquestación de herramientas del agente, mientras que AG-UI proporciona un canal de comunicación a los componentes de la IU para lograr una experiencia de usuario perfecta.
Esta integración desbloquea una nueva clase de funciones listas para usar:
Comenzar a compilar es tan simple como ejecutar un comando. Clonarás un repositorio de inicio de pila completa con un backend de ADK preconfigurado y un frontend Next.js utilizando CopilotKit.
npx copilotkit@latest create -f adkCuando tengas el proyecto inicial, la lógica central es simple.
/backend/agent.ts)En el backend del ADK, define las instrucciones del agente y proporciónale herramientas con las que trabajar.
// backend/agent.ts
import { adk } from "@copilotkit/adk";
adk.setSystemMessage(
"You are a helpful assistant that can fetch stock prices."
);
// Define a tool the agent can use
adk.addTool("getStockPrice", {
description: "Get the current stock price for a given ticker symbol.",
parameters: {
type: "object",
properties: {
ticker: {
type: "string",
description: "The stock ticker symbol (e.g., GOOGL).",
},
},
required: ["ticker"],
},
handler: async ({ ticker }) => {
console.log(`Fetching stock price for ${ticker}...`);
// In a real app, you would call a financial API here.
const price = (Math.random() * 1000).toFixed(2);
return `The current price of ${ticker} is $${price}.`;
},
});
export default adk;2. Conecta el frontend (/frontend/src/app/page.tsx)
En tu frontend de React/Next.js, envuelve tu aplicación con el proveedor de CopilotKit y usa los componentes de la IU.
// frontend/src/app/page.tsx
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
export default function Home() {
return (
<CopilotKit url="http://localhost:5001/api/adk"> {/* URL to your ADK backend */}
<main>
<h1>Welcome to Your ADK + AG-UI App!</h1>
<p>Ask me to get a stock price.</p>
</main>
<CopilotChat />
</CopilotKit>
);
}¡Y eso es todo! Ya tienes un agente de IA completamente funcional con un frontend pulido, listo para personalizar y ampliar. Utiliza la biblioteca de componentes de la IU precompilada y amplíala con tus propios widgets, pero toda la capa de comunicación se administrará por ti.
Olvídate de las complejidades de conectar la lógica de tu agente con tu interfaz de usuario. Gracias a la integración de ADK y AG-UI, puedes concentrarse en lo que más importa: el envío de aplicaciones de IA potentes, inteligentes y colaborativas.
Recursos:
npx copilotkit@latest create -f adk
