AG-UI for React · v0.1.0

Give your agent a Material 3 Expressive interface.

Build an interface for AI agents using AG-UI. Show replies as they arrive, turn tool calls into useful UI, and let people decide when an agent can act.

The AG-UI library brings conversations to the same React components, colors, and motion used across this site.

Try the demo Read the docs

Try it here

Try an agent conversation.

Scripted demo. No LLM or API key required.

Choose a scenario

Every response is scripted. You can stop playback at any time.

Streaming and reasoning

Watch a reply arrive a few words at a time. Open the reasoning to see the scripted notes behind it.

What makes Material 3 Expressive feel different?

Play the scenario to see the conversation.

One design system

Match the rest of your app.

Use Material 3 Expressive for your app’s controls and the AG-UI companion for its conversations. Both follow the same theme, including light and dark modes. Try the theme controls at the top of this page to see them change together.

Browse Material components

Use the whole chat or compose the parts

Start with AgentChat, or arrange messages, reasoning, tool calls, activity, and run status around your own layout. Register a tool renderer when a card or control works better than text.

The package renders AG-UI streams. It does not contain or call an LLM. You connect your own agent when you are ready.

Start building

Add AG-UI to your React app.

Install the native AG-UI package and its peers in a React 18 or 19 app.

npm install @language-lit/material3-expressive-ag-ui @language-lit/material3-expressive @ag-ui/client @ag-ui/core

Import both stylesheets in this order, then use AgentProvider inside your Material3Provider to connect an agent.

import '@language-lit/material3-expressive/styles.css'
import '@language-lit/material3-expressive-ag-ui/styles.css'

Read the AG-UI setup guide Set up Material 3 Expressive

Already using CopilotKit?

The adapter supports CopilotKit 1.71.x v1 only. Import it from @language-lit/material3-expressive-ag-ui/copilotkit inside your existing CopilotKit setup. The v2 API is not supported.

Read the CopilotKit adapter guide

Build your own agent interface.

Start with a chat, then add the components your app needs. These guides cover the native API and the CopilotKit adapter.