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

In my previous post, 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 is an open, lightweight, event-based protocol, created by CopilotKit, that standardizes how agent backends connect to agent frontends.

On the client side, CopilotKit is the reference client implementation of AG-UI, but there are other clients. On the agent side, most major agent frameworks such as LangGraph, CrewAI, Google ADK, and more are supported.

You can read more details on the AG-UI protocol in the Core architecture and 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:

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

Install dependencies:

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

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

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

Start both the UI and agent servers:

npm run dev

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

You can look at the details of generated starter app in 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:

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:

cd my_agent
uv init
uv add google-adk

Test your agent:

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:

uv add ag-ui-adk uvicorn fastapi

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

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.

Create a CopilotKit frontend

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

At the top level:

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

Install CopilotKit packages:

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:

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:

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:

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.

Test

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

uv run main.py

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

npm run dev

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

AG-UI Interactive Dojo

If you want to try AG-UI with different agent frameworks, you can use the AG-UI Interactive Dojo. 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: