Demo Application

Demo Application (Demo Web App)

We provide a demo web application to showcase how Agents can communicate with each other via the A2A protocol.

Demo Architecture Diagram

Architecture Overview

Frontend: A web application based on Mesop, responsible for rendering the conversation between the end-user and the “Host Agent”. This application can render text, thought bubbles, web forms (for Agent-requested input), images, etc. More content types are coming soon.
Host Agent: A Google ADK Agent responsible for coordinating user requests and delegating them to remote Agents.
Remote Agent: Each remote agent is an A2A Client running inside a Google ADK Agent. It fetches the AgentCard of the A2A Server and then proxies all requests using the A2A protocol.

Dynamically Add Agents: Click the robot icon in the web app to enter the AgentCard address of a remote Agent. The application will fetch the Card and add it to the list of known Agents.
Chat with One or More Agents: Click the chat button to start or continue a conversation. Requests are sent to the Host Agent, which delegates them to one or more remote Agents.
Render Complex Content: If an Agent returns complex content (like images or web forms), the frontend will render them in the conversation view. The remote Agent is responsible for translating between the A2A format and the native representation of the web application.
Explore A2A Tasks: Click the history record to view the messages sent between the web app and all Agents (Host Agent and Remote Agents). Click the task list to view all A2A task updates from the remote Agents.

Python 3.12 or higher
UV (Package manager)
A running Agent Server that supports the A2A protocol (You can use the code from the Python Example Agents)

Navigate to the Demo UI directory:

# Assuming you are in the a2a-protocol repository root
cd a2acn/_docs/docs/demo/ui

Create an environment file containing your API key:
```
echo "GOOGLE_API_KEY=your_api_key_here" > .env
```
Run the frontend example:
```
uv run main.py
```

Note: The application runs on port 12000 by default.

To learn about the UI components used in the Demo, refer to the UI Component Library page.