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

> Clean Markdown view of GeekNews topic #28995. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=28995](https://news.hada.io/topic?id=28995)
- GeekNews Markdown: [https://news.hada.io/topic/28995.md](https://news.hada.io/topic/28995.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-04-29T09:31:01+09:00
- Updated: 2026-04-29T09:31:01+09:00
- Original source: [github.com/openai](https://github.com/openai/realtime-voice-component/)
- Points: 3
- Comments: 1

## Topic Body

- Realtime API위에 구축된 **React/브라우저용 음성 제어 컴포넌트**  
- 음성으로 폼 입력부터 다양한 동작을 지시하고, 이에 반응하는 위젯을 구현 가능  
- 어시스턴트가 **앱이 허용한 동작만 수행**하도록 제한하는 **tool-constrained UI** 패턴 제공  
- 세션 연결·오디오 처리·도구 실행·트랜스크립트 조립을 **컨트롤러 하나가 일괄 관리**하므로, 개발자가 WebRTC나 Realtime 프로토콜을 직접 다룰 필요 없음  
- 기존 앱에 붙일 때 앱이 **상태의 유일한 소스(source of truth)** 를 유지하고, 음성 레이어는 제한된 앱 핸들러를 호출만 하는 구조  
- 범용 오케스트레이션 프레임워크가 아닌 **브라우저 UI 플로우에 특화**된 opinionated 패키지이며, 비-React 런타임이나 에이전트 오케스트레이션이 필요하면 Raw Realtime 또는 `openai-agents-js` 사용 권장  
- 기존 앱 통합 시 `/session` 엔드포인트 프록시 → voice adapter 래퍼 생성 → 도구 등록 → 컨트롤러 호이스팅 → 위젯 마운트의 **9단계 가이드** 제공  
- 컨트롤러는 기본적으로 **`server_vad`** 사용하며, tool-only 세션에서는 `interruptResponse: false`로 진행 중인 도구 호출이 새 음성에 의해 취소되지 않도록 설정  
- 데모 앱에서 테마 전환, 멀티스텝 폼, **공유 상태 체스 플로우**, wake-word 실험 등 다양한 통합 시나리오 확인 가능  
- Apache-2.0 라이선스

## Comments



### Comment 56523

- Author: xguru
- Created: 2026-04-29T09:32:02+09:00
- Points: 1

사용 영상은 https://x.com/OpenAIDevs/status/2048871260512473385 에서 보실 수 있습니다  
꽤 빠르게 잘 동작하네요. API 비용이 부담스러워서 용도는 제한적이겠지만요..  
이런게 로컬 모델에서 구현 가능해지면 쓸만하겠어요.