Voice Input

kai-voice-input

A self-contained mic button that records audio, hands the Blob to your transcription function, and fires the result — plug in any speech-to-text backend to get voice dictation.

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

Preview

When to use

Reach for <kai-voice-input> to add mic dictation to a prompt input, search bar, or form field in any framework. In SolidJS, compose VoiceInput from @kitn.ai/ui directly for tighter reactive control.

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/elements';

  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
transcribe	(audio: Blob) => Promise<string>	—	Transcriber the host supplies — records audio, returns the text. This is a **function-valued property** (`el.transcribe = async blob => '...'`) because a value-returning callback can't be modelled as a fire-and-forget event.
disabled	boolean	false	Disable the mic button (non-interactive).

Events

Event	Detail	Notes
kai-audio-captured	{ … }	Raw audio captured (before transcription) — for hosts that prefer to handle transcription themselves instead of via the `transcribe` property.
kai-transcription	{ … }	Transcription completed (the `transcribe` property resolved).

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