assistant-ui logo/Docs
AG-UI Protocol

Overview

Connect to AG-UI (Agent-User Interaction) protocol agents.

@assistant-ui/react-ag-ui is a runtime adapter for the AG-UI (Agent-User Interaction) protocol. It lets your assistant-ui frontend speak to any AG-UI-compliant agent server, including CopilotKit-based backends.

When to use it

Pick the AG-UI runtime when:

  • Your backend implements the AG-UI protocol (e.g. CopilotKit agents, custom AG-UI servers).
  • You want streaming text, thinking events, reasoning events, tool calls, and state snapshots in one protocol.
  • You need agent-side state synchronization via STATE_SNAPSHOT and STATE_DELTA events.

If your backend is not AG-UI-compliant, see picking a runtime for alternatives.

Architecture

@assistant-ui/react-ag-ui is layered on ExternalStoreRuntime (see architecture). The runtime owns AG-UI event parsing and message reconstruction; you provide an HttpAgent from @ag-ui/client and the adapter handles the wire protocol.

Shared adapters (attachments, speech, dictation, feedback, history) work the same way described in adapters.

Requirements

  • An AG-UI-compatible agent server.
  • React 18 or 19.

Install

npm install @assistant-ui/react @assistant-ui/react-ag-ui @ag-ui/client

Example

examples/with-ag-ui shows a complete reference implementation. Or scaffold one directly:

npx assistant-ui@latest create my-app -e with-ag-ui

Next

QuickstartMinimal HttpAgent + useAgUiRuntime setup.Runtime optionsuseAgUiRuntime options, adapters, events, thread list.