Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Sources
Next: React AI Stack Trace

React AI Speech Input

React AI speech input component for voice recording with animated visual feedback

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.

Speech Input preview

Scroll to load preview

Installation

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

React AI Sources

React AI sources component with collapsible list of citation links for RAG and research applications

React AI Stack Trace

React AI stack trace component for displaying parsed error stack traces with clickable file paths