저자는 에이전트 기반 인터페이스를 구축하기 위한 신흥 프로토콜인 A2UI를 살펴보며, 개발자들을 위해 그 구현 방식을 설명하고자 한다. A2UI를 통해 AI 에이전트는 임의의 코드 실행 없이도 웹, 모바일, 데스크톱 전반에 걸쳐 대화형 사용자 인터페이스를 동적으로 생성할 수 있어, 원활하고 이식성 높은 사용자 경험을 제공한다. 프레임워크와 달리, A2UI는 대규모 언어 모델(LLM) 에이전트와 클라이언트 애플리케이션 간의 통신을 정의하는 프로토콜로, 개발자가 선호하는 프론트엔드 기술을 사용하여 UI를 렌더링할 수 있게 해줍니다. 핵심 아키텍처는 서버 측 에이전트가 공유 스키마를 기반으로 UI 레이아웃 메시지를 생성하고, 클라이언트 측 애플리케이션이 해당 메시지를 해석하여 렌더링하는 방식으로 구성됩니다.서버(에이전트) 측에서 개발자는 몇 가지 핵심 입력 사항을 제공해야 합니다. 여기에는 사용 가능한 UI 구성 요소 카탈로그(기본 요소부터 JSON 스키마로 정의된 사용자 정의 컴포넌트에 이르기까지), 에이전트가 특정 UI를 언제 어떻게 사용해야 하는지 안내하는 자연어 UI 설명, 그리고 원하는 JSON 메시지 구조를 보여주는 소수의 예시가 포함됩니다. 또한 개발자는 “에이전트 스킬”을 통해 UI 설명을 보강하여 특정 사용자 기능과 사용 사례를 정의할 수 있으며, “액션 매핑”을 통해 이벤트를 에이전트를 위한 새로운 자연어 쿼리로 변환함으로써 사용자 상호작용을 처리할 수 있습니다. 에이전트 도구는 일반적인 에이전트 개념이긴 하지만, 데이터 가져오기나 API와의 상호작용과 같은 작업을 수행하는 데에도 필수적입니다.클라이언트 측, 특히 Angular 애플리케이션의 경우, 기본 템플릿 외에 필요한 주요 요구 사항은 서버 측 카탈로그에 정의된 컴포넌트를 렌더링하도록 애플리케이션을 구성하는 것입니다. 표준 요소만 사용되는 경우 기본 카탈로그로 충분합니다. 그러나 에이전트가 사용자 정의 컴포넌트를 생성하는 경우, 클라이언트 측에서는 해당 Angular 구현체와 이러한 컴포넌트를 등록하기 위해 기본 카탈로그를 확장한 사용자 정의 카탈로그가 필요합니다. 중요한 규칙은 클라이언트의 컴포넌트 정의가 에이전트에 제공된 카탈로그 스키마 및 예제와 완벽하게 일치해야 하며, 이를 통해 동적으로 생성된 UI가 정확하게 렌더링되도록 보장해야 한다는 점입니다.