Input Mic

A chat-style text input with a mic button. The waveform reacts to real microphone input, and the mic can optionally convert speech to text.

Installation

Terminal

npx gotlui add input-mic

Usage

page.tsx

import { useState } from "react"
import InputMic from "@/components/gotlui/input-mic"

export default function Chat() {
  const [value, setValue] = useState("")

  return (
    <InputMic
      value={value}
      onChange={setValue}
      onTranscript={(text, isFinal) => {
        if (isFinal) console.log("Final transcript:", text)
      }}
      onSend={(text) => {
        console.log("Sending:", text)
        setValue("")
      }}
    />
  )
}

Props

Prop	Type	Description
value	string	Controlled text value. Omit to let the component manage its own state.
defaultValue	string	Initial text when uncontrolled.
onChange	(value: string) => void	Fires whenever the text changes (typing or speech).
onTranscript	(text: string, isFinal: boolean) => void	Fires with the live transcript while the mic is on — this is the speech-to-text hook.
onSend	(value: string) => void	Fires when the send button is pressed, with the current text.
placeholder	string	Input placeholder. Defaults to "Type a message...".
lang	string	BCP-47 language tag for speech recognition. Defaults to "en-US".
className	string	Extra classes for the outer container.

Speech-to-text uses the browser's built-in SpeechRecognition API (Chrome/Edge support it; Firefox does not) — on unsupported browsers the waveform and typing still work, only onTranscript won't fire.