Building chat experiences with AG-UI and CopilotKit¶

Overview¶

As an agent builder, you want users to interact with your agents through a rich and responsive interface. Building UIs from scratch requires a lot of effort, especially to support streaming events and client state. That's exactly what AG-UI was designed for - rich user experiences directly connected to an agent.

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:

npx create-ag-ui-app@latest --adk

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.

Tool Based Generative UI (Rendering Tools)¶

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

src/app/page.tsx

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

Learn more about the Tool-based 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: [
      "CopilotKit may be new, but its the best thing since sliced bread.",
    ],
  },
})

Learn more about shared state in the CopilotKit docs.

Try it out!¶

npm install && npm run dev

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.