Components
AI Voice Input
A voice input component with an animated visualizer and recording timer. It includes a demo mode, customizable visualizer, and recording callbacks.
Features: • Animated audio visualizer • Recording timer display • Demo/preview mode • Start/stop callbacks • Dark mode support • Customizable visualizer bars • Mobile responsive
import { AIVoiceInput } from "@/components/ui/ai-voice-input";
import { useState } from "react";
export function AIVoiceInputDemo() {
const [recordings, setRecordings] = useState<{ duration: number; timestamp: Date }[]>([]);
const handleStop = (duration: number) => {
setRecordings(prev => [...prev.slice(-4), { duration, timestamp: new Date() }]);
};
return (
<div className="space-y-8">
<div className="space-y-4">
<AIVoiceInput
onStart={() => console.log('Recording started')}
onStop={handleStop}
/>
</div>
</div>
);
}Dependencies
Source
Published
Similar components
Explore more
Part of Kokonut UI — browse the full library on 21st.dev.