Agent2Agent(A2A) UI: Agent 간 통신(A2A) 프로토콜 위한 통합 UI

A2A(Agent2Agent) Protocol 소개

에이전트 기반 시스템은 최근 다양한 인공지능 기술과 결합되어 점점 더 많은 분야에서 활용되고 있습니다. 이러한 시스템에서 서로 다른 에이전트들이 정보를 교환하고 협업을 하기 위해서는 표준화된 통신 프로토콜이 필요합니다. 그동안 REST API, WebSocket, GraphQL 등 다양한 방식이 사용되었지만, 에이전트 특화된 통신에 있어서는 한계가 있었습니다. 이러한 문제를 해결하고자 등장한 것이 바로 Agent2Agent(A2A) 프로토콜입니다.

A2A 프로토콜은 HTTP처럼 에이전트 간 통신을 표준화하기 위한 목적으로 개발된 새로운 통신 프로토콜입니다. 이 프로토콜은 에이전트 간의 상호작용을 구조화하기 위한 개념으로서 A2A Client, A2A Server, Agent Card, Message, Task, Part, Artifact 등을 정의하고 있습니다. 이러한 구조를 통해, 서로 다른 언어나 플랫폼으로 구현된 에이전트 간에도 일관된 방식으로 소통할 수 있게 됩니다.

A2A 프로토콜은 에이전트 간 통신을 위한 구조화된 방식으로, 다양한 개념들을 정의합니다.

  • A2A Client는 사용자나 시스템을 대신해 요청을 보내는 역할을 하며,
  • A2A Server는 이에 응답합니다.
  • Agent Card는 에이전트의 정보를 담은 메타데이터이며,
  • TaskMessage는 실제 작업 단위와 메시지를 의미합니다.
  • 이 외에도 Artifact, Part 등의 요소를 통해 결과물이나 세부 작업을 구조화할 수 있습니다.

HTTP가 어떤 언어로든 구축된 웹 서버와 통신할 수 있는 것처럼, A2A는 어떤 프레임워크로 만든 에이전트든 연결될 수 있는 통신 기반을 제공합니다.

#a2a UI 소개

A2A UI는 A2A 프로토콜을 시각적으로 조작할 수 있는 웹 인터페이스 프로젝트입니다. 이 프로젝트는 React, Next.js, MUI로 개발되었으며, A2A 기반의 에이전트와 상호작용할 수 있는 브라우저 형태의 UI를 제공합니다. 마치 초기 웹 브라우저가 웹페이지를 탐색할 수 있는 통로였던 것처럼, A2AUI는 에이전트 세계를 시각적으로 탐색할 수 있는 창이 되어줄 수 있습니다.

A2AUI의 역할과 주요 기능

A2AUI는 A2A 프로토콜을 시각적으로 조작할 수 있게 해주는 웹 기반 UI입니다. 주된 기능은 다음과 같습니다:

  • 에이전트를 URL로 추가하고 해당 Agent Card를 불러오기
  • A2A JavaScript SDK를 활용한 메시지 송수신
  • 채팅 세션을 Context로 유지하고 각 세션 내 작업을 Task로 구분
  • Markdown 형식의 메시지 및 결과물(Artifact) 시각화

사용자는 UI 상에서 "+ Agent" 버튼을 통해 에이전트를 추가하고, 해당 에이전트와 직접 메시지를 주고받으며, 에이전트의 응답 결과를 시각적으로 확인할 수 있습니다.

Tool Call 기능 지원

A2A 프로토콜 외부 기능으로, A2AUI는 Tool Call과 그 결과를 시각적으로 지원합니다. 이는 다음과 같은 방식으로 구성됩니다.

  • Tool Call은 특정 도구를 호출할 때 사용되며, type: "tool-call" 메타데이터를 가집니다.
  • Tool Call Result는 호출 결과를 반환하며, type: "tool-call-result"를 사용합니다.
  • 둘 다 Message 객체로 표현되며, 각 메시지에는 toolCallIdtoolCallName이 포함됩니다.

이러한 기능은 TavilyAgent의 예시 코드를 통해 구현 사례를 확인할 수 있습니다.

설치 및 사용 방법

개발 환경에서 A2AUI를 설치하고 실행하는 방법은 다음과 같습니다.

git clone https://github.com/A2ANet/A2AUI.git
cd A2AUI
npm install
npm run dev

서버를 실행한 뒤 브라우저에서 UI를 띄워 에이전트를 추가하고 테스트할 수 있습니다. 참고용 에이전트로는 TavilyAgent가 제공됩니다.

향후 계획(Roadmap)

A2AUI 프로젝트는 다음과 같은 기능이 예정되어 있습니다:

  • CI/CD 파이프라인 통합
  • 테스트 코드 추가
  • 메시지 스트리밍 기능
  • 파일 업로드 및 다운로드 지원
  • 컴포넌트 라이브러리 구축
  • 다중 에이전트 대화 지원
  • 푸시 알림 추가

라이선스

A2AUI 프로젝트는 MIT 라이선스로 공개 및 배포되고 있습니다.

:house: A2A UI 공식 사이트

:github: A2A UI 프로젝트 GitHub 저장소

더 읽어보기

A2A 프로토콜 소개

https://google-a2a.github.io/A2A

A2A Key Concepts 문서

TavilyAgent




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: