Voice Integration Demo

This demo showcases the ElevenLabs voice integration with the Persona widget. It demonstrates real-time voice input and output using WebSocket technology. The WebSocket stream connects to the Runtype backend for server-side voice processing.

🔧 Configuration

Client Token:

Agent ID:

🎤 Voice Input (Speech-to-Text)

🔊 Voice Output (Text-to-Speech)

⏱ Silence Detection

Pause Duration (ms)

Silence Threshold

💬 Processing Placeholder Text

Processing Text (user bubble)

Error Text (assistant bubble)

🎨 Custom Processing UI

Enable custom postprocessMessage for voice placeholders

When enabled, voice processing placeholders use a custom animated component via the voiceProcessing message flag instead of plain text.

Configuration not applied yet

🎤 Voice Features

• Real-time voice-to-text transcription via WebSocket

• Auto-stop on silence — configurable pause duration & threshold

• Typing indicator — shows while server processes audio

• User transcript placeholder — appears instantly on recording stop

• Customizable processing UI — text config or full postprocessMessage override via voiceProcessing flag

• Text-to-speech with ElevenLabs voices over WebSocket stream

• WebSocket-based bidirectional communication

• Automatic fallback to browser speech API when WebSocket unavailable

🔧 Configuration

           // Voice recognition configuration for AgentWidget
           const config = {
             voiceRecognition: {
               enabled: true,
               processingText: 'Transcribing...',
               processingErrorText: 'Failed',
               provider: {
                 type: 'runtype',
                 runtype: {
                   agentId: 'your-agent-id',
                   clientToken: 'your-token',
                   host: 'api.runtype.com',
                   pauseDuration: 2000,
                   silenceThreshold: 0.01
                 }
               }
             },
             // Processing state (while agent is thinking)
             processingIconName: 'loader',     // spins automatically
             processingBackgroundColor: '#6366f1', // optional: indigo
             processingIconColor: '#ffffff',

             // Speaking state (while agent TTS is playing)
             speakingIconName: 'volume-2',     // or 'square' for cancel mode
             speakingBackgroundColor: '#3b82f6', // optional: blue
             speakingIconColor: '#ffffff',

             // Custom rendering via voiceProcessing flag
             postprocessMessage: ({ text, message }) => {
               if (message.voiceProcessing) {
                 return '<div>Custom UI</div>';
               }
               return text;
             }
           };
         

📡 Connection Status

Disconnected

🎤 Voice Controls

📝 Transcription Results

💡 Tips

• Use Chrome or Edge for best voice support

• Grant microphone permissions when prompted

• Speak clearly for best transcription accuracy

• Check console for detailed logs and errors