AG-UI user interface for ADK¶

Supported in ADKPythonTypeScriptGoJava

Turn your ADK agents into full-featured applications with rich, responsive UIs. AG-UI is an open protocol that handles streaming events, client state, and bi-directional communication between your agents and users.

AG-UI provides a consistent interface to empower rich clients across technology stacks, from mobile to the web and even the command line. There are a number of different clients that support AG-UI:

CopilotKit provides tooling and components to tightly integrate your agent with web applications
Clients for Kotlin, Java, Go, and CLI implementations in TypeScript

This tutorial uses CopilotKit to create a sample app backed by an ADK agent that demonstrates some of the features supported by AG-UI.

Quickstart¶

To get started, let's create a sample application with an ADK agent and a simple web client:

Create the app:
```
npx copilotkit@latest create -f adk
```
Set your Google API key:
```
export GOOGLE_API_KEY="your-api-key"
```
Install dependencies and run:
```
npm install && npm run dev
```

This starts two servers:

http://localhost:3000 - The web UI (open this in your browser)
http://localhost:8000 - The ADK agent API (backend only)

Open http://localhost:3000 in your browser to chat with your agent.

Features¶

Chat¶

Chat is a familiar interface for exposing your agent, and AG-UI handles streaming messages between your users and agents:

src/app/page.tsx

<CopilotSidebar
  clickOutsideToClose={false}
  defaultOpen={true}
  labels={{
    title: "Popup Assistant",
    initial: "👋 Hi, there! You're chatting with an agent. This agent comes with a few tools to get you started..."
  }}
/>

Learn more about the chat UI in the CopilotKit docs.

Generative UI¶

AG-UI lets you share tool information with a Generative UI so that it can be displayed to users:

src/app/page.tsx

useRenderToolCall(
  {
    name: "get_weather",
    description: "Get the weather for a given location.",
    parameters: [{ name: "location", type: "string", required: true }],
    render: ({ args }) => {
      return <WeatherCard location={args.location} themeColor={themeColor} />;
    },
  },
  [themeColor],
);

Learn more about Generative UI in the CopilotKit docs.

Shared State¶

ADK agents can be stateful, and synchronizing that state between your agents and your UIs enables powerful and fluid user experiences. State can be synchronized both ways so agents are automatically aware of changes made by your user or other parts of your application:

src/app/page.tsx

const { state, setState } = useCoAgent<AgentState>({
  name: "my_agent",
  initialState: {
    proverbs: [
      "A journey of a thousand miles begins with a single step.",
    ],
  },
})

Learn more about shared state in the CopilotKit docs.

Resources¶

To see what other features you can build into your UI with AG-UI, refer to the CopilotKit docs:

Or try them out in the AG-UI Dojo.