AI Voice Input

Component 1.7K

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Voice Input to your project and fits it to your theme.

Code

How AI Voice Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}