# Agent-User Interaction Protocol (AG-UI) with Agent Development Kit (ADK)

Author: [Mete Atamel](https://atamel.dev/) | Published: 2026-03-23 | Topics: GenAI, Agents, AG-UI, ADK | Canonical: https://atamel.dev/posts/2026/03-23_agui_with_adk/


![AG-UI and ADK](https://github.com/meteatamel/genai-beyond-basics/raw/main/samples/protocols/ag-ui/adk/images/agui-and-adk.png)

In my [previous post](https://atamel.dev/posts/2026/03-17_agent_protocols_mcp_a2a_a2ui_agui/), I provided a high-level
overview of some of the main agent protocols: MCP, A2A, A2UI, and AG-UI. In this post, I will zoom into the AG-UI
protocol and show how it can be used with Google's Agent Development Kit (ADK). 

## Recap: Agent-User Interaction Protocol (AG-UI)

[AG-UI](https://github.com/ag-ui-protocol/ag-ui) is an open, lightweight, event-based protocol, created by
[CopilotKit](https://www.copilotkit.ai/), that standardizes how agent backends connect to agent frontends. 

![AG-UI Protocol](https://github.com/user-attachments/assets/cd0376f3-0a3d-4cc3-a931-2b166c4efe5e)

On the client side, [CopilotKit](https://github.com/CopilotKit/CopilotKit) is the reference client implementation of
AG-UI, but there are other [clients](https://docs.ag-ui.com/introduction#clients). On the agent side, most major agent
frameworks such as LangGraph, CrewAI, Google ADK, and
[more](https://docs.ag-ui.com/introduction#agent-framework-1st-party) are supported.

You can read more details on the AG-UI protocol in the [Core architecture](https://docs.ag-ui.com/concepts/architecture)
and [Events](https://docs.ag-ui.com/concepts/events) docs.

## AG-UI with Agent Development Kit (ADK)

You can use ADK agents with AG-UI in a couple of ways. You can either start fresh with AG-UI's starter template or 
integrate AG-UI into your existing ADK agent. Let's try both.

### AG-UI starter template for ADK

The easiest way is to use the AG-UI starter template to create a new AG-UI frontend and an ADK backend.

Create the frontend and backend (agent) with the starter template:

```sh
npx copilotkit@latest create -f adk -n starter-copilot-app-and-agent
```

Install dependencies:

```sh
cd starter-copilot-app-and-agent
npm install
```

Create `agent/.env` file and add your Google API key:

```sh
echo 'export GOOGLE_API_KEY=your-google-api-key-here' > agent/.env
```

Start both the UI and agent servers:

```sh
npm run dev
```

Navigate to `localhost:3000` and start prompting your AI agent:

![AG-UI starter template app](https://github.com/meteatamel/genai-beyond-basics/raw/main/samples/protocols/ag-ui/adk/images/starter-template-app.png)

You can look at the details of generated starter app in [starter-copilot-app-and-agent](https://github.com/meteatamel/genai-beyond-basics/tree/main/samples/protocols/ag-ui/adk/starter-copilot-app-and-agent).

### Add AG-UI to an existing ADK agent

To fully understand how AG-UI works with ADK, let's try to add AG-UI to an existing ADK agent and see what's involved.

#### Create the ADK agent

Let's use `adk create` to create an ADK agent:

```sh
uvx --from google-adk adk create my_agent \
    --model=gemini-2.5-flash \
    --api_key=your-gemini-api-key
```

Transition to `uv` and add ADK dependency:

```sh
cd my_agent
uv init
uv add google-adk
```

Test your agent:

```sh
uv run adk run .
```

You have an ADK agent ready now.

#### Add AG-UI support to the ADK agent

Add `ag-ui-adk`, along with `uvicorn` and `fastapi` dependencies to your project:

```sh
uv add ag-ui-adk uvicorn fastapi
```

Expose your ADK agent via AG-UI by changing `main.py` to:

```python
from fastapi import FastAPI
from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint
from agent import root_agent
from dotenv import load_dotenv

load_dotenv()

# Create ADK middleware agent instance
adk_agent = ADKAgent(
    adk_agent=root_agent,
    app_name="demo_app",
    user_id="demo_user",
    session_timeout_seconds=3600,
    use_in_memory_services=True
)

# Create FastAPI app
app = FastAPI()

# Add the ADK endpoint
add_adk_fastapi_endpoint(app, adk_agent, path="/")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="localhost", port=8000)
```

As you can see, we're using `ADKAgent` as middleware for our ADK agent. This effectively turns our ADK agent into an AG-UI compatible agent.

You can look at the details of this agent in [my-agent](https://github.com/meteatamel/genai-beyond-basics/tree/main/samples/protocols/ag-ui/adk/my_agent).

#### Create a CopilotKit frontend

Now, create a React-based CopilotKit frontend for the AG-UI enabled ADK agent.

At the top level:

```sh
npx create-next-app@latest my-copilot-app
cd my-copilot-app
```

Install CopilotKit packages: 

```sh
npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime @ag-ui/client
```

Create an API route to connect CopilotKit to your ADK agent in `app/api/copilotkit/route.ts`:

```typescript
import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";

const serviceAdapter = new ExperimentalEmptyAdapter();

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new HttpAgent({ url: "http://localhost:8000/" }),
  }
});

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};
```

Edit `app/layout.tsx` to wrap your application with the CopilotKit provider:

```tsx
import { CopilotKit } from "@copilotkit/react-core"; 
import "@copilotkit/react-ui/v2/styles.css";
// ...
export default function RootLayout({ children }: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>
        <CopilotKit runtimeUrl="/api/copilotkit" agent="my_agent">
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}
```

Edit `app/page.tsx` to add the chat interface, specifically the `CopilotSidebar` component, to your page:

```tsx
import { CopilotSidebar } from "@copilotkit/react-core/v2"; 

export default function Page() {
  return (
    <main>
      <h1>Your App</h1>
      <CopilotSidebar />
    </main>
  );
}
```

You can look at the details of this frontend in [my-copilot-app](https://github.com/meteatamel/genai-beyond-basics/tree/main/samples/protocols/ag-ui/adk/my-copilot-app).

#### Test

From your agent directory, start the agent server at `localhost:8000`:

```sh
uv run main.py
```

From the frontend directory, start the development environment at `localhost:3000`:

```sh
npm run dev
```

Navigate to `localhost:3000` and start prompting your AI agent:

![Existing ADK app](https://github.com/meteatamel/genai-beyond-basics/raw/main/samples/protocols/ag-ui/adk/images/existing-adk-app.png)

## AG-UI Interactive Dojo

If you want to try AG-UI with different agent frameworks, you can use the [AG-UI Interactive Dojo](https://dojo.ag-ui.com/).
It's an interactive playground where you can try AG-UI with different agent frameworks, see the code, and access the docs
for different agent framework integrations. Very useful.

## Conclusion

In this blog post, we looked at how to use AG-UI with ADK. We started with the AG-UI starter template and then looked at
how to add AG-UI to an existing ADK agent. 

To learn more, here are some resources:

* [AG-UI](https://docs.ag-ui.com/)
* [My AG-UI samples](https://github.com/meteatamel/genai-beyond-basics/tree/main/samples/protocols/ag-ui/)