ElevenLabs UI 소개: 웹을 위한 오픈소스 오디오 & 에이전트 컴포넌트

ElevenLabs UI는 ElevenLabs Agents와 오디오 SDK로 인터페이스를 구축할 수 있는 맞춤형 React 컴포넌트 오픈소스 라이브러리입니다.

shadcn/ui 기반으로 제작되어, 파형, 오브, 메시지 등 다양한 UI 프리미티브를 자유롭게 제어할 수 있습니다.

예시

transcriber-01 - 웹 앱 어디에나 바로 적용할 수 있는 오픈소스 음성 받아쓰기 컴포넌트:

voice-chat-03 - 상태 관리가 내장된 풍부한 멀티모달 채팅 인터페이스입니다. ElevenLabs Agent ID를 prop으로 전달해 바로 사용할 수 있습니다:

시작하기

컴포넌트는 @elevenlabs/agents-cli 명령어로 사용할 수 있습니다.

pnpm dlx @elevenlabs/agents-cli@latest components add <component>

예를 들어, Orb 컴포넌트를 설치하려면 다음과 같이 실행하세요:

pnpm dlx @elevenlabs/agents-cli@latest components add orb

문서 보기를 참고해 더 빠르게 에이전트 & 오디오 인터페이스를 만들어보세요.