AI Chat Voice Input

Component 3

About

A sophisticated interface for text and voice communication, featuring an auto-resizing textarea, file attachment capabilities, and a visual voice recording mode with animated waveform display. The component supports theme-aware styling, accessibility features like reduced motion preferences, and smooth animations that enhance user interaction without compromising performance. It's particularly well-suited for AI chat applications, voice assistants, messaging platforms, and any interface requiring rich multimodal input with professional visual feedback.

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

Code

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

Usage.tsx

"use client";

import { AIVoiceInput } from "@/components/ui/ai-chat-voice-input";

export default function AIVoiceInputDemo() {
  const handleSend = (message: string) => {
    console.log("Message sent:", message);
  };

  const handleVoiceStart = () => {
    console.log("Voice recording started");
  };

  const handleVoiceStop = (duration: number) => {
    console.log("Voice recording stopped. Duration:", duration, "seconds");
  };

  const handleFileAttach = () => {
    console.log("File attach clicked");
  };

  return (
    <div className="min-h-screen bg-background p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Header */}
        <div className="text-center space-y-4">
          <h1 className="text-4xl font-bold text-foreground">
            AI Voice Input
          </h1>
          <p className="text-lg text-muted-foreground">
            Chat input with voice overlay and waveform animation
          </p>
        </div>

        {/* Demo */}
        <div className="space-y-6">
          <AIVoiceInput
            placeholder="Send message..."
            onSend={handleSend}
            onVoiceStart={handleVoiceStart}
            onVoiceStop={handleVoiceStop}
            onFileAttach={handleFileAttach}
          />
        </div>
      </div>
    </div>
  );
}