A composer that turns into a live waveform with a timer while you dictate, then collapses into a transcribing state and types the transcript into the box. It can read a real microphone level or simulate speech.
npx shadcn@latest add https://hyperblur.dev/r/prompt-voice-recorder.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/prompt-voice-recorder.tsx.
import { PromptVoiceRecorder } from "@/components/hyperblur/prompt-voice-recorder"
<PromptVoiceRecorder microphone onSubmit={(text) => send(text)} />| Prop | Type | Default | Description |
|---|---|---|---|
| transcript | string | a note to the design team | Text typed into the box after recording. Replace it with your speech-to-text result. |
| placeholder | string | "Type a message or hold a thought..." | Placeholder of the textarea. |
| microphone | boolean | false | Asks for microphone access and drives the waveform from the real input level. Falls back to the simulation if denied. |
| maxDuration | number | 60 | Recording stops by itself after this many seconds. |
| autoPlay | boolean | false | Loops record, transcribe and reset on its own until the user interacts. Useful for previews. |
| onRecordingChange | (recording: boolean) => void | undefined | Called when recording starts or stops. |
| onTranscript | (text: string) => void | undefined | Called when the transcript has been typed in. |
| onSubmit | (text: string) => void | undefined | Called on send. |
| accent | string | "#ff4d5e" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |