A2UI: 에이전트 기반 인터페이스를 위한 프로토콜

Source: Hacker News

[Image: A2UI Logo]

에이전트‑구동 인터페이스를 위한 프로토콜

A2UI는 AI 에이전트가 풍부하고 인터랙티브한 사용자 인터페이스를 생성하도록 하며, 이를 웹, 모바일, 데스크톱 전반에 걸쳐 네이티브하게 렌더링합니다—임의 코드를 실행하지 않고도 가능합니다.

Status: Early Stage Public Preview
A2UI는 현재 v0.8 (Public Preview) 단계입니다. 사양과 구현은 기능적으로 동작하지만 아직 진화 중입니다. 협업을 촉진하고 피드백을 수집하며(예: 클라이언트 렌더러에 대한) 기여를 독려하기 위해 프로젝트를 공개합니다. 변경 사항이 있을 수 있습니다.

한눈에 보기

• Version: v0.8
• License: Apache 2.0
• Created by: Google, with contributions from CopilotKit and the open‑source community
• Repository: Active development on GitHub

해결된 문제: AI 에이전트가 신뢰 경계 너머로 안전하게 풍부한 UI를 전달하려면 어떻게 해야 할까?
텍스트‑전용 응답이나 위험한 코드 실행 대신, A2UI는 에이전트가 선언적 컴포넌트 설명을 보내면 클라이언트가 자체 네이티브 위젯을 사용해 렌더링하도록 합니다—범용 UI 언어입니다.

주요 장점

• Secure by Design – 실행 가능한 코드가 아닌 선언적 데이터 형식. 에이전트는 카탈로그에 사전 승인된 컴포넌트만 사용할 수 있어 UI 인젝션 공격을 방지합니다.
• LLM‑Friendly – 평탄하고 스트리밍 가능한 JSON 구조로 설계되어 쉽게 생성할 수 있습니다. LLM은 한 번에 완벽한 JSON을 만들 필요 없이 UI를 점진적으로 구축할 수 있습니다.
• Framework‑Agnostic – 하나의 에이전트 응답이 모든 환경에서 동작합니다. Angular, Flutter, React, 혹은 네이티브 모바일에서도 동일한 UI를 자체 스타일 컴포넌트로 렌더링할 수 있습니다.
• Progressive Rendering – UI가 생성되는 대로 스트리밍 업데이트합니다. 사용자는 전체 응답을 기다리는 대신 실시간으로 인터페이스가 구축되는 모습을 볼 수 있습니다.

5분 안에 시작하기

• Quickstart Guide – 레스토랑 찾기 데모를 실행하고 Gemini‑기반 에이전트와 함께 A2UI를 체험하세요.
• Core Concepts – 서피스, 컴포넌트, 데이터 바인딩, 인접 리스트 모델을 이해합니다.
• Developer Guides – 앱에 A2UI 렌더러를 통합하거나 UI를 생성하는 에이전트를 구축합니다.
• Protocol Reference – 전체 기술 사양 및 메시지 타입을 자세히 살펴봅니다.

작동 원리

1. 사용자가 메시지를 전송합니다 AI 에이전트에게.
2. 에이전트가 UI를 설명하는 A2UI 메시지를 생성합니다(구조 + 데이터).
3. 메시지가 스트리밍되어 클라이언트 애플리케이션으로 전달됩니다.
4. 클라이언트가 네이티브 컴포넌트(Angular, Flutter, React 등)를 사용해 렌더링합니다.
5. 사용자가 UI와 상호작용하면 행동을 에이전트에게 다시 보냅니다.
6. 에이전트가 업데이트된 A2UI 메시지로 응답합니다.

A2UI 실전 예시

조경 설계 데모

에이전트가 조경 설계 애플리케이션 전체 인터페이스를 생성하는 과정을 시청하세요. 사용자가 사진을 업로드하면 에이전트가 Gemini를 이용해 사진을 이해하고 맞춤형 폼을 생성합니다.

Your browser does not support the video tag.

커스텀 컴포넌트: 인터랙티브 차트 & 지도

에이전트가 숫자 요약 질문에 차트 컴포넌트로 답하고, 위치 질문에 Google 지도 컴포넌트로 답하는 모습을 시청하세요. 두 컴포넌트 모두 클라이언트가 제공하는 커스텀 컴포넌트입니다.

Your browser does not support the video tag.

A2UI Composer

CopilotKit이 제공하는 공개 A2UI Widget Builder 를 직접 사용해 보세요.