Voice Integration

Try Persona voice input with browser or Runtype speech-to-text, plus browser, Runtype, or OpenAI-backed text-to-speech output.

Configuration

Client Token

Agent ID

Voice Input (Speech-to-Text)

Voice Output (Text-to-Speech)

Auto-speak assistant replies When off, the selected voice is still used by the per-message read-aloud button without autoplaying every response.

1.0

Rate

1.0

Pitch

Silence Detection

Pause Duration (ms)

Silence Threshold

Processing Placeholder Text

Processing Text (user bubble)

Error Text (assistant bubble)

Voice Indicator Plugin

Polished voice indicator (renderMessage plugin)

When enabled, registers plugins: [createVoiceIndicatorPlugin()], which renders the live transcribing & thinking bubbles as real animated components (no sanitizer stripping, markdown preserved). Listening & speaking appear in the status dock over the chat, driven by the voice:status event.

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 via browser voices, Runtype hosted voices, or OpenAI through the demo proxy

• 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
                 }
               }
             },
            // Auto-speak assistant replies when enabled.
            // Keep false to use the selected voice only from the read-aloud button.
            textToSpeech: {
              enabled: false,
              provider: 'browser', // or 'runtype'
              // For OpenAI / hosted voices, provide a SpeechEngine instead:
              createEngine: () => new ServerTtsEngine({ endpoint: '/api/tts' })
            },
            messageActions: {
              showReadAloud: true
            },
             // 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

Notes

Tips

Use Chrome or Edge for best voice support
Grant microphone permissions when prompted
Speak clearly for best transcription accuracy
OpenAI output requires the demo proxy running with OPENAI_API_KEY set
Check console for detailed logs and errors