Speech Input for Radix UI

A round microphone button: press it and speak, press it again to stop, and what was said comes back as text.

Use it beside a prompt field, so a person can dictate instead of typing. Where the browser has speech recognition (Chrome, Edge, Safari) it listens with that; in Firefox it records instead and hands the audio to onAudioRecorded, your transcription service. In React, Radix UI draws the Button, and the text arrives through onTranscriptionChange one finished phrase at a time: where it goes, a field or a message, is yours to decide.

Installation

Anatomy

SpeechInput
├── rings (three, while it listens)
└── Button

className and every other Button prop go to the Button. The rings sit behind it, in a wrapper that carries data-state.

Usage

import { SpeechInput } from "@/components/ui/speech-input";

<SpeechInput
  onTranscriptionChange={(text) => console.log(text)}
  size="icon-lg"
/>

States

The wrapper's data-state says which one it's in, and the Button's label changes with it, so a screen reader hears what a press does next.

The rings are CSS keyframes (speech-input-ring) that the install adds to your stylesheet. With reduced motion they don't show, and the stop square alone says it's listening.

How it listens

It checks once it's mounted, so the server renders it as a plain microphone. It asks for the microphone only when pressed: the page never shows the browser's prompt on load.

Demos

Prompt Input

The microphone sits in an Input Group next to Send, as an outline button that turns into the stop button while it listens. Each phrase joins the draft with a space, so a person can type, dictate, and type again before sending. Don't send on each phrase: speech recognition splits a sentence wherever the speaker pauses.

Language

lang takes a BCP 47 tag, en-US unless you say otherwise. Here a Native Select sets it, and the next press listens in that language. Set it from the person's settings or the page's language rather than the browser's guess: recognition in the wrong language returns confident nonsense.

Sizes

size is the Button's: icon-sm in a dense toolbar, icon (the default) beside a field, icon-lg when the microphone is the main way in. It stays round at each size.

Variants

variant sets the idle look: default in your primary color, then secondary, outline and ghost. While it listens it always takes the destructive look, so stopping reads the same wherever the button sits.

AI SDK

Firefox has no speech recognition, so it needs a transcription service: the AI SDK's transcribe turns the recording into text on your server.

import { openai } from "@ai-sdk/openai";
import { experimental_transcribe as transcribe } from "ai";

export async function POST(request: Request) {
  const { text } = await transcribe({
    audio: new Uint8Array(await request.arrayBuffer()),
    model: openai.transcription("whisper-1"),
  });

  return Response.json({ text });
}

const transcribeAudio = async (audio: Blob) => {
  const response = await fetch("/api/transcribe", {
    body: audio,
    method: "POST",
  });
  const { text } = await response.json();

  return text;
};

<SpeechInput
  onAudioRecorded={transcribeAudio}
  onTranscriptionChange={(text) =>
    setInput((previous) => `${previous} ${text}`.trim())
  }
/>

Send the field's text with useChat's sendMessage({ text: input }) when the person presses Send.

Migrating from AI SDK Elements

If you added Speech Input from AI SDK Elements (opens in a new tab), install this one and change the import from @/components/ai-elements/speech-input to @/components/ui/speech-input. SpeechInput, onTranscriptionChange, onAudioRecorded and lang are the same, and the other props still go to the Button. What differs:

• The default size is icon. AI SDK Elements' demo passes size="lg", which on this Button is a wide button: use icon-lg.
• While it listens it takes the Button's destructive variant from your theme, not a solid red with white text.
• It creates the browser's speech recognition when pressed, not when mounted, and it can't be pressed in a browser it can't listen in: its label then says why.

FAQ

API Reference