KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #codex #claude-code #mcp #rust #deepseek-harness #typescript #ai-agent #cli

a2a-ui

★ 37 Open GitHub ↗

A UI for the A2A protocol built with Next.js and Material UI

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

![A2A UI Screenshot](https://raw.githubusercontent.com/a2anet/a2a-ui/main/images/A2A%20UI%20Screenshot.jpeg)

## 📺 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).

- 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 the [`LangGraphAgentExecutor`](https://github.com/a2anet/a2anet-python/blob/main/src/a2anet/executors/langgraph.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 [`LangGraphAgentExecutor`](https://github.com/a2anet/a2anet-python/blob/main/src/a2anet/executors/langgraph.py).

## 🗺️ Roadmap

- [x] Migrate A2A SDK to server-side APIs
- [x] Add tool calls
- [x] Add message streaming
- [ ] Create component and hooks library
- [ ] Add CI/CD
- [ ] Add tests
- [ ] Add "Contributing" section
- [ ] Add support for files

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

a2a-ui

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README