Components / AI chat
Voice input
A microphone button that records a clip and hands it to the host for transcription.
@fabrials/ai-ui
Microphone access is blocked.
Press to record. The transcript here is synthetic.
Installation
Import the control from
@fabrials/ai-ui, after setting the app up.TypeScript import { VoiceInputButton, VoiceInputButtonView } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";
API reference
| Prop / export | Type | Description |
|---|---|---|
onRecorded | (blob) => Promise | Host transcription. Resolves to the text. |
onTranscript | (text) => void | Receives the text to insert. |
maxDurationMs | number | Stops recording at this length. |
showLevel | boolean | Shows the input level while recording. |
status | VoiceInputStatus | idle, requesting, recording, transcribing or error. The stateless view uses it for custom recorders. |
Behavior
Presentational. The microphone is only requested after a press. The host supplies transcription; nothing is sent by the component.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.