Speech Input for Vue

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 Vue, Ark 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

<script setup lang="ts">
import { SpeechInput } from "@/components/ui/speech-input";
</script>

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

Call transcribe from ai in a server route (server/api/transcribe.post.ts in Nuxt) with the request's body as audio, and return { text }. Then hand the recording to it:

<script setup lang="ts">
import { ref } from "vue";

const input = ref("");

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

<template>
  <SpeechInput
    :on-audio-recorded="transcribeAudio"
    @transcription-change="(text: string) => (input = `${input} ${text}`.trim())"
  />
</template>

Send the field's text with Chat's sendMessage({ text: input }) from @ai-sdk/vue.

Migrating from AI SDK Elements

AI SDK Elements is for React. In Vue, Speech Input takes the same props, and the demos above show them in Vue's syntax.

FAQ

API Reference