O último ano foi marcado por uma intensa onda de avanços para os desenvolvedores de aplicativos de IA generativa. Pudemos observar progressos incríveis em sistemas agênticos de back-end com capacidade de raciocinar, planejar e executar tarefas complexas. Porém, um agente poderoso é apenas parte da história. Como conectar essa inteligência de modo fluido ao front-end do aplicativo? Como criar uma experiência verdadeiramente colaborativa entre o usuário e IA?
Hoje, temos orgulho de apresentar uma nova integração que resolve diretamente essas questões: o trabalho em conjunto do Agent Development Kit (ADK) com o AG-UI, um protocolo aberto para criar experiências de usuário de IA avançadas e interativas. Essa combinação permite que você crie agentes de IA sofisticados no back-end e ofereça a eles um front-end colaborativo pronto para produção com o mínimo de esforço.
O Agent Development Kit (ADK) é um kit de ferramentas de código aberto completo para criar agentes de IA que executam ações, e não apenas conversam. Ele abstrai as partes mais difíceis da engenharia de agentes, permitindo que você se concentre na lógica exclusiva do aplicativo.
Pronto para uso, o ADK fornece aos agentes:
Com o ADK, você pode transformar uma ideia em um protótipo funcional de agente em poucas horas, mantendo controle total para definir o papel do agente e as ferramentas que ele pode acessar.
Os desenvolvedores adoram o ambiente local de testes e a IU de depuração adk web do ADK, mas essa IU não é voltada ao usuário. Os desenvolvedores do Flutter adoram o Flutter AI Toolkit, e há muitos outros projetos de IU para agentes que podem servir como ponto de partida. Entretanto, até agora, toda integração entre IU e agente vem sendo feita sob medida; não havia um padrão para a comunicação entre o agente e a IU.
A equipe do CopilotKit lançou o AG-UI como um protocolo aberto e camada de IU projetados para padronizar a comunicação direta entre agentes e usuários por meio de IUs avançadas. O AG-UI é focado em agentes voltados diretamente ao usuário (e não em agentes de segundo plano), além de usar middleware e integrações com o cliente para se adaptar a qualquer front-end e back-end. Essa estrutura fornece uma maneira padronizada de comunicação entre agentes do back-end e aplicativos do front-end, possibilitando uma colaboração em tempo real e com estado entre a IA e os usuários humanos.
Os criadores do AG-UI também fornecem o CopilotKit, uma biblioteca de código aberto com componentes e hooks do React que funcionam com o AG-UI. Isso significa que você pode ter uma interface de chat aprimorada, barras laterais e outros elementos da IU funcionando no aplicativo em poucos minutos.
Ao combinar um back-end (ADK) poderoso com um protocolo de front-end (AG-UI) flexível, você pode criar aplicativos de IA verdadeiramente interativos. O ADK faz o papel de "cérebro" do agente e orquestra o uso de ferramentas, enquanto o AG-UI fornece um canal de comunicação com os componentes da IU, garantindo uma experiência do usuário perfeita.
Essa integração desbloqueia uma nova classe de recursos, prontos para uso:
Para começar, basta executar um comando. Isso clonará um repositório inicial de pilha completa com um back-end ADK pré-configurado e um front-end Next.js usando o CopilotKit.
npx copilotkit@latest create -f adkDepois de obter o projeto inicial, a lógica central é simples.
/backend/agent.ts)No back-end ADK, você define as instruções do agente e fornece as ferramentas com as quais ele vai trabalhar.
// 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. Conecte o front-end (/frontend/src/app/page.tsx)
No front-end React/Next.js, você envolve o aplicativo com o provedor do CopilotKit e usa os componentes da 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>
);
}E é isso! Agora você tem um agente de IA totalmente funcional com um front-end refinado, pronto para ser personalizado e expandido. Use a biblioteca de componentes da IU predefinida e a amplie com os seus widgets, porém, com toda a camada de comunicação já resolvida para você.
Chega de se preocupar com as complexidades de conectar a lógica do agente à interface do usuário. Com a integração entre o ADK e o AG-UI, você pode se concentrar no que realmente importa: entregar aplicativos de IA poderosos, inteligentes e colaborativos.
Recursos:
npx copilotkit@latest create -f adk
