Introducing A2UI: An open project for agent-driven interfaces

https://developers.googleblog.com/introducing-a2ui-an-open-project-for-agent-driven-interfaces/

Introducing A2UI: An open project for agent-driven interfaces- Google Developers Blog

 

생성형 AI는 텍스트, 이미지, 코드 생성에서 뛰어난 성과를 보여주어 왔습니다. 이제는 대화 맥락에 맞는 인터페이스를 생성하는 데 활용될 차례입니다. 오늘 우리는 초기 단계의 포맷과 구현을 다른 사람들과 함께 발전시키기 위해 A2UI 프로젝트를 공개합니다.

 

A2UI는 에이전트가 생성하거나 템플릿 기반으로 반환하는 UI 응답을 상호운용 가능하고 크로스플랫폼으로 처리해야 하는 특정한 과제를 해결하기 위해 설계되었습니다. A2UI를 통해 에이전트는 현재 대화에 가장 적합한 인터페이스를 생성하여 프런트엔드 애플리케이션으로 전달할 수 있습니다.

 

우리는 이미 일부 제품에서 A2UI를 구축해 왔으며, 커뮤니티와의 협업을 통해 A2UI 사양을 정교화하고, 더 많은 전송 방식(transports)을 추가하며, 추가적인 클라이언트 렌더러와 통합 기능을 확장해 나가고자 합니다.

 

A2UI는 업데이트 가능한 에이전트 생성 UI(agent-generated UI)를 표현하는 데 최적화된 포맷과 초기 렌더러 세트를 포함한 오픈소스 프로젝트입니다. 이를 통해 에이전트는 풍부한 사용자 인터페이스를 생성하거나 채워 넣을 수 있으며, 해당 UI는 서로 다른 호스트 애플리케이션에서 표시되고 Lit, Angular, Flutter와 같은 다양한 UI 프레임워크로 렌더링될 수 있습니다(향후 더 많은 프레임워크가 추가될 예정입니다).

 

렌더러는 공통 컴포넌트 집합 및/또는 클라이언트가 명시적으로 제공하는 사용자 정의 컴포넌트 집합을 지원하며, 이들 컴포넌트는 레이아웃으로 조합됩니다. 렌더링에 대한 소유권은 클라이언트에 있으며, 자체 브랜드 UX에 자연스럽게 통합할 수 있습니다. 오케스트레이터 에이전트와 원격 A2A 서브에이전트 모두 UI 레이아웃을 생성할 수 있고, 이는 실행 가능한 코드가 아니라 메시지 형태로 안전하게 전달됩니다.

 

아래는 A2UI로 렌더링된 카드 예시로, A2UI를 통해 구현할 수 있는 다양한 UI 구성 방식을 보여줍니다.

 

문제: 에이전트는 UI로 소통할 필요가 있다

레스토랑 예약을 도와주는 에이전트를 상상해 보자. 텍스트만으로 상호작용할 경우, 다음과 같이 번거로운 대화가 오갈 수 있다.

사용자: (입력) “2명 예약해 주세요.”

에이전트: “알겠습니다. 날짜는 언제인가요?”

사용자: (입력) “내일이요.”

에이전트: “시간은 언제로 하시겠어요?”

사용자: (입력) “아마도 저녁 7시요.”

에이전트: “해당 시간에는 예약이 불가능합니다. 다른 시간은 어떠신가요?”

사용자: (입력) “예약 가능한 시간대가 언제인가요?”

에이전트: “5:00, 5:30, 6:00, 8:30, 9:00, 9:30, 10:00에 예약이 가능합니다. 이 중 괜찮은 시간이 있을까요?”

이러한 방식은 느리고 비효율적일 수 있다. 더 나은 사용자 경험은 에이전트가 날짜 선택기, 시간 선택기, 제출 버튼이 포함된 간단한 폼을 빠르게 생성하거나 활용하는 것이다. A2UI를 사용하면 LLM은 위젯 카탈로그를 기반으로 맞춤형 UI를 조합하여, 현재 작업에 정확히 맞는 그래픽 중심의 아름답고 사용하기 쉬운 인터페이스를 제공할 수 있다.

 

예를 들어, 앞서 살펴본 텍스트 기반의 반복적인 채팅 대신 A2UI를 활용해 이러한 예약 UI를 구성할 수 있습니다. 아래는 레스토랑 예약을 A2UI로 표현한 한 가지 렌더링 예시로, A2UI의 설계 덕분에 프런트엔드 호스트 애플리케이션이 스타일링에 대해 높은 자유도를 가지므로 이 외에도 다양한 표현 방식이 가능합니다.

 

 

도전 과제: 신뢰 경계를 넘는 렌더링

우리는 멀티 에이전트 메쉬(multi-agent mesh)의 시대로 접어들고 있습니다. Google의 에이전트가 Cisco, IBM, SAP, Salesforce의 에이전트와 대화하며 복잡한 작업을 함께 해결합니다. 이것이 바로 우리가 Agent-to-Agent(A2A) 프로토콜을 공동으로 만들고 Linux Foundation에 기증한 이유입니다. 메모리, 도구, 맥락을 공유하지 않더라도 에이전트들이 협업할 수 있도록 하기 위함입니다.

 

하지만 이러한 탈중앙화는 사용자 인터페이스 측면에서 새로운 문제를 만들어냅니다.

 

에이전트가 애플리케이션 내부에 존재한다면, 뷰 레이어(예: DOM)를 직접 조작할 수 있습니다. 그러나 멀티 에이전트 환경에서는 실제 작업을 수행하는 에이전트가 종종 원격에 존재합니다. 백그라운드에서 실행되거나, 다른 서버에 있거나, 혹은 다른 조직이 소유한 경우도 많습니다. 이런 에이전트는 UI를 직접 건드릴 수 없으며, 반드시 메시지를 통해서만 상호작용해야 합니다.

 

역사적으로 신뢰할 수 없는 원격 소스에서 UI를 렌더링하려면 HTML이나 JavaScript를 전송하고 이를 iframe 안에서 샌드박싱하는 방식이 사용되었습니다. 하지만 이 접근법은 무겁고, 시각적으로 분리된 느낌을 주며(대개 애플리케이션의 네이티브 스타일과 잘 어울리지 않음), 보안 경계와 관련된 복잡성을 초래합니다.

 

우리가 필요로 했던 것은 데이터처럼 안전하면서도, 코드처럼 표현력이 풍부한 UI 전달 방식이었습니다.

해결책: 메시지 시퀀스로서의 UI 명세

A2UI는 구조화된 출력(structured output) 형태로 즉시 생성하거나, 템플릿으로 사용한 뒤 값으로 채워 넣을 수 있는 표준 포맷을 제공합니다. 이 응답을 생성하는 에이전트는 원격 A2A 에이전트일 수도 있고, 사용자가 상호작용하고 있는 오케스트레이터일 수도 있습니다.

 

이러한 JSON 페이로드는 A2A, AG UI, 그리고 잠재적으로는 다른 전송 방식들을 통해 클라이언트로 전달될 수 있습니다. 클라이언트 애플리케이션은 자체적인 네이티브 UI 컴포넌트를 사용해 이를 렌더링합니다. 그 결과, 클라이언트는 스타일링과 보안에 대한 완전한 제어권을 유지할 수 있으며, 에이전트의 출력이 항상 애플리케이션에 자연스럽게 녹아든 사용자 경험을 제공하도록 보장할 수 있습니다.

 

https://storage.googleapis.com/gweb-developer-goog-blog-assets/original_videos/landscape-architect-demo.mp4

 

이 예시에서는 사용자가 사진을 업로드하면, 원격 에이전트가 Gemini를 사용해 이를 이해하고 조경 서비스를 이용하는 고객의 구체적인 요구에 맞춘 맞춤형 폼을 생성합니다.

 

https://storage.googleapis.com/gweb-developer-goog-blog-assets/original_videos/a2ui-custom-compnent.mp4

 

또 다른 예시에서는 에이전트가 인터랙티브 차트를 포함한 커스텀 컴포넌트와 Google Maps를 포함한 커스텀 컴포넌트로 응답하기로 결정합니다.

 

핵심 철학: 보안성, 업데이트 가능성, 그리고 분리 설계

A2UI는 몇 가지 핵심 원칙을 중심으로 설계되었습니다.

 

보안을 최우선으로
LLM이 생성한 임의의 코드를 실행하는 것은 중대한 보안 위험을 초래할 수 있습니다. A2UI는 실행 가능한 코드가 아니라 선언적 데이터 포맷(declarative data format)입니다. 클라이언트 애플리케이션은 신뢰할 수 있고 사전에 승인된 UI 컴포넌트(예: Card, Button, TextField)로 구성된 “카탈로그”를 유지하며, 에이전트는 이 카탈로그에 포함된 컴포넌트만 렌더링하도록 요청할 수 있습니다. 이를 통해 UI 인젝션과 기타 취약점의 위험을 줄일 수 있습니다.

 

LLM 친화적이며 점진적 업데이트 가능
UI는 ID 참조를 가진 컴포넌트의 평면 리스트(flat list) 형태로 표현되며, 이는 LLM이 점진적으로 생성하기에 용이합니다. 이를 통해 단계적 렌더링과 반응성 높은 사용자 경험을 제공할 수 있습니다. 대화가 진행됨에 따라 에이전트는 새로운 사용자 요청에 맞추어 UI를 효율적으로 부분 업데이트할 수 있습니다.

 

프레임워크 독립적이며 이식 가능
A2UI는 UI 구조와 UI 구현을 분리합니다. 에이전트는 컴포넌트 트리와 그에 연결된 데이터 모델에 대한 설명을 전송하고, 클라이언트 애플리케이션은 이를 웹 컴포넌트, Flutter 위젯, React 컴포넌트, SwiftUI 뷰 등 각자의 네이티브 위젯으로 매핑하는 역할을 맡습니다. 하나의 A2UI JSON 페이로드는 서로 다른 프레임워크 위에서 구축된 여러 클라이언트에서 동일하게 렌더링될 수 있습니다.

 

 

에이전틱 UI 생태계 이해하기

에이전틱 UI(agentic UI) 영역은 빠르게 진화하고 있으며, 스택의 서로 다른 부분을 해결하기 위한 훌륭한 도구들이 속속 등장하고 있습니다. 우리는 A2UI를 이러한 프레임워크들을 대체하는 존재로 보지 않습니다. 대신, 상호운용 가능하고 크로스플랫폼인 생성형 또는 템플릿 기반 응답이라는 특정 문제를 해결하기 위한 전문화된 프로토콜로 위치짓고 있습니다.

 

적절한 도구, 혹은 도구 조합을 선택하는 데 도움이 되도록, 아래와 같이 생태계를 정리해 보았습니다.

 

1. “호스트(host)” 애플리케이션 UI 구축

사용자가 직접 상호작용하는 풀스택 애플리케이션(호스트 UI)을 구축하는 경우, 실제 UI 구현 외에도 AG UI, Vercel AI SDK, GenUI SDK for Flutter(내부적으로 A2UI를 사용)와 같은 프레임워크를 활용해 상태 동기화, 채팅 기록, 입력 처리와 같은 “파이프”를 관리할 수 있습니다.

 

A2UI의 역할
A2UI는 이러한 프레임워크를 보완하는 역할을 합니다. 예를 들어, 호스트 애플리케이션을 AG UI로 연결한 경우, A2UI를 데이터 포맷으로 사용해 호스트 에이전트뿐 아니라 제3자 또는 원격 에이전트의 응답도 렌더링할 수 있습니다. 이를 통해 풍부하고 상태를 유지하는 호스트 앱과, 직접 제어하지 않는 외부 에이전트의 콘텐츠를 안전하게 렌더링하는 능력을 동시에 얻을 수 있습니다.

• A2UI + A2A: A2A를 통해 클라이언트 프런트엔드로 직접 전송 가능
• A2UI + AG UI: AG UI는 A2UI를 지원하는 애플리케이션을 쉽게 구축하고 배포할 수 있는 스캐폴딩을 제공
• A2UI + REST 및 기타 전송 방식: 이론적으로 가능하지만 아직 제공되지는 않음

2. “리소스(resource)”로서의 UI (MCP 앱)

Model Context Protocol(MCP)은 최근 MCP-UI와 OpenAI의 작업을 통합해, 서버가 인터랙티브 인터페이스를 제공할 수 있도록 하는 새로운 표준인 MCP Apps를 도입했습니다. 이 접근 방식은 UI를 ui:// URI로 접근하는 리소스로 취급하며, 일반적으로 사전에 제작된 HTML 콘텐츠를 샌드박스된 iframe 안에서 렌더링해 격리와 보안을 보장합니다.

 

A2UI의 차별점
A2UI는 MCP Apps의 리소스 페치(resource-fetching) 모델과 달리 “네이티브 우선(native-first)” 접근 방식을 취합니다. 샌드박스에 표시할 불투명한 페이로드를 가져오는 대신, A2UI 에이전트는 네이티브 컴포넌트에 대한 설계도(blueprint)를 전송합니다. 이를 통해 UI는 호스트 애플리케이션의 스타일과 접근성 기능을 자연스럽게 상속할 수 있습니다. 또한 멀티 에이전트 시스템에서 오케스트레이터 에이전트는 서브에이전트가 보낸 가벼운 A2UI 메시지 내용을 쉽게 이해할 수 있어, 에이전트 간 협업이 한층 유연해집니다.

 

3. 플랫폼 특화 생태계 (OpenAI ChatKit)

ChatKit과 같은 도구는 OpenAI 생태계 내에서 에이전트를 배포하기 위한 고도로 통합되고 최적화된 경험을 제공합니다.

A2UI의 차별점
A2UI는 웹, Flutter, 네이티브 모바일 전반에 걸쳐 자체적인 에이전틱 인터페이스를 구축하려는 개발자나, 에이전트들이 신뢰 경계를 넘어 소통해야 하는 엔터프라이즈 메쉬(예: A2A)를 위해 설계되었습니다. A2UI는 에이전트의 자유도를 일부 제한하는 대신, 클라이언트가 스타일링에 대해 더 많은 제어권을 가지도록 하여, 호스트 애플리케이션과의 시각적 일관성을 극대화합니다.

 

현실 세계를 위해 설계됨

A2UI는 시작부터 실제 문제를 해결하기 위해, Google 내부와 외부의 여러 팀과 협력하여 개발되어 왔습니다. 핵심 협력자들의 지원과 함께 구축해 나가게 되어 매우 기쁩니다.

 

AG UI / CopilotKit: 강력한 시너지

우리는 협력적 생태계를 지향합니다. AG UI / CopilotKit 팀은 초기 단계부터 긴밀히 협업하여 출시 첫날(day-zero)부터의 호환성을 보장했고, 개발자들에게 “함께 사용할 때 더 강력한(better together)” 경험을 제공합니다.

“Agent-User Interaction Protocol(AG-UI)은 에이전틱 백엔드와 에이전틱 프런트엔드를 연결합니다. 이는 풍부한 풀스택 에이전틱 애플리케이션을 구축하기 위한 실용적인 구성 요소를 개발자에게 제공합니다. AG-UI는 에이전트가 동적으로 생성하는 풍부한 선언적 생성형 UI를 위한 A2UI 사양을 완전히 지원합니다. 또한 A2A 프로토콜과의 완전한 핸드셰이크를 구현하여, 어떤 A2A 시스템과도 매끄럽고 완전한 통합을 가능하게 합니다. AG-UI와 A2UI 간의 day-0 호환성을 제공하게 되어 매우 기쁩니다.”
— Atai Barkai, CopilotKit 및 AG UI 창립자

 

Opal: 실험적인 AI 미니 앱을 구동하다

Opal은 수십만 명의 사용자가 자연어를 통해 AI 미니 앱을 만들고, 편집하고, 공유할 수 있도록 합니다. Google의 Opal 팀은 A2UI의 핵심 기여자 중 하나입니다. 이 팀은 A2UI를 함께 구축하는 것뿐만 아니라, 이를 활용해 핵심 앱 제작 흐름에 빠르게 프로토타이핑하고 통합해 왔습니다. Opal에서의 A2UI는 누구나 각 사용 사례에 맞는 동적 생성형 UI를 갖춘 AI 미니 앱을 만들 수 있게 해줄 것입니다. 앞으로 몇 주 안에 Opal에서 실제로 동작하는 A2UI를 직접 보고 경험할 수 있을 예정입니다.

“A2UI는 우리 작업의 기반입니다. 고정된 프런트엔드에 제약받지 않고, AI가 새로운 방식으로 사용자 경험을 주도할 수 있는 유연성을 제공합니다. 선언적 특성과 보안 중심 설계 덕분에 빠르고 안전하게 실험할 수 있습니다.”
— Dimitri Glazkov, Opal 팀 수석 엔지니어

 

Gemini Enterprise: 엔터프라이즈 에이전트를 위한 맞춤형 UI

Gemini Enterprise는 기업이 강력하고 맞춤화된 AI 에이전트를 구축할 수 있도록 지원합니다. A2UI는 이러한 엔터프라이즈 에이전트가 호스트 애플리케이션 내에서 풍부하고 인터랙티브한 UI를 렌더링할 수 있도록 통합되고 있습니다.

“우리 고객들은 에이전트가 단순히 질문에 답하는 것을 넘어, 복잡한 업무 흐름 전반을 직원들에게 안내해 주기를 원합니다. A2UI는 Gemini Enterprise 위에서 개발하는 개발자들이 데이터 입력 폼부터 승인 대시보드에 이르기까지, 어떤 작업에도 필요한 동적 맞춤형 UI를 에이전트가 생성하도록 해줍니다. 이는 워크플로 자동화를 획기적으로 가속화할 것입니다.”
— Fred Jabbour, Gemini Enterprise 프로덕트 매니저

 

Flutter: 멀티플랫폼 생성형 UI 앱 경험

Flutter와 그 GenUI SDK는 Gemini(또는 다른 LLM)를 활용해 동적이고 개인화된 UI를 생성함으로써, GenAI 및 에이전트 기반 사용자 경험의 사용성과 만족도를 크게 향상시켜 줍니다. 이러한 생성형 UI는 기존 브랜드 가이드라인을 준수하고, 자체 위젯 카탈로그를 활용합니다. A2UI는 원격 서버 측 에이전트와 앱 사이에서 UI 선언 포맷으로 GenUI SDK에 사용됩니다.

“개발자들이 Flutter를 선택하는 이유는 모든 플랫폼에서 뛰어난 경험을 제공하는, 표현력 높고 브랜드가 살아 있는 맞춤 디자인 시스템을 빠르게 만들 수 있기 때문입니다. A2UI는 Flutter의 GenUI SDK에 매우 잘 맞았는데, 이는 모든 사용자와 모든 플랫폼에서 고품질의 네이티브 감각을 보장하기 때문입니다.”
— Vijay Menon, Dart 엔지니어링 디렉터

 

AI Powered Google: 에이전틱 UI의 표준화

Google 전반에 걸쳐 AI가 도입되면서, A2UI는 AI 에이전트들이 텍스트뿐만 아니라 사용자 인터페이스 자체를 교환할 수 있는 표준화된 방식을 제공합니다. 이러한 상호운용성은 어떤 프런트엔드에서도 렌더링을 가능하게 하고, 하나의 화면에 여러 에이전트가 관여하거나 하나의 에이전트가 여러 화면을 넘나드는 워크플로를 지원하며, 내부에서 구축된 에이전트를 Gemini Enterprise와 같은 외부 환경으로 쉽게 노출할 수 있게 합니다.

“A2A가 플랫폼에 상관없이 에이전트 간의 대화를 가능하게 하듯, A2UI는 사용자 인터페이스 레이어를 표준화하고 오케스트레이터를 통한 원격 에이전트 사용 사례를 지원합니다. 이는 내부 팀들에게 매우 강력한 도구가 되었으며, 풍부한 사용자 인터페이스가 예외가 아닌 기본값인 에이전트를 빠르게 개발할 수 있게 해주었습니다. Google이 생성형 UI를 더욱 확장해 나가는 가운데, A2UI는 어떤 클라이언트에서도 렌더링되는 서버 주도형 UI를 위한 완벽한 플랫폼을 제공합니다.”
— James Wren, AI Powered Google 시니어 스태프 엔지니어

 

시작하기: A2UI 직접 사용해 보기

A2UI를 이해하는 가장 좋은 방법은 직접 동작하는 모습을 보는 것입니다.

 

먼저 a2ui.org에 접속해 퀵스타트 가이드와 문서를 읽어보세요.
그다음 samples 폴더로 이동해 클라이언트 UI와 몇 가지 백그라운드 샘플 에이전트를 실행해 볼 수 있습니다. 예를 들어 레스토랑 파인더(restaurant finder)가 있습니다.

 

아래는 레스토랑 파인더를 실행하는 방법입니다.

 

git clone https://github.com/google/A2UI.git
export GEMINI_API_KEY="your_gemini_api_key"

# 레스토랑 파인더 A2A 에이전트 실행
cd A2UI/samples/agent/adk/restaurant_finder
uv run .

# A2UI Lit 렌더러 라이브러리를 사용하는 Lit 클라이언트 실행
cd A2UI/samples/client/lit/shell
npm install
npm run dev

 

또 다른 방법으로는 Flutter용 GenUI SDK를 통해 A2UI를 직접 경험해 볼 수 있습니다.

 

Flutter용 GenUI SDK는 원격 또는 서버 사이드 에이전트와 통신할 때 내부적으로 A2UI를 사용합니다. 시작하기도 매우 간단하며,
https://docs.flutter.dev/ai/genui 를 방문하거나 Getting started with GenUI 영상을 참고하면 됩니다. 또한 GitHub의 GenUI SDK 저장소에는 A2UI를 사용하는 클라이언트-서버 샘플도 포함되어 있습니다.

 

아울러 CopilotKit에서는 공개된 A2UI Widget Builder도 제공하고 있으니, 이를 통해서도 A2UI를 직접 시험해 볼 수 있습니다.

 

지원되는 통합(Supported integrations)

아래는 현재 이 프로젝트에서 제공하고 있는 주요 통합과, 향후 지원되기를 기대하는 몇 가지 통합 예시입니다. 이러한 영역 전반에 걸쳐 커뮤니티의 기여를 환영합니다.

미래는 열려 있습니다: 함께하세요!

오늘은 A2UI의 첫 공개 마일스톤을 의미합니다. 현재 포맷은 v0.8 단계에 있는데, 이는 초기 사용 사례를 위해 여러 차례의 실전 검증과 테스트를 거쳤기 때문이며, 앞으로도 더 많은 발전과 발견의 여지가 남아 있습니다. 현재는 Flutter, Web Components, Angular를 위한 초기이지만 실제로 동작하는 클라이언트 라이브러리를 제공하고 있습니다.

 

프로젝트가 이제 공개된 만큼, 우리는 생태계와 함께 다음과 같은 작업을 해 나가기를 기대하고 있습니다.

• 포맷을 정교화하고 지속적으로 발전시키기
• A2UI를 여러분이 선호하는 클라이언트 라이브러리와 연결하기
• 더 견고하고 유용한 도구들을 구축하기
• 개발자 온보딩에 기여하고 다양한 샘플을 제공하기

A2UI는 Apache 2 라이선스로 제공되는 프로젝트이며, 그 성공은 커뮤니티에 달려 있다고 믿습니다. 코드를 살펴보고, 데모를 직접 실행해 보며, 무엇보다도 적극적으로 기여해 주시기를 초대합니다. 선호하는 UI 프레임워크를 위한 클라이언트를 만들고 싶거나, 에이전트 구축 라이브러리에 지원을 추가하고 싶거나, 멋진 데모를 만들고 싶다면 언제든 환영입니다. 여러분의 아이디어를 듣고 함께 협업하고 싶습니다.

 

공개된 로드맵을 확인해 프로젝트의 향후 방향을 살펴보고, 참여할 수 있는 방법을 찾아보세요.
에이전틱 사용자 경험의 미래를 함께 만들어 갑시다.