An open-source UI for the Agent2Agent (A2A) protocol

4 months ago 3

A UI for the Agent2Agent (A2A) Protocol made with React, Next.js, and MUI.

The A2A protocol has standardised agent communication by introducing concepts like: A2A Client, A2A Server, Agent Card, Message, Task, Part, Artifact, and more. 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.

Watch Agent2Agent (A2A) UI Demo - A UI for every agent framework on YouTube.

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 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

To install:

Clone the repository: git clone https://github.com/A2ANet/A2AUI.git
Install the packages: npm install
Start the development server: npm run dev

After starting the development server, click "+ Agent" to add an A2A compatible agent. For an example, see Tavily Agent.

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.

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.

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:

{ "type": "tool-call", "toolCallId": "[TOOL CALL ID]", "toolCallName": "[TOOL CALL NAME]" }

For an example, see Tavily Agent's agent_executor.py.

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:

{ "type": "tool-call-result", "toolCallId": "[TOOL CALL ID]", "toolCallName": "[TOOL CALL NAME]" }

For an example, see Tavily Agent's agent_executor.py.

Migrate A2A SDK to server-side APIs
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!