Voice Input

A composable recording control for any browser speech provider.

Install

Add the component and its shadcn dependencies in one command.

pnpm dlx shadcn@latest add https://voice-input.cristoper.dev/r/voice-input.json

Web Speech API demo

Press the mic, speak, and see interim + final transcripts.

Checking support…

Transcript

Nothing yet.

Compose with your speech provider

The component owns presentation; your adapter owns recording.

Full Web Speech example

voice-input-example.tsx

"use client";

import {
  VoiceInput,
  VoiceInputCancelButton,
  VoiceInputPreview,
  VoiceInputRecordButton,
} from "@/components/voice-input";

type SpeechController = {
  isConnected: boolean;
  isConnecting: boolean;
  partialTranscript: string;
  committedTranscripts: string[];
  start: () => Promise<void> | void;
  stop: () => Promise<void> | void;
  cancel: () => Promise<void> | void;
};

export function VoiceInputExample({ speech }: { speech: SpeechController }) {
  return (
    <VoiceInput
      isConnected={speech.isConnected}
      isConnecting={speech.isConnecting}
      partialTranscript={speech.partialTranscript}
      committedTranscripts={speech.committedTranscripts}
      onStart={speech.start}
      onStop={speech.stop}
      onCancel={speech.cancel}
      className="border"
    >
      <div className="flex w-full items-center gap-2 px-2">
        <VoiceInputRecordButton />
        <VoiceInputPreview className="flex-1" />
        <VoiceInputCancelButton />
      </div>
    </VoiceInput>
  );
}