Voice Input

kai-voice-input

Keeps the recording on the element, so your page only supplies the transcription call.

• Shadow DOM
• 2 events
• Function-property pattern
• Framework agnostic
• Disableable

Preview

When to use

In a prompt input, a search bar, or a form field, wherever typing is the slow part. For the visual response while audio plays, use Audio visualizer.

Usage

Assign your transcribe function to the element and listen for kai-transcription:

<kai-voice-input id="voice"></kai-voice-input>

<script type="module">
  import '@kitn.ai/ui/web-components';

  await customElements.whenDefined('kai-voice-input');

  const voice = document.getElementById('voice');

  voice.transcribe = async (blob) => {
    const form = new FormData();
    form.append('audio', blob, 'recording.webm');
    const res = await fetch('/api/transcribe', { method: 'POST', body: form });
    return (await res.json()).text;
  };

  voice.addEventListener('kai-transcription', (e) => {
    document.getElementById('prompt').value = e.detail.text;
  });
</script>

• transcribe — assign an async (blob: Blob) => Promise<string> function once the element is in the DOM.
• To handle audio yourself, skip transcribe and listen for kai-audio-captured instead; it fires { blob } immediately after recording stops.
• disabled prevents interaction while the assistant is streaming or mic access is pending.

Examples

Default

Without a transcribe property the raw audio is still emitted via kai-audio-captured.

Code

Disabled

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
transcribe	((audio: Blob) => Promise<string>)	—	Transcriber the host supplies: records audio, returns the text. **Function-valued property.**
disabled	boolean	false	Disable the mic button (non-interactive).
recognitionLang	string	—	BCP-47 language tag for the native `SpeechRecognition` path (e.g. `en-US`). Attribute: `recognition-lang`.
interim	boolean	false	Emit live partial transcripts (`kai-transcript-interim`) during native recognition. Attribute: `interim`. No-op on the transcribe/fallback paths.

Events

Event	Detail	Notes
kai-audio-captured	{ … }	Raw audio captured, before transcription.
kai-recording-change	{ … }	Recording started or stopped.
kai-transcript-interim	{ … }	Live partial transcript during native recognition (only when `interim` is set). Fires repeatedly before the final `kai-transcription`.
kai-transcription	{ … }	Final transcript: the `transcribe` property resolved, OR native `SpeechRecognition` produced final text (no `transcribe` set).
kai-voice-error	{ … }	A voice session failed, so no failure is ever silent. `detail.error` is the platform error code or the thrown name.

Methods

Method	Signature	Notes
start	(): void	Begin recording programmatically (e.g. push-to-talk bound to a global key). Runs the same getUserMedia path as clicking the mic; no-ops if already recording.
stop	(): void	Stop the in-progress recording, producing the blob (→ kai-audio-captured) and running transcription. Pairs with start() for push-to-talk.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

VoiceInput

---

Need a hand? Report a bug Ask for help