Content
# Agent2Agent (A2A) UI
A UI for the [Agent2Agent (A2A) Protocol](https://google-a2a.github.io/A2A/) made with [React](https://react.dev/), [Next.js](https://nextjs.org/), and [MUI](https://mui.com/).
The A2A protocol has standardised agent communication by introducing concepts like: **A2A Client**, **A2A Server**, **Agent Card**, **Message**, **Task**, **Part**, **Artifact**, and [more](https://a2aproject.github.io/A2A/latest/topics/key-concepts/).
For example, an **A2A Client** is an application or agent that initiates requests to an **A2A Server** on behalf of a user or another system, and an **Artifact** is an output (e.g., a document, image, structured data) generated by the agent as a result of a **Task**, composed of **Parts**.
In other words, the A2A protocol is like HTTP for agents.
Just like HTTP can be used to communicate with HTML servers built in any language or platform, the A2A protocol can be used to communicate with agents built in any framework over the internet.
This repository aims to be like one of the first web browsers that allowed people to access websites.
## Demo
Watch [Agent2Agent (A2A) UI Demo - A UI for every agent framework](https://www.youtube.com/watch?v=A4objPue-XM) on YouTube.
## Features
This repository demonstrates how the A2A protocol has standardised communication between people and agents:
- Add an Agent from a URL and fetch its Agent Card
- Send messages with the [A2A JavaScript SDK](https://github.com/a2aproject/a2a-js) A2A Client
- Keep track of chat sessions with **Context**
- Split units of work within a chat session into **Tasks**
- Render markdown supported **Messages** and **Artifacts**
## Installation
To install:
1. Clone the repository: `git clone https://github.com/A2ANet/A2AUI.git`
2. Install the packages: `npm install`
3. Start the development server: `npm run dev`
## Usage
After starting the development server, click "+ Agent" to add an A2A compatible agent.
For an example, see [Tavily Agent](https://github.com/A2ANet/TavilyAgent).
- The **A2A Server** must respond with `TaskStatusUpdateEvent` and `TaskArtifactUpdateEvent` objects only, independent `Message` objects are not currently supported.
- Each chat session (**Context**) is associated with a single agent. For best user experience, the A2A compatible agent should use the `contextId` to access the chat session's chat history.
### Tool Calls
The A2A UI supports rendering tool calls (outside the scope of the A2A protocol).
Tool calls are split into two parts, a tool call, and a tool call result.
#### Tool Call
- A tool call should be a `Message` with a single `DataPart` with the arguments that were used to call the tool.
- The `Message` object's `metadata` should have:
```json
{
"type": "tool-call",
"toolCallId": "[TOOL CALL ID]",
"toolCallName": "[TOOL CALL NAME]"
}
```
For an example, see [Tavily Agent's `agent_executor.py`](https://github.com/A2ANet/TavilyAgent/blob/main/agent_executor.py).
#### Tool Call Result
- A tool call should be a `Message` with a single `DataPart` with the result of calling the tool.
- The `Message` object's `metadata` should have:
```json
{
"type": "tool-call-result",
"toolCallId": "[TOOL CALL ID]",
"toolCallName": "[TOOL CALL NAME]"
}
```
For an example, see [Tavily Agent's `agent_executor.py`](https://github.com/A2ANet/TavilyAgent/blob/main/agent_executor.py).
## Roadmap
- [x] Migrate A2A SDK to server-side APIs
- [x] Add tool calls
- [ ] Add CI/CD
- [ ] Add tests
- [ ] Add "Contributing" section
- [ ] Add message streaming
- [ ] Add support for files
- [ ] Create component library
- [ ] Enable multi-agent conversations
- [ ] Add push notifications
## Join the A2A Net Community
A2A Net is a site to find and share AI agents and open-source community. Join to share your A2A agents, ask questions, stay up-to-date with the latest A2A news, be the first to hear about open-source releases, tutorials, and more!
- 🌍 Site: https://a2anet.com/
- 🤖 Discord: https://discord.gg/674NGXpAjU
