Shadcn.io is not affiliated with official shadcn/ui
React AI Speech Input
React AI speech input component for voice recording with animated visual feedback
Speech Input preview
Add voice input to your AI chat—press to record, release to transcribe. This button uses the Web Speech API where available (Chrome, Edge) or falls back to MediaRecorder (Firefox, Safari) with your transcription service. Shows animated pulse rings while recording, changes to red stop button, and displays a loader during processing. Perfect for hands-free input or accessibility.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this AI component for you — no copy-paste, no CLI:
use shadcnio to install the speech-input AI component into my projectRelated Components
React AI Transcription
Speech transcript display
React AI Audio Player
Audio playback controls
React AI Mic Selector
Microphone selection
React AI Message
Chat message bubbles
React AI Prompt Input
Text input with actions
React AI Composer
Message composition
FAQ
Was this page helpful?
Sign in to leave feedback.