mirror of https://github.com/google/adk-docs.git synced 2026-09-14 16:16:59 +08:00

Files

T

Kristopher Overholt 58f3aaebca Replace documentation URLs and paths for adk.dev migration (#1536 )

* Replace google.github.io/adk-docs URLs and /adk-docs/ paths with adk.dev

Migrate all hardcoded documentation references to use the new custom
domain. Update root-relative links to remove the /adk-docs/ subpath
prefix since the site will be served from the root of adk.dev.

* Additional fixes

2026-04-01 12:48:27 -05:00

4.2 KiB

Raw Permalink Blame History

catalog_title, catalog_description, catalog_icon

catalog_title	catalog_description	catalog_icon
AG-UI	Build interactive chat UIs with streaming, state sync, and agentic actions	/integrations/assets/ag-ui.png

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:

<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:

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:

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.

4.2 KiB Raw Permalink Blame History