with-a2a#
An example of using assistant-ui with the A2A (Agent-to-Agent) protocol.
Getting Started#
1. Start an A2A server#
You need an A2A-compatible agent server. For example, using the assistant-ui-a2a kitchen sink demo:
cd a2a-server
pip install -e .
python main.py
This starts an A2A server at http://localhost:9999 with 5 skills.
2. Configure the frontend#
cp .env.example .env
# Edit .env if your A2A server is not at localhost:9999
3. Run the frontend#
pnpm install
pnpm dev
Open http://localhost:3000.
Features Demonstrated#
| Feature | Skill / Command |
|---|---|
| Streaming chat | Default chat |
| Artifacts (text, data, file) | /artifacts <topic> |
| Multi-step input-required flow | /multistep then provide topic |
| Error/failure handling | /fail |
| Long-running + cancellation | /slow |
| Agent card display | Automatic on load |
| Task state tracking (8 states) | All commands |
Architecture#
Browser (Next.js) ──A2A v1.0 SSE──▶ A2A Server
No proxy backend needed. @assistant-ui/react-a2a handles the full A2A protocol directly:
- Agent card discovery (
/.well-known/agent-card.json) - Streaming via
POST /message:stream(SSE) - Task lifecycle management
- Artifact accumulation