AI Elements

Voice Input

Dictate into the prompt field with the browser's speech recognition.

Voice Input adds a microphone to the Prompt Input. The spoken words appear in the field as the person talks, after whatever they already typed, and they can edit them before sending.

Installation

Voice Input is built with the Input Group and Tooltip components. It uses useSpeechRecognition from VueUse.

Usage

useSpeechRecognition returns isSupported, isListening, the result transcript, and start / stop. With continuous and interimResults on, the transcript updates while the person is still speaking.

  • Remember what was typed before dictation starts and add the transcript after it.
  • Show a clear listening state. The button changes to a stop button, and a pulsing dot and "Listening" appear.
  • When speech recognition is not supported, disable the button and say why in the tooltip. Wrap the disabled button in a focusable span so the tooltip still shows.
Browser support
The Web Speech API is not available in every browser, and some send audio to a server to transcribe it. Say so in your privacy notes. For consistent results across browsers, record audio and send it to a transcription model instead.

Accessibility

  • The button has aria-pressed and a label that changes between "Start dictation" and "Stop dictation".
  • The listening state is shown with text as well as the pulsing dot, so it does not rely on color or motion.

Tool

Displays a tool call the agent makes, from input to output.

Border Beam

An animated beam of light which travels along the border of its container.