Voice Input

Component 1

About

A voice composer with a live scrolling waveform, recording timer, streaming transcript, and discard or send actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Voice Input to your project and fits it to your theme.

Code

How Voice Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from 'react'
import { VoiceInput } from '@/components/ui/voice-input'

const words =
  'Summarize the open pull requests and flag anything that touches the checkout flow before Friday.'.split(
    ' ',
  )

function format(seconds: number) {
  return `00:${String(seconds).padStart(2, '0')}`
}

export default function Demo() {
  const [recording, setRecording] = React.useState(true)
  const [count, setCount] = React.useState(4)
  const [seconds, setSeconds] = React.useState(3)

  React.useEffect(() => {
    if (!recording) return
    const timer = setInterval(() => setSeconds((value) => value + 1), 1000)
    return () => clearInterval(timer)
  }, [recording])

  React.useEffect(() => {
    const timer = setTimeout(
      () => {
        if (!recording) {
          setCount(0)
          setSeconds(0)
          setRecording(true)
        } else if (count >= words.length) setRecording(false)
        else setCount((value) => value + 1)
      },
      recording ? 380 : 3600,
    )
    return () => clearTimeout(timer)
  }, [count, recording])

  function reset() {
    setCount(0)
    setSeconds(0)
    setRecording(false)
  }

  return (
    <VoiceInput
      className="max-w-md"
      duration={format(seconds)}
      onCancel={reset}
      onRecordingChange={setRecording}
      onSend={reset}
      recording={recording}
      transcript={words.slice(0, count).join(' ')}
    />
  )
}