For developers building generative AI applications, the last year has been a whirlwind of progress. We’ve seen incredible advancements in backend agentic systems that can reason, plan, and execute complex tasks. But a powerful agent is only half the story. How do you seamlessly connect that intelligence to your application's frontend? How do you create a truly collaborative experience between your user and your AI?
Today, we're excited to highlight a new integration that directly addresses this challenge: the Agent Development Kit (ADK) now works with AG-UI, an open protocol for building rich, interactive AI user experiences. This combination empowers you to build sophisticated AI agents on the backend and give them a production-ready, collaborative frontend with minimal effort.
The Agent Development Kit (ADK) is a batteries-included, open-source toolkit for building AI agents that do things, not just chat. It abstracts away the most difficult parts of agent engineering, allowing you to focus on the unique logic of your application.
Out of the box, ADK provides your agents with:
With ADK, you can go from an idea to a working agent prototype in hours, all while retaining full control to define your agent’s role and the tools it can access.
Developers love ADK’s local developer playground and debugging UI adk web, but it is not a user-facing UI. Flutter devs love the Flutter AI Toolkit and there are many other agent UI projects to get started with, but so far any UI and agent integration has been bespoke, there was no standard for communication between Agent and UI.
The CopilotKit team released AG-UI as an open protocol and UI layer designed to standardize agents talking directly to users with rich UIs. AG UI is focused on the direct user-facing agent (not a background agent) and it uses middleware and client integrations to generalize for any front end and any back end. It provides a standardized way for backend agents to communicate with frontend applications, enabling real-time, stateful collaboration between AI and human users.
The AG-UI creators also provide CopilotKit, an open-source library of drop-in React components and hooks which work with AG UI. This means you can get a polished chat interface, sidebars, and other UI elements running in your app in minutes.
By combining a powerful backend (ADK) with a flexible frontend protocol (AG-UI), you can now build truly interactive AI applications. ADK runs the agent's "brain" and tool orchestration, while AG-UI provides a communication channel to UI components for a seamless user experience.
This integration unlocks a new class of features, right out of the box:
Getting started is as simple as running one command. This will clone a full-stack starter repository with a pre-configured ADK backend and a Next.js frontend using CopilotKit.
npx copilotkit@latest create -f adkOnce you have the starter project, the core logic is simple.
/backend/agent.ts)In your ADK backend, you define your agent’s instructions and give it tools to work with.
// 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. Connect the Frontend (/frontend/src/app/page.tsx)
In your React/Next.js frontend, you wrap your application with the CopilotKit provider and use the UI components.
// 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>
);
}And that's it! You now have a fully functional AI agent with a polished frontend, ready for you to customize and extend. Use the pre-build UI component library, and extend with your own widgets, but all the communication layer handled for you.
Stop wrestling with the complexities of connecting your agent's logic to your user interface. With the ADK and AG-UI integration, you can focus on what matters most: shipping powerful, intelligent, and collaborative AI applications.
Resources:
npx copilotkit@latest create -f adk
