AI SDK용 보이스 UI 컴포넌트 스위트 — Persona·음성 입력·트랜스크립션·오디오 플레이어

AI SDK의 전사·음성 합성 기능과 통합되는 보이스 에이전트용 컴포넌트 스위트가 출시됐다. Rive WebGL2 기반 시각적 AI Persona, Web Speech API와 MediaRecorder를 브라우저별로 분기하는 음성 입력, 재생 타임스탬프에 동기화되는 트랜스크립션, media-chrome 기반 오디오 플레이어, shadcn/ui 기반 마이크·음성 선택 컴포넌트로 구성된다.

핵심 포인트

Persona 컴포넌트는 Rive WebGL2로 idle·listening·thinking·speaking·asleep 5상태를 애니메이션으로 표현하며, 대화 흐름에 따라 자동 전환된다.
Speech Input은 Chrome/Edge에서 Web Speech API, Firefox/Safari에서 MediaRecorder + 외부 전사 서비스로 자동 폴백한다.
Transcription 컴포넌트는 render props 인터페이스로 재생 타이밍에 텍스트 세그먼트를 하이라이트하고 클릭-투-시크를 지원한다.
AudioPlayer는 media-chrome 기반 컴포저블 아키텍처로 커스텀 컨트롤을 조합할 수 있다.
모든 컴포넌트는 npm AI Elements 패키지로 설치한다.

상세 정리

배경: AI SDK의 전사·음성 합성 API를 UI에서 소비하는 표준 컴포넌트가 없어 각자 구현해야 했다. 이 패키지가 공통 컴포넌트를 제공한다.
Persona: Rive WebGL2 렌더링 AI 아바타. idle → listening → thinking → speaking → asleep 5상태가 대화 단계에 따라 전환된다. 비주얼 변형도 커스터마이징 가능하다.
Speech Input — Web Speech API: Chrome과 Edge에서 브라우저 네이티브 음성 인식을 사용한다.
Speech Input — MediaRecorder 폴백: Web Speech API 미지원 브라우저(Firefox, Safari)에서 MediaRecorder로 오디오를 캡처해 외부 전사 서비스로 전송하는 경로를 자동 선택한다.
Transcription: 오디오 재생 타이밍에 맞춰 텍스트 세그먼트를 하이라이트한다. render props 패턴으로 커스텀 렌더링을 지원하고, 세그먼트 클릭 시 해당 타임스탬프로 시크한다.
AudioPlayer: media-chrome 라이브러리 기반 컴포저블 아키텍처. 커스텀 컨트롤과 메타데이터 표시를 조합해 사용할 수 있다.
MicSelector: shadcn/ui 기반 마이크 선택 컴포넌트. 자동 디바이스 감지, 권한 관리, 동적 업데이트, 기기명 파싱을 처리한다.
VoiceSelector: 성별·억양·연령 메타데이터 필터링을 지원하는 검색 가능한 음성 선택 컴포넌트. 중첩 컴포넌트 간 컨텍스트 기반 상태 관리를 적용했다.

왜 읽나음성 에이전트, 전사 서비스, 자연어 기반 앱을 개발하는 프론트엔드/AI 개발자에게. Web Speech API 브라우저 호환성 처리, Rive 기반 AI 아바타, 재생 타임스탬프 동기화 등 보이스 UI의 핵심 구현 패턴을 컴포넌트 단위로 볼 수 있다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

AI SDK용 보이스 UI 컴포넌트 스위트 — Persona·음성 입력·트랜스크립션·오디오 플레이어

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기