# Voice Input

A mic button that records audio and transcribes it — drop it anywhere, wire one async function, and you have voice dictation.

<p class="kai-tag-sub">kai-voice-input</p>

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.

## Preview

> **tip:** 
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`:

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

<script type="module">

  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`.

### Disabled

## Props

## Events

## Methods

## Composed from