Google, A2UI와 CopilotKit으로 생성형 UI 앱 구축 가능해져

배경으로, 기존 에이전트는 여행 일정 제안 같은 내용을 긴 글로만 돌려줄 뿐, 선택 목록이나 지도, 날짜 선택기를 대화 안에 표시할 표준 수단이 없었다. Generative UI는 요청에 따라 에이전트가 실행 시점에 인터페이스를 조립하는 계층으로, UI를 기술하는 방법과 에이전트를 앱에 연결해 렌더링하는 스택이라는 두 가지가 필요하다. A2UI(Agent-to-UI)는 프레임워크에 종속되지 않는 오픈 스탠더드로, 에이전트가 UI를 데이터로 기술하면 앱 측이 기존 컴포넌트로 렌더링한다. 사전 정의된 컴포넌트에서 고르는 방식부터 HTML이나 JavaScript를 자유롭게 생성하는 방식까지 폭넓게 다룰 수 있지만, 선언형이 가장 일반적인 것으로 알려져 있다. 실행 코드가 아니라 선언적인 데이터 형식이며, 클라이언트가 신뢰하지 않는 카탈로그 밖의 요소는 화면에 나오기 전에 검출된다. 작은 JSON 메시지를 ID로 서로 참조하는 구조이므로 스트리밍으로 단계적으로 렌더링할 수 있다. React, Lit, Angular, SwiftUI, Jetpack Compose, Flutter에 더해 Vue나 터미널용 커뮤니티 렌더러도 있다. Basic Catalog는 레이아웃, 표시, 입력, 컨테이너에 걸친 18개의 범용 프리미티브를 갖추고 있으나, 실서비스 앱에서는 독자적인 카탈로그를 정의하는 것이 일반적이라고 설명하고 있다. CopilotKit은 AG-UI(Agent-User Interaction Protocol) 위에 구축되어 있으며 A2UI 페이로드에 대응한다. LangChain, AWS Strands, Google ADK, Mastra 등 AG-UI 호환 프레임워크라면 설정은 동일하다. ADK 예시에서는 ag_ui_adk 패키지로 에이전트를 FastAPI 위의 AG-UI 엔드포인트로 공개한다. 클라이언트 측에서는 zod 스키마로 정의한 컴포넌트와 렌더러를 연결하고, createCatalog로 카탈로그를 만들어 CopilotKit 프로바이더에 전달한다. 컴포넌트의 설명문은 에이전트의 프롬프트에 들어가며, 모델이 사용 시점을 판단한다. 설정은 서버에서 미리 할 수도 있고, 클라이언트가 요청과 함께 동적으로 보낼 수도 있다. A2UI의 서피스는 양방향이며 컴포넌트는 리액티브하다. 날짜 선택, 항공편 선택, 탑승자 정보 입력 같은 조작이 같은 스트림을 통해 에이전트에게 돌아가고, 에이전트는 그 값을 바탕으로 서피스를 다시 출력한다. 입력을 데이터 경로에 바인딩하고, 버튼 액션으로 되돌려 보낼 경로를 지정하는 구조이며, 검증은 클라이언트 측에서 이루어지므로 잘못된 이메일 주소는 모델을 호출하지 않고 오류로 표시할 수 있다. AG-UI 위에서 실행하는 장점으로는 서버 측의 최소한의 설정, 전용 서브 에이전트에서의 생성, 잘못된 출력의 자가 복구, 재시도 횟수를 모두 소진했을 때의 온건한 실패 처리가 꼽힌다. 시작하려면 npx copilotkit@latest create --name my-app --framework a2ui 명령으로 스타터를 만들 수 있으며, CopilotKit Dojo에는 실행 가능한 데모도 있다.

Google Developers Blog 발췌