assistant-ui--assistant-ui/examples/with-ag-ui

AG-UI Protocol Integration

This example demonstrates how to integrate assistant-ui with the AG-UI protocol for connecting to AG-UI compatible agents.

Quick Start

Using CLI (Recommended)

npx assistant-ui@latest create my-app --example with-ag-ui
cd my-app

1. Start the Backend Agent

# Install Python dependencies
pip install -r server/requirements.txt

# Run the agent (echo mode by default)
python server/agent.py

# Or with OpenAI integration
OPENAI_API_KEY=sk-xxx python server/agent.py

The agent will start at http://localhost:8000/agent.

2. Configure Environment

Create .env.local:

NEXT_PUBLIC_AGUI_AGENT_URL=http://localhost:8000/agent

3. Run the Frontend

pnpm dev

Features

• AG-UI protocol integration via @assistant-ui/react-ag-ui
• Multi-thread support with "New Thread" button
• Custom browser alert tool demonstration
• Client-side tool execution
• Tool result rendering

Backend Agent

The included server/agent.py provides:

• Echo mode (default): Echoes back user messages for testing
• OpenAI mode: Uses GPT-5.4 Nano when OPENAI_API_KEY is set

Endpoints

• POST /agent - AG-UI agent endpoint (SSE streaming)
• GET /health - Health check

Related Documentation

• assistant-ui Documentation
• AG-UI Protocol