Delight users by combining ADK Agents with Fancy Frontends using AG-UI
- Google Developers Blog
Community/Events
Learn
Blog
YouTube
Search
Community/Events
Learn
Blog
YouTube
Delight users by combining ADK Agents with Fancy Frontends using AG-UI
SEPT. 26, 2025
Alan Blount
Senior Technical Product Manager
Share
Facebook
Twitter
LinkedIn
Mail
Delight users by combining ADK Agents with Fancy Frontends using AG-UI
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.Your Agent Backend: ADK
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:
Multi-Step Planning: The ability to reason through a problem, break it down into steps, and execute them in order.
Tool Use: Seamless integration with external APIs, services, and data sources, giving your agent real-world capabilities.
State Management: Robust tracking of progress and memory, so you don't have to build complex chaining logic from scratch.
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.Connecting to a front end with AG 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.
Better Together: What the ADK + AG-UI Integration Unlocks
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:
Generative UI: Go beyond text. Your agent can generate and render UI components directly in the chat, providing rich, contextual information and actions.
Shared State: The frontend and backend agent share a common understanding of the application's state, allowing the agent to react to user actions in the UI and vice versa.
Human-in-the-Loop: Users can supervise, approve, or correct agent actions before they are executed, helping to ensure safety and control.
Frontend Tools: Empower your agent to directly interact with the frontend, such as filling out forms, navigating pages, or annotating documents on the user’s behalf.
Sorry, your browser doesn't support playback for this video
Let's Get Building: A Quick Start Guide
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 adk
Shell
Copied
Once you have the starter project, the core logic is simple.
Define your Agent in the Backend (/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;
JavaScript
Copied
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>
);
}
JavaScript
Copied
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.Start Building Today
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:
Quick Start Repo: npx copilotkit@latest create -f adk
Official Documentation: https://docs.copilotkit.ai/adk
Starter Project on GitHub: https://github.com/copilotkit/with-adk
AG-UI Dojo Tutorial: https://dojo.ag-ui.com/adk-middleware/feature/shared_state
posted in:
AI
Cloud
Announcements
Solutions
Solve
Learn
Previous
Next
Related Posts
AI
Cloud
Announcements
Solutions
Expanding Choice in Gemini Enterprise Agent Platform: Introducing Grounding with Parallel Web Search
JULY 16, 2026
AI
Best Practices
Industry Trends
Building scalable AI agents with modular prompt transpilation
JULY 16, 2026
AI
Announcements
Solutions
Evolving Spec-Driven Development: Conductor Now Supports Antigravity
JULY 16, 2026
Connect
Blog
Bluesky
Instagram
LinkedIn
X (Twitter)
YouTube
Programs
Google Developer Program
Google Developer Groups
Google Developer Experts
Accelerators
Women Techmakers
Google Cloud & NVIDIA
Developer consoles
Google API Console
Google Cloud Platform Console
Google Play Console
Firebase Console
Actions on Google Console
Cast SDK Developer Console
Chrome Web Store Dashboard
Google Home Developer Console
Android
Chrome
Firebase
Google Cloud Platform
All products
Manage cookies
Terms
Privacy