Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
A2UI는 에이전트가 풍부하고 상호작용적인 사용자 인터페이스(UI)를 생성할 수 있도록 돕는 오픈 소스 프레임워크입니다. 에이전트는 의도를 설명하는 선언적 JSON 포맷을 전송하며, 클라이언트 애플리케이션이 이를 네이티브 컴포넌트로 렌더링합니다. 이 방식을 통해 에이전트가 생성한 UI는 데이터처럼 안전하면서도 코드처럼 높은 표현력을 갖도록 보장됩니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub AI Tools의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기A2UI는 업데이트 가능한 에이전트 생성 UI를 표현하기에 최적화된 포맷과 초기 렌더러 세트를 갖춘 오픈 소스(open-source) 생성형 UI 프레임워크(generative UI framework)로, 에이전트가 풍부한 사용자 인터페이스(user interfaces)를 생성하거나 채우는 것을 가능하게 합니다.
<img src="https://raw.githubusercontent.com/a2ui-project/a2ui/HEAD/docs/public/assets/a2ui_gallery_examples.png" alt="A2UI 컴포넌트 갤러리" height="400">A2UI이 구현할 수 있는 다양한 UI 구성을 보여주는 A2UI 렌더링 카드 갤러리.
생성형 AI(Generative AI)는 텍스트와 코드를 생성하는 데 탁월하지만, 특히 해당 에이전트가 원격으로 실행되거나 신뢰 경계(trust boundaries)를 넘나드는 경우 사용자에게 풍부하고 상호작용적인 인터페이스를 제시하는 데 어려움을 겪을 수 있습니다.
A2UI는 에이전트가 'UI를 말할' 수 있도록 하는 오픈 표준이자 라이브러리 세트입니다. 에이전트는 UI의 _의도(intent)_를 설명하는 선언적 JSON 포맷(declarative JSON format)을 전송합니다. 그러면 클라이언트 애플리케이션이 자체 네이티브 컴포넌트 라이브러리(Flutter, Angular, Lit 등)를 사용하여 이를 렌더링합니다.
이 접근 방식은 에이전트가 생성한 UI가 데이터처럼 안전하면서도 코드처럼 표현력이 뛰어나게 보장합니다.
a2ui_flutter와 함께 Flutter에서 A2UI를 사용하는 방법: flutter pub add a2ui_flutter a2ui_core. 이는 기존의 genui 패키지를 대체합니다.프레임워크에 맞는 렌더러를 설치하세요. 예를 들어 npm install @a2ui/react (또는 @a2ui/angular, @a2ui/lit)을 사용합니다. 이는 @a2ui/web_core에 의존하며, 앱이 이 모듈에서 직접 가져오는 경우(예: 메시지 프로세서 또는 기본 카탈로그)에는 @a2ui/web_core를 명시적으로 추가해야 합니다. 각 플랫폼별 자세한 내용은 Client Setup guide를 참조하세요.
A2UI는 에이전트가 생성하는 상호 운용성(interoperable), 크로스 플랫폼(cross-platform), 생성형 또는 템플릿 기반의 사용자 인터페이스(UI) 응답에서 발생하는 특정 과제를 해결하기 위해 설계되었습니다.
프로젝트의 핵심 철학:
“Smart Wrapper”를 등록함으로써, 레거시 콘텐츠를 위한 보안 iframe 컨테이너를 포함하여 기존의 모든 UI 컴포넌트를 A2UI의 데이터 바인딩 및 이벤트 시스템에 연결할 수 있습니다. 결정적으로, 이는 보안을 개발자의 손에 확고히 맡기며, 핵심 시스템에만 의존하는 대신 사용자 정의 컴포넌트 로직 내에서 엄격한 샌드박싱 정책과 "신뢰 사다리(trust ladders)"를 직접 적용할 수 있게 합니다.
사용 사례에는 다음이 포함됩니다:
A2UI 플로우는 UI 생성과 UI 실행을 분리합니다:
A2UI Response를 생성하거나 사용합니다.type: 'text-field')를 클라이언트 코드베이스의 구체적인 구현에 매핑합니다.A2UI는 경량 형식으로 설계되었지만, 더 큰 생태계에 통합됩니다:
시작하려는 경로를 선택하세요:
| 경로 | 내용물 |
|---|---|
| 🍜 Quickstart Restaurant Finder Demo | Gemini 기반 ADK 에이전트와 Lit renderer가 로컬에서 실행되는 풀스택 A2UI를 얻게 됩니다. A2UI의 엔드투엔드를 학습하고 사용 사례에 맞게 사용자 정의할 수 있습니다. |
| ... |
필수 조건: Node.js 18+(Corepack이 활성화된 상태), uv, 그리고 Gemini API 키.
git clone https://github.com/a2ui-project/a2ui.git
cd a2ui
export GEMINI_API_KEY="your_gemini_api_key"
...
[!TIP]
macOS Homebrew 사용자: 이전에 독립형 패키지 관리자를 설치했다면, Corepack이 프로젝트별로 버전을 관리할 수 있도록 Corepack을 설치하기 전에 충돌하는 링크를 해제하세요:
brew unlink yarn pnpm
brew install corepack
corepack enable
위 명령어들은 워크스페이스 전반에 걸쳐 의존성을 설치하고, 렌더러를 빌드하며, Python 에이전트를 시작하고, `http://localhost:5173`에서 클라이언트를 열어줍니다. 단계별 지침, 대체 데모 및 문제 해결 방법은 **[전체 Quickstart](docs/public/quickstart.md)**를 참고하세요.
### 모든 에이전트 프레임워크 및 하네스에 A2UI 사용 — 요약
```bash
npx create-ag-ui-app@latest
사용하려는 프레임워크 또는 래퍼(harness)에 AG-UI CLI를 사용하십시오 (Google Chat, ADK, LangGraph, CrewAI, Mastra, Strands, Slack, Teams 등). 그런 다음 **AG-UI 가이드**를 따라 A2UI 렌더링을 활성화하십시오. 일부 스캐폴딩 경로는 내부적으로 Next.js와 CopilotKit의 A2UI 런타임을 사용하지만, 설정 표면(setup surface)은 AG-UI를 우선합니다.
Flutter의 경우, 내부적으로 A2UI를 사용하는 GenUI SDK를 확인하십시오. 모든 클라이언트 구현 목록은 docs/public/reference/renderers.md에서 확인할 수 있습니다.
이 패키지들은 이 저장소(repository)에서 개발되었습니다. '아직 게시되지 않음(Not published yet)'으로 표시된 패키지는 소스 코드로부터 사용할 수 있습니다.
| 패키지 | 설명 | 버전 |
|---|---|---|
| @a2ui/web_core | 웹 렌더러들이 공유하는 프로토콜 메시지, 상태 관리 및 카탈로그. |  |
| ... |
Swift 라이브러리는 이 저장소의 루트에 있는 Package.swift를 통해 빌드됩니다.
| 패키지 | 설명 | 버전 |
|---|---|---|
| A2UISwiftCore, BasicCatalog | 메시지 프로세서, 데이터 모델 및 기본 카탈로그 정의. | 아직 게시되지 않음 |
| A2UISwiftUI, BasicCatalogSwiftUI | SwiftUI 렌더러 및 기본 카탈로그 뷰. | 아직 게시되지 않음 |
우리는 커뮤니티와 다음 사항에 대해 협력하기를 기대합니다:
A2UI는 Apache 2.0 라이선스가 적용된 프로젝트입니다. 우리는 UI의 미래가 에이전트 기반(agentic)이라고 믿으며, 이를 구축하는 데 여러분과 함께 일하기를 원합니다.
시작 방법에 대한 자세한 내용은 CONTRIBUTING.md를 참조하십시오.
