Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - AI with Voice
A React AI chat input with voice recording attachment button and model selector dropdown built with shadcn/ui InputGroup for multimodal AI interactions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Typing long prompts on mobile is painful. This React AI input adds voice recording with MicIcon button plus file attachments and Claude model selector showing Sonnet Opus Haiku options. Built with shadcn/ui InputGroup and DropdownMenu with block-end alignment, it's perfect for mobile-first AI assistants, accessibility-focused chat apps, or hands-free AI interactions where users need flexibility beyond text-only input for richer conversational experiences.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
AI Prompt Input
Full-featured AI input with modes
Simple AI Prompt
Minimal AI chat input
AI with Attachments
AI input with file upload dropdown
Input with Action Buttons
Input with multiple button addons
Dropdown Menu
Dropdown menu component
Input with Icons
Input with icon addons
Questions you might have
React Input Group - AI with Attachments
A React AI chat input with file attachment dropdown model indicator and send button built with shadcn/ui InputGroup for multimodal AI
React Input Group - Copy Button
A React input field with copy button that toggles between copy and check icons showing visual feedback built with shadcn/ui InputGroup