Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Message
Next: React AI Model Selector

React AI Mic Selector

React AI microphone selector component for choosing audio input devices

Let users pick their microphone before recording. This popover-based selector lists available audio input devices from the browser's MediaDevices API. Requests permission on open, updates when devices change (plug/unplug), and shows device names with hardware IDs stripped for cleaner display. Essential for voice AI apps with multiple input sources.

Mic Selector preview

Scroll to load preview

Installation

React AI Speech Input

Voice recording button

React AI Voice Selector

TTS voice selection

React AI Transcription

Speech transcript display

React AI Audio Player

Audio playback controls

React AI Message

Chat message bubbles

React AI Composer

Message composition

FAQ

Was this page helpful?

Sign in to leave feedback.

React AI Message

React AI message component with user/assistant styling, branching, attachments, and streaming markdown for chat interfaces

React AI Model Selector

React AI model selector component with searchable command dialog and provider logos for switching LLM models