Google + CopilotKit

AI 에이전트가
안전하게 UI 생성

A2UI는 AI 에이전트가 임의의 코드를 실행하지 않고도 여러 플랫폼에서 풍부한 대화형 인터페이스를 안전하게 렌더링할 수 있는 오픈 선언적 UI 프로토콜입니다.

시작하기 문서

v0.8

현재 버전

Apache 2.0

오픈 소스

프레임워크

a2ui-response.json

보안 선언적

스트리밍 렌더

크로스 플랫폼

핵심 기능

네 가지 핵심 기능

AI 시대의 UI 상호작용을 위해 구축되어, 신뢰 경계를 넘어 안전한 렌더링 문제를 해결합니다

보안 우선

설계에 의한 보안

실행 가능한 코드가 아닌 선언적 데이터 형식을 사용합니다. 에이전트는 사전 승인된 컴포넌트만 사용할 수 있어, 아키텍처 수준에서 UI 인젝션 공격 위험을 제거합니다.

더 알아보기

LLM 친화적

LLM 친화적 형식

LLM의 토큰별 생성에 최적화된 플랫 JSON 구조. 인접 리스트 모델은 효율적인 파싱과 증분 업데이트를 지원합니다.

더 알아보기

프레임워크 독립적

동일한 A2UI 응답을 React, Angular, Flutter 또는 네이티브 모바일 플랫폼에서 각 플랫폼의 네이티브 컴포넌트를 사용하여 렌더링할 수 있습니다.

더 알아보기

점진적 렌더링

스트리밍 UI 업데이트를 지원하여, 사용자는 인터페이스가 실시간으로 점진적으로 구축되는 것을 볼 수 있습니다. 즉각적인 응답, 자연스러운 경험.

더 알아보기

작동 방식

A2UI는 선언적 프로토콜을 통해 AI 에이전트와 클라이언트 간의 안전한 통신을 가능하게 합니다

STEP 01

사용자 메시지 전송

사용자가 AI 에이전트에게 요청을 보냅니다. 예: "근처 레스토랑 찾기"

STEP 02

에이전트가 A2UI 생성

AI 에이전트가 UI를 설명하는 A2UI 메시지를 생성합니다 (JSON 형식 컴포넌트 트리)

STEP 03

스트리밍

메시지가 클라이언트로 스트리밍되어, 생성 중 렌더링을 지원합니다

STEP 04

로컬 렌더링

클라이언트가 네이티브 컴포넌트(React/Flutter/Angular)를 사용하여 UI를 렌더링합니다

STEP 05

사용자 상호작용

사용자가 UI와 상호작용하고, 이벤트가 에이전트로 다시 전송됩니다

STEP 06

응답 업데이트

에이전트가 새로운 A2UI 메시지로 응답하고, UI가 동적으로 업데이트됩니다

아키텍처 개요

사용자

요청

AI 에이전트(Gemini, GPT...)

A2UI JSON

클라이언트(React, Flutter...)

렌더

네이티브 UI

라이브 데모 · 설치 불필요

체험하기 A2UI Composer

시각적 도구로 브라우저에서 직접 A2UI 인터페이스를 구축하고 테스트하세요,
드래그 앤 드롭 컴포넌트, 라이브 미리보기, 원클릭 JSON 내보내기

데모 열기

비주얼 빌더

드래그 앤 드롭으로 빠르게 UI 구축, WYSIWYG

라이브 미리보기

즉시 렌더링 미리보기, 밀리초 응답

JSON 내보내기

원클릭으로 표준 A2UI 형식으로 내보내기

A2UI Composer

클릭하여 열기 →

전체 화면 데모를 클릭하세요

코드 예제

하나의 A2UI 응답, 여러 플랫폼에서 네이티브 렌더링

1{
2  "type": "surface",
3  "surface_id": "main_content",
4  "components": [
5    {
6      "id": "card_1",
7      "type": "card",
8      "props": {
9        "title": "Italian Restaurant",
10        "subtitle": "0.5 km away",
11        "image": "https://..."
12      },
13      "children": ["rating_1", "btn_1"]
14    },
15    {
16      "id": "rating_1",
17      "type": "rating",
18      "props": { "value": 4.5, "count": 128 }
19    },
20    {
21      "id": "btn_1",
22      "type": "button",
23      "props": {
24        "label": "View Details",
25        "action": "view_restaurant"
26      }
27    }
28  ]
29}