Delight users by combining ADK Agents with Fancy Frontends using AG-UI

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.

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

Once you have the starter project, the core logic is simple.

1. 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

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

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: