livekit-examples/agent-starter-react

해결하는 문제

이 프로젝트는 개발자가 음성 기반 AI 에이전트를 빠르게 구축할 수 있도록 즉시 사용 가능한 프론트엔드 템플릿을 제공합니다. 실시간 상호작용, 오디오 시각화, 미디어 스트리밍을 위한 사전 구축된 UI 컴포넌트를 제공하여 음성 인터페이스를 처음부터 구축할 필요가 없습니다.

작동 방식

Next.js와 LiveKit JavaScript SDK로 구축된 이 템플릿은 웹 프론트엔드를 LiveKit Agent에 연결합니다. 오디오 트랙 관리, 채팅 기록 표시, 오디오 시각화 렌더링과 같은 음성 세션의 복잡한 부분을 처리하기 위해 특수 UI 컴포넌트 세트(Agents UI)를 사용합니다. 개발자는 인증을 위한 토큰 서버를 통해 앱을 기본 LiveKit 에이전트나 자체 커스텀 에이전트에 연결할 수 있습니다.

대상 사용자

기본 UI 및 세션 관리 로직에 시간을 들이지 않고 실시간 음성, 비디오, 아바타 기능을 웹 애플리케이션에 통합하려는 프론트엔드 개발자 및 AI 엔지니어.

주요 특징

• 실시간 음성 상호작용: LiveKit Agents와 직접 통합되어 저지연 음성 AI 구현.
• 사용자 정의 가능한 시각화: 바, 그리드, 방사형, 웨이브, 오라 등 5가지 오디오 시각화 스타일 제공.
• 미디어 지원: 카메라 비디오 스트리밍 및 화면 공유 내장 지원.
• 가상 아바타: AI 기반 가상 아바타 표시를 위한 통합 기능.
• 테마: 시스템 설정 감지를 포함한 라이트 및 다크 모드 지원.