A2UI: 에이전트 주도 사용자 인터페이스 (Agent-to-User Interface)

A2UI는 에이전트가 생성한 업데이트 가능한 UI를 표현하기 위해 최적화된 형식과 초기 렌더러 세트를 갖춘 오픈 소스 프로젝트로, 에이전트가 풍부한 사용자 인터페이스를 생성하거나 채울 수 있도록 합니다.

A2UI로 렌더링된 카드 갤러리. A2UI가 달성할 수 있는 다양한 UI 구성을 보여줍니다.

⚠️ 상태: 초기 단계 퍼블릭 프리뷰

참고: A2UI는 현재 v0.8 (퍼블릭 프리뷰) 단계입니다. 명세와 구현체는 작동 가능한 상태이지만 여전히 발전 중입니다. 협업을 장려하고, 피드백을 수집하며, 기여(예: 클라이언트 렌더러)를 요청하기 위해 프로젝트를 공개합니다. 변경 사항이 발생할 수 있음을 유의해 주세요.

요약

생성형 AI는 텍스트와 코드를 생성하는 데 뛰어나지만, 에이전트가 원격으로 작동하거나 신뢰 경계를 넘나드는 경우 사용자에게 풍부하고 대화형인 인터페이스를 제공하는 것은 어려울 수 있습니다.

A2UI는 에이전트가 "UI로 말할 수 있게" 해주는 오픈 표준 및 라이브러리 세트입니다. 에이전트는 UI의 의도(Intent) 를 설명하는 선언적 JSON 형식을 보냅니다. 그러면 클라이언트 애플리케이션은 자체 네이티브 컴포넌트 라이브러리(Flutter, Angular, Lit 등)를 사용하여 이를 렌더링합니다.

이러한 접근 방식은 에이전트가 생성한 UI가 데이터처럼 안전하면서도 코드처럼 표현력 있게 만들어 줍니다.

상위 철학

A2UI는 에이전트로부터의 상호 운용 가능하고 크로스 플랫폼인, 생성형 또는 템플릿 기반 UI 응답의 특정 과제를 해결하기 위해 설계되었습니다.

프로젝트의 핵심 철학:

• 보안 우선: LLM이 생성한 임의의 코드를 실행하는 것은 보안 위험을 초래할 수 있습니다. A2UI는 실행 가능한 코드가 아닌 선언적 데이터 형식입니다. 클라이언트 애플리케이션은 신뢰할 수 있고 사전 승인된 UI 컴포넌트(예: 카드, 버튼, 텍스트 필드)의 "카탈로그"를 유지하며, 에이전트는 해당 카탈로그의 컴포넌트만 렌더링하도록 요청할 수 있습니다.
• LLM 친화적 및 점진적 업데이트 가능: UI는 ID 참조가 있는 평면적인 컴포넌트 목록으로 표현되므로 LLM이 점진적으로 생성하기 쉽고, 이를 통해 프로그레시브 렌더링과 반응형 사용자 경험이 가능합니다. 에이전트는 대화가 진행됨에 따라 새로운 사용자 요청에 기반하여 UI를 효율적으로 점진적으로 변경할 수 있습니다.
• 프레임워크 독립적 및 이식성: A2UI는 UI 구조와 UI 구현을 분리합니다. 에이전트는 컴포넌트 트리와 관련 데이터 모델에 대한 설명을 보냅니다. 클라이언트 애플리케이션은 이러한 추상적인 설명을 웹 컴포넌트, Flutter 위젯, React 컴포넌트, SwiftUI 뷰 등 네이티브 위젯으로 매핑할 책임이 있습니다. 에이전트로부터 전송된 동일한 A2UI JSON 페이로드는 서로 다른 프레임워크 기반의 여러 클라이언트에서 동일하게 렌더링될 수 있습니다.
• 유연성: A2UI는 또한 개발자가 서버 측 유형을 네이티브 모바일 위젯에서 React 컴포넌트에 이르기까지 커스텀 클라이언트 구현으로 매핑할 수 있게 해주는 오픈 레지스트리 패턴을 제공합니다. "스마트 래퍼(Smart Wrapper)"를 등록함으로써 기존의 모든 UI 컴포넌트(레거시 콘텐츠를 위한 보안 iframe 컨테이너 포함)를 A2UI의 데이터 바인딩 및 이벤트 시스템에 연결할 수 있습니다. 결정적으로, 이는 개발자의 손에 보안 권한을 부여하여 핵심 시스템에만 의존하는 것이 아니라 커스텀 컴포넌트 로직 내에서 엄격한 샌드박싱 정책과 "신뢰 사다리"를 직접 시행할 수 있게 합니다.

사용 사례

몇 가지 사용 사례는 다음과 같습니다:

• 동적 데이터 수집: 에이전트가 대화의 특정 문맥(예: 특수 예약)에 기반하여 맞춤형 양식(날짜 선택기, 슬라이더, 입력창)을 생성합니다.
• 원격 서브 에이전트: 오케스트레이터 에이전트가 작업을 원격 전문 에이전트(예: 여행 예약 에이전트)에게 위임하고, 해당 에이전트는 메인 채팅창 내부에서 렌더링될 UI 페이로드를 반환합니다.
• 적응형 워크플로우: 사용자의 쿼리에 기반하여 즉석에서 승인 대시보드나 데이터 시각화 화면을 생성하는 기업용 에이전트.

아키텍처

A2UI 흐름은 UI 생성과 UI 실행을 분리합니다:

1. 생성(Generation): 에이전트(Gemini 또는 다른 LLM 사용)가 UI 컴포넌트의 구성과 속성을 설명하는 JSON 페이로드인 A2UI 응답을 생성하거나 사전 생성된 응답을 사용합니다.
2. 전송(Transport): 이 메시지는 클라이언트 애플리케이션(A2A, AG UI 등을 통해)으로 전송됩니다.
3. 해석(Resolution): 클라이언트의 A2UI 렌더러가 JSON을 파싱합니다.
4. 렌더링(Rendering): 렌더러가 추상 컴포넌트(예: type: 'text-field')를 클라이언트 코드베이스의 구체적인 구현으로 매핑합니다.

의존성

A2UI는 가벼운 형식이 되도록 설계되었지만, 더 큰 생태계에 적합합니다:

• 전송(Transports): A2A 프로토콜 및 AG UI와 호환됩니다.
• LLM: JSON 출력을 생성할 수 있는 모든 모델에서 생성 가능합니다.
• 호스트 프레임워크: 지원되는 프레임워크(현재 Web 또는 Flutter)로 구축된 호스트 애플리케이션이 필요합니다.

시작하기

A2UI를 이해하는 가장 좋은 방법은 샘플을 실행해 보는 것입니다.

사전 요구 사항

• Node.js (웹 클라이언트용)
• Python (에이전트 샘플용)
• 샘플을 실행하려면 유효한 Gemini API 키가 필요합니다.

레스토랑 찾기 데모 실행하기

1. 저장소 복제:

   git clone https://github.com/google/A2UI.git
   cd A2UI

2. API 키 설정:

   export GEMINI_API_KEY="your_gemini_api_key"

3. 에이전트(백엔드) 실행:

   cd samples/agent/adk/restaurant_finder
   uv run .

4. 클라이언트(프론트엔드) 실행: 새 터미널 창을 엽니다:

   # Lit 렌더러 설치 및 빌드
   cd renderers/lit
   npm install
   npm run build
   
   # 쉘 클라이언트 설치 및 실행
   cd ../../samples/client/lit/shell
   npm install
   npm run dev

Flutter 개발자는 내부적으로 A2UI를 사용하는 GenUI SDK를 확인해 보세요.

CopilotKit에는 체험해 볼 수 있는 공개 A2UI 위젯 빌더도 있습니다.

로드맵

저희는 커뮤니티와 함께 다음 사항들을 추진하고자 합니다:

• 명세 안정화: v1.0 명세를 향해 나아가고 있습니다.
• 더 많은 렌더러: React, Jetpack Compose, iOS (SwiftUI) 등을 위한 공식 지원 추가.
• 추가 전송 방식: REST 등 추가 지원.
• 추가 에이전트 프레임워크: Genkit, LangGraph 등 추가 지원.

기여하기

A2UI는 Apache 2.0 라이선스 프로젝트입니다. 저희는 UI의 미래가 에이전트 중심적이라고 믿으며, 이를 구축하는 데 여러분과 함께하고 싶습니다.

시작하는 방법에 대한 자세한 내용은 CONTRIBUTING.md를 참조하세요.