A mic button React component with four recording states (idle, listening, processing, done), animated waveform bars, and transcript reveal using the Web Speech API or Vercel AI SDK transcribe. Drop it into any AI chat input for instant voice-to-text input capability.
- Voice input for AI chat interfaces on mobile and desktop
- Hands-free input for accessibility or hands-busy workflows
- Audio note-taking apps with AI transcription and processing
- Voice command interfaces for AI tools and automation
Tech stack
Vercel AI SDKNext.jsReactTypeScriptWeb Speech APIMediaRecorder
npx shadcn@latest add https://shadcnagents.com/r/voice-input-button