Skip to content

Build chat experiences with AG-UI and CopilotKit

Community Contribution

This is a community-maintained package that is not owned or supported by the Strands team. Validate and review the package before using it in your project.

Have your own integration? We'd love to add it here too!

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:

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

Quickstart

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

npx copilotkit create -f aws-strands-py

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

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

Strands agents are 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: [
      "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.