AI SpeechRecognition

A microphone-based AI input component with demo mode, speech recognition, pulse bars, and time tracking.

The AIInputThree component allows users to interact with your app using voice input.
It includes:

🎤 Microphone toggle
⏱ Time tracking with formatted display
🔊 Optional speech recognition (SpeechRecognition API)
🌊 Animated pulse bars
🧪 Demo mode for showcasing interactions

Live Preview

Open in

00:00

Click to speak

GSAP

Framer Motion

Example Usage


"use client";

import { AIInputThree } from "@/components/ai-input/AIInputThree";

export default function ExamplePage() {
  const handleStart = () => {
    console.log("Recording started...");
  };

  const handleStop = (duration: number) => {
    console.log("Recording stopped after", duration, "seconds");
  };

  const handleSubmit = (transcript: string, duration: number) => {
    console.log("User said:", transcript);
    console.log("Duration:", duration, "seconds");
    alert(`You spoke for ${duration} seconds.\nTranscript: ${transcript}`);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-black">
      <AIInputThree
        demo={false}
        useSpeechRecognition={true}
        onStart={handleStart}
        onStop={handleStop}
        onSubmit={handleSubmit}
      />
    </div>
  );
}