Speech Input

Preview

Overview

SpeechInput renders a standalone microphone button that captures voice input and returns transcript text through onTranscriptionChange.

It uses the browser Web Speech API when available. Use onInterimTranscriptionChange to preview provisional speech before the browser commits a final transcript chunk. If recording stops while interim text is visible, SpeechInput commits that latest interim text through onTranscriptionChange. When Web Speech is unavailable, it can record audio with MediaRecorder if you provide onAudioRecorded to send the audio blob to your transcription service.

Use PromptInputSpeechButton from PromptInput when you want dictation wired directly into a prompt composer.

Usage

import { SpeechInput } from "@tilt-legal/cubitt-components/chat-elements";

Examples

Default

<SpeechInput
  aria-label="Record voice prompt"
  onAudioRecorded={async (blob) => transcribe(blob)}
  onInterimTranscriptionChange={(text) => setInterimTranscript(text)}
  onTranscriptionChange={(text) => {
    setTranscript((current) => (current ? `${current} ${text}` : text));
    setInterimTranscript("");
  }}
/>

Disabled

<SpeechInput aria-label="Record voice prompt" disabled />