Realtime Voice

An interactive conversational AI voice interface with dynamic Bloop Orb visualizer, audio waveform ripples, live transcription, and turn-taking orchestration.

23.9 KB
•
Updated on September 22, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-realtime-voice

Usage

Code
import { RealtimeVoice } from '@/components/interactions/realtime-voice'
Code
<RealtimeVoice />

API Reference

RealtimeVoice

PropTypeDefaultDescription
preset
VoicePresetKey
developerActive scenario preset ('developer', 'designer', 'support', etc.)
dialogues
VoiceDialogueTurn[]
Preset turnsCustom conversational turns overriding preset dialogues.
modelName
string
Preset modelLabel displayed for the AI voice model (e.g. 'GPT-4o Voice').
autoPlay
boolean
trueWhether the conversation plays and advances automatically.
loop
boolean
trueWhether the conversation loops continuously upon completing all turns.
cyclePresets
boolean
trueAutomatically advance to the next preset scenario on cycle completion.
speed
number
1Speed multiplier for speech timing and state transitions.
showWaveform
boolean
trueWhether to render animated audio waveform bars.
enableSounds
boolean
trueEnable or mute tactile audio micro-interactions and speech chimes.
targetLoops
number
-Target number of sequence cycles before halting (for recorder sync).
onSequenceComplete
() => void
-Callback triggered once target sequence loops are finished.
className
string
-Additional CSS classes for the outer container.

Related Components

Agent PipelineInteraction

An interactive multi-agent pipeline visualization with real-time physics, event logs, and playback controls.

View
Deploy PipelineInteraction

A self-playing deploy pipeline that advances on its own, pauses on hover, and reveals per-step detail — drop it in to turn a static log into a living status feed.

View
Agent Pipeline
Deploy Pipeline