Installation

No MCP yet? Connect your agent.

Usage

import {
  AudioScrubber,
  LiveMicrophoneWaveform,
  MicrophoneWaveform,
  RecordingWaveform,
  ScrollingWaveform,
  StaticWaveform,
  Waveform,
} from "@/components/ui/waveform";

Basic Waveform

const data = Array.from({ length: 50 }, () => Math.random())

<Waveform data={data} height={100} barWidth={4} barGap={2} />

Scrolling Animation

<ScrollingWaveform
  height={80}
  speed={50}
  barCount={60}
  barColor="hsl(var(--primary))"
  fadeEdges={true}
/>

Microphone Input

const [isRecording, setIsRecording] = useState(false)

<MicrophoneWaveform
  active={isRecording}
  height={100}
  sensitivity={1.5}
  onError={(error) => console.error("Microphone error:", error)}
/>

Microphone input requires a secure browser context and user permission. Provide a usable permission-denied state.