Next.js 애플리케이션에 vox.ai 음성 에이전트를 연동하는 방법
app/components
디렉토리를 생성하고 VoxConversation.tsx
파일을 만듭니다:
app/page.tsx
파일을 다음과 같이 수정합니다:
useVoxAI
훅은 다음과 같은 기능과 값을 제공합니다:
dynamicVariables
와 metadata
를 전달할 수 있습니다:
dynamicVariables
와 metadata
는 통화 기록에서도 확인할 수 있습니다.state
값은 대화 상태에 대한 실시간 정보를 제공합니다:
disconnected
- vox.ai에 연결되지 않음connecting
- 연결 설정 중initializing
- 연결 설정됨, 음성 인터페이스 초기화 중listening
- 사용자 입력 대기 중thinking
- 사용자 입력 처리 중speaking
- AI 에이전트가 말하는 중audioWaveform
메서드를 사용하여 오디오 활동을 시각화할 수 있습니다:
toggleMic
와 setVolume
메서드를 사용하여 오디오 입출력을 제어할 수 있습니다:
messages
배열은 대화 기록을 포함합니다. 각 메시지는 다음 구조를 가집니다. onMessage
콜백을 사용하여 새 메시지가 수신될 때 작업을 수행할 수 있습니다: