OpenAI Realtime API 기반 음성 제어 React 컴포넌트

OpenAI가 Realtime API 위에서 동작하는 React/브라우저용 음성 제어 컴포넌트를 공개했다.

음성으로 폼 입력이나 앱 동작을 지시할 수 있고, 어시스턴트는 앱이 허용한 동작만 수행하도록 제한되는 tool-constrained UI 패턴을 제공한다.

핵심 구조는 다음과 같다.

• 컨트롤러 하나가 세션 연결, 오디오 처리, 도구 실행, 트랜스크립트 조립을 일괄 관리한다.
• 개발자는 WebRTC나 Realtime 프로토콜을 직접 다루지 않아도 된다.
• 기존 앱 통합 시 앱이 단일 상태 원본(source of truth) 을 유지하고, 음성 레이어는 제한된 앱 핸들러만 호출한다.

이 패키지는 범용 오케스트레이션 프레임워크가 아니라 브라우저 UI 플로우 특화 도구이며, 비-React 런타임이나 에이전트 오케스트레이션이 필요하면 Raw Realtime 또는 openai-agents-js 사용을 권장한다.

통합 가이드도 함께 제공된다.

• /session 엔드포인트 프록시
• voice adapter 래퍼 생성
• 도구 등록
• 컨트롤러 호이스팅
• 위젯 마운트

기본 설정은 server_vad이며, tool-only 세션에서는 interruptResponse: false로 설정해 진행 중인 도구 호출이 새 음성 입력으로 취소되지 않게 한다.

데모 앱에서는 테마 전환, 멀티스텝 폼, 공유 상태 체스 플로우, wake-word 실험 등 다양한 시나리오를 확인할 수 있고, 라이선스는 Apache-2.0이다.