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: