In this guide, you will learn how to build a frontend for your Agent Development Kit (ADK) Agents using AG-UI Protocol and CopilotKit. ADK will power the AI agents backend, while CopilotKit powers the frontend, and then AG-UI creates a bridge that enables the frontend to communicate with the backend.

This is essentially a quickstart guide to help you get started fast, and to see how the agent <> user pieces fully fit together.

Before we jump in, we want to give a special shoutout to Mark Fogle and Syed Fakher for initially building the ADK/AG-UI integration. With that said, here is what we will cover:

• What is the Agent Development Kit (ADK)?
• Setting up an ADK + AG-UI + CopilotKit agent using CLI
• Integrating your ADK agent with AG-UI protocol in the backend
• Building a frontend for your ADK + AG-UI agent using CopilotKit

Here is a preview of what you can build when you bring your ADK agent to the frontend using AG-UI + CopilotKit.

What is the Agent Development Kit (ADK)?

Agent Development Kit (ADK) is an open-source framework designed to simplify the process of building complex and production-ready AI agents.

Out of the box, ADK equips your AI agents with:

• Planning – multi-step reasoning and execution.
• Tool use – integration with external APIs, services, and data sources.
• State management – eliminating the need to create chaining logic or track progress manually.

With ADK, you can go from an idea into a working prototype within hours, while maintaining complete flexibility to extend and customize your AI agent.

If you want to dive deeper, check out the ADK docs.

Now that you have learned about ADK, let's see how to use it together with AG-UI and CopilotKit to build full-stack AI agents.

Prerequisites

To fully understand this tutorial, you need to have a basic understanding of React or Next.js

We'll also make use of the following:

• Python - a popular programming language for building AI agents with AI agent frameworks; make sure it is installed on your computer.
• AG-UI Protocol - The Agent User Interaction Protocol (AG-UI), developed by CopilotKit, is an open-source, lightweight, event-based protocol that facilitates rich, real-time interactions between the frontend and your AI agent backend.

Check out the AG-UI ⭐️ GitHub

• Gemini API Key - an API key to enable you to perform various tasks using the Gemini models for ADK agents.
• CopilotKit - an open-source copilot framework for building custom AI chatbots, in-app AI agents, and text areas.

Check out the CopilotKit ⭐️ GitHub

Setting up your full-stack ADK agent using CLI

In this section, you will learn how to set up a full-stack ADK agent using a CLI command that sets up the backend using AG-UI protocol and the frontend using CopilotKit. This flow is fully covered in the Getting Started guide within the CopilotKit docs.

Let’s dive in.

Step 1: Run CLI command

If you don’t already have an ADK agent, you can set up one quickly by running the CLI command below in your terminal.

Then give your project a name as shown below.

Step 2: Install dependencies

Once your project has been created successfully, install dependencies using your preferred package manager:

Step 3: Configure your Gemini API key

After installing the dependencies, create a .env file in the root folder and add your [Gemini API key].(https://makersuite.google.com/app/apikey)

Step 4: Run development server

Then start the development server using your preferred package manager:

Once the development server is running, navigate to http://localhost:3000/ and you should see your ADK + AG-UI + CopilotKit agent up and running.

Congrats! You've successfully integrated an ADK Agent chatbot into your application. To start, try the provided tools to set the web page theme, write proverbs, or get the weather, as shown below.

How is your ADK agent integrated with the AG-UI protocol in the backend?

In this section, you will learn how your ADK agent is integrated with the AG-UI protocol and exposed to the frontend as an ASGI application.

Let’s jump in.

Step 1: Install AG-UI package

To get started, install the AG-UI ADK package together with other necessary dependencies, such as FastAPI and uvicorn, in order to use them to run your ADK agent.

Step 2: Configure your ADK agent

Once you have installed the AG-UI package, configure your ADK agent by defining the agent name, specifying Gemini 2.5 Flash as the Large Language Model (LLM), and defining the agent’s instructions, as shown below in the ./agent.py file.

Step 3: Create ADK middleware agent instance

After configuring your ADK agent, create an ADK middleware agent instance that wraps your ADK agent to integrate it with AG-UI protocol, as shown below in the ./agent.py file.

Step 4: Configure a FastAPI endpoint

Once you have created an ADK middleware agent instance, configure a FastAPI endpoint that exposes your AG-UI wrapped ADK agent to the frontend.

Congrats! You've successfully integrated your ADK Agent and AG-UI protocol, and it is available at http://localhost:8000 (or specified port) endpoint. Let’s now see how to add a frontend to your AG-UI wrapped ADK agent.

Building a frontend for your ADK + AG-UI agent using CopilotKit

In this section, you will learn how to add a frontend to your ADK + AG-UI agent using CopilotKit, which runs anywhere that React runs.

Let’s get started.

Step 1: Install CopilotKit packages

To get started, install the latest packages for CopilotKit into your frontend.

Step 2: Set up the Copilot Runtime instance

Once you have installed CopilotKit packages, set up the Copilot runtime instance with an HttpAgent instance in the /api/copilotkit API route that enables your frontend to make HTTP requests to the backend.

Step 3: Set up CopilotKit provider

After setting up a Copilot Runtime instance, set up the CopilotKit provider component that manages your ADK agent sessions.

To set up the CopilotKit Provider, the [<CopilotKit>](https://docs.copilotkit.ai/reference/components/CopilotKit) component must wrap the Copilot-aware parts of your application.

For most use cases, it's appropriate to wrap the CopilotKit provider around the entire app, e.g., in your layout.tsx file.

Step 4: Set up a Copilot UI component

Once you have set up the CopilotKit Provider, set up a Copilot UI component that enables you to interact with your ADK agent. CopilotKit ships with several built-in chat components, which include CopilotPopup, CopilotSidebar, and CopilotChat.

To set up a Copilot UI component, define it alongside your core page components, e.g., in your page.tsx file.

Step 5: Sync your ADK agent state with the frontend

After setting up a Copilot UI component, sync your ADK agent state with the frontend using CopilotKit hooks.

To sync your ADK agent state with the frontend, use the CopilotKit useCoAgent hook that allows you to share state bidirectionally between your application and the agent.

To render your agent's state, progress, outputs, or tool calls with custom UI components in real-time, you can use tool-based Generative UI.

Then try asking the agent to get the weather for a location. You should see the custom UI component that we added to render the get weather tool call and display the arguments that were passed to the tool.

Step 6: Stream your ADK agent responses in the frontend

Once you have synced your ADK agent state with the frontend, stream your ADK agent responses or results in the frontend.

To stream your ADK agent responses or results in the frontend, pass the agent’s state field values to the frontend components, as shown below.

If you query your ADK agent, you should see the agent’s response or results streaming in the UI, as shown below.

Conclusion

In this guide, we have walked through the steps of building a frontend for your ADK agent using AG-UI protocol and CopilotKit.

While we’ve explored a couple of features, we have barely scratched the surface of the countless use cases for CopilotKit, ranging from building interactive AI chatbots to building agentic solutions—in essence, CopilotKit lets you add a ton of useful AI capabilities to your products in minutes.

Hopefully, this guide makes it easier for you to integrate AI-powered Copilots into your existing application.

Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join the Discord community.