Agents UI는 Shadcn 및 AI Elements를 기반으로 구축된 컴포넌트 라이브러리로, LiveKit의 실시간 플랫폼을 활용하여 "agentic applications"의 생성을 가속화하는 데 중점을 둡니다. 이는 IO 제어, 세션 관리, 트랜스크립트 렌더링, 오디오 스트림 시각화 등을 위한 사전 구축된 컴포넌트들을 제공합니다.

설치 과정은 Shadcn CLI를 통해 이루어집니다. 먼저 npx shadcn@latest init 명령어를 사용하여 Shadcn을 설정한 다음, npx shadcn@latest registry add @agents-ui를 통해 Agents UI 레지스트리를 추가합니다. 이후 npx shadcn@latest add @agents-ui/{component-name} 명령어로 필요한 컴포넌트들을 설치할 수 있습니다. 설치된 컴포넌트들은 프로젝트의 components/agents-ui 디렉토리에 전체 소스 코드와 함께 제공되어 사용자 정의가 가능합니다. Agents UI는 오픈 소스이며, GitHub에서 해당 코드를 확인할 수 있습니다.

LiveKit은 Agents UI 외에도 다양한 프레임워크를 위한 컴포넌트 라이브러리를 제공합니다. 이들은 에이전트 특정적이지는 않지만 실시간 애플리케이션 구축에 유용한 컴포넌트들을 포함합니다. 예를 들어, LiveKit의 플랫폼 프리미티브를 사용하여 실시간 오디오 및 비디오 애플리케이션을 구축하기 위한 저수준 React 컴포넌트 및 Hook, iOS, macOS, visionOS, tvOS 애플리케이션을 위한 SwiftUI 컴포넌트, Material Design이 통합된 Android 애플리케이션을 위한 Jetpack Compose 컴포넌트, 그리고 크로스 플랫폼 모바일 및 데스크톱 애플리케이션을 위한 Flutter 위젯 등이 있습니다.

Agents UI 컴포넌트들은 기능에 따라 여러 카테고리로 분류됩니다. 각 카테고리 페이지에서는 컴포넌트의 기능, 사용 시기, 그리고 라이브 프리뷰를 제공합니다. 주요 카테고리 및 컴포넌트는 다음과 같습니다:

• Media controls: AgentControlBar, AgentTrackControl, AgentTrackToggle, AgentDisconnectButton, StartAudioButton 등을 포함하며, 사용자가 마이크, 카메라, 세션 연결 해제, 브라우저 오디오 재생 등을 제어할 수 있도록 합니다.
• Audio visualizer: AgentAudioVisualizerBar, Grid, Radial, Wave, Aura 등은 오디오 데이터와 에이전트 상태에 기반한 애니메이션 시각화를 통해 음성 에이전트에 시각적 존재감을 부여합니다.
• Chat components: AgentChatTranscript, AgentChatIndicator 등은 실시간 대화 트랜스크립트, 텍스트 메시지 및 타이핑 인디케이터를 표시합니다.