### Install Audio Player Dependencies

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Manually install the necessary dependencies for the audio player component.

```bash
npm install @radix-ui/react-slider lucide-react
```

--------------------------------

### Install All ElevenLabs UI Components

Source: https://github.com/elevenlabs/ui/blob/main/README.md

Install all available ElevenLabs UI components at once using the CLI. This command also sets up shadcn/ui if needed and adds dependencies.

```bash
npx @elevenlabs/cli@latest components add all
```

--------------------------------

### Install All Components via shadcn/ui CLI

Source: https://github.com/elevenlabs/ui/blob/main/README.md

Alternative method to install all ElevenLabs UI components using the standard shadcn/ui CLI.

```bash
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json
```

--------------------------------

### Advanced Example: Custom Controls

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

An example showcasing how to implement custom audio player controls using the `useAudioPlayer` hook.

```APIDOC
## Custom Controls

### Description
Provides an example of building custom audio player controls using the `useAudioPlayer` hook for play, pause, seek, and playback rate adjustments.

### Example
```tsx showLineNumbers
function CustomAudioPlayer() {
  const { play, pause, isPlaying, seek, duration, setPlaybackRate } = useAudioPlayer()

  return (
    <div className="space-y-4">
      <button onClick={() => (isPlaying ? pause() : play())}>
        {isPlaying ? "Pause" : "Play"}
      </button>

      <button onClick={() => seek(0)}>Restart</button>

      <button onClick={() => duration && seek(duration * 0.5)}>
        Jump to 50%
      </button>

      <button onClick={() => setPlaybackRate(1.5)}>Speed 1.5x</button>
    </div>
  )
}
```
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

Install all necessary project dependencies using pnpm, the package manager used in this monorepo.

```bash
pnpm install
```

--------------------------------

### Install Components with CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/(root)/index.mdx

Use the ElevenLabs CLI to add specific components to your project. This command installs the 'orb' component.

```bash
npx @elevenlabs/cli@latest components add <component>
```

```bash
npx @elevenlabs/cli@latest components add orb
```

--------------------------------

### Advanced Example: Player with Speed Control

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

An example demonstrating how to integrate the Audio Player component with speed control functionality.

```APIDOC
## Player with Speed Control

### Description
Demonstrates a complete audio player setup including playback controls, time display, progress bar, duration, and speed control.

### Example
```tsx showLineNumbers
function AudioPlayerWithSpeed() {
  return (
    <AudioPlayerProvider>
      <div className="flex items-center gap-4">
        <AudioPlayerButton />
        <AudioPlayerTime />
        <AudioPlayerProgress className="flex-1" />
        <AudioPlayerDuration />
        <AudioPlayerSpeed />
      </div>
    </AudioPlayerProvider>
  )
}
```
```

--------------------------------

### Install Orb Component with shadcn/ui CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/(root)/setup.mdx

Use this command to add the 'orb' component if you are already using shadcn/ui in your project. This command integrates with the existing shadcn/ui setup.

```bash
npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json
```

--------------------------------

### Install Dependencies for Speech Input

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Manually install necessary dependencies for the Speech Input component.

```bash
npm install motion lucide-react
```

--------------------------------

### Install Conversation Component Dependencies Manually

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation.mdx

Manually install the 'use-stick-to-bottom' dependency for the Conversation component.

```bash
npm install use-stick-to-bottom
```

--------------------------------

### Advanced Example: Error Handling

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

An example demonstrating how to handle and display errors that may occur during audio playback.

```APIDOC
## Error Handling

### Description
Illustrates how to implement error handling for the audio player, displaying an error message when playback fails.

### Example
```tsx showLineNumbers
function AudioPlayerWithError() {
  const { error, activeItem } = useAudioPlayer()

  if (error) {
    return (
      <div className="text-red-500">
        Failed to load: {activeItem?.src}
        <br />
        Error: {error.message}
      </div>
    )
  }

  return <AudioPlayerButton />
}
```
```

--------------------------------

### Install Audio Player via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Use the ElevenLabs CLI to add the audio player component to your project.

```bash
npx @elevenlabs/cli@latest components add audio-player
```

--------------------------------

### Run the Development Server

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

Start the development server for the `ui.elevenlabs.io` website. This command is also used for running documentation locally.

```bash
pnpm dev
```

--------------------------------

### Install Shimmering Text Dependencies Manually

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/shimmering-text.mdx

Manually install the 'motion' dependency for the shimmering text component.

```bash
npm install motion
```

--------------------------------

### Example Commit Message

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

Follow the conventional commit format for all commit messages. This example shows how to add a new prop to the avatar component.

```bash
feat(components): add new prop to the avatar component
```

--------------------------------

### Install Response Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/response.mdx

Use the ElevenLabs CLI to add the Response component to your project.

```bash
npx @elevenlabs/cli@latest components add response
```

--------------------------------

### Basic Audio Player Setup

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Render a basic audio player with play/pause, progress bar, current time, and total duration.

```typescript
<AudioPlayerProvider>
  <div className="flex items-center gap-4">
    <AudioPlayerButton />
    <AudioPlayerProgress className="flex-1" />
    <AudioPlayerTime />
    <span>/
    <AudioPlayerDuration />
  </div>
</AudioPlayerProvider>

```

--------------------------------

### Install Speech Input via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Use the ElevenLabs CLI to add the speech-input component to your project.

```bash
npx @elevenlabs/cli@latest components add speech-input
```

--------------------------------

### Install Live Waveform via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/live-waveform.mdx

Use the ElevenLabs CLI to add the Live Waveform component to your project.

```bash
npx @elevenlabs/cli@latest components add live-waveform
```

--------------------------------

### Install Orb Component Dependencies Manually

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/orb.mdx

Install the necessary npm packages for the Orb component.

```bash
npm install @react-three/drei @react-three/fiber three @types/three
```

--------------------------------

### Install Waveform Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Use the ElevenLabs CLI to add the waveform component to your project.

```bash
npx @elevenlabs/cli@latest components add waveform
```

--------------------------------

### Install Voice Picker Component Dependencies Manually

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-picker.mdx

Manually install the necessary npm package for the voice picker component.

```bash
npm install @elevenlabs/elevenlabs-js
```

--------------------------------

### Install Streamdown Dependency

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/response.mdx

Manually install the Streamdown dependency using npm.

```bash
npm install streamdown
```

--------------------------------

### Install Conversation Bar Dependencies

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation-bar.mdx

Manually install the necessary npm package for the Conversation Bar component.

```bash
npm install @elevenlabs/react
```

--------------------------------

### Install Bar Visualizer via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

Use the ElevenLabs CLI to add the Bar Visualizer component to your project.

```bash
npx @elevenlabs/cli@latest components add bar-visualizer
```

--------------------------------

### Install Matrix Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Use the ElevenLabs CLI to add the Matrix component to your project.

```bash
npx @elevenlabs/cli@latest components add matrix
```

--------------------------------

### Install Orb Component with ElevenLabs CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/(root)/setup.mdx

Use this command to add the 'orb' component directly using the ElevenLabs CLI. Ensure Node.js 18+ is installed.

```bash
npx @elevenlabs/cli@latest components add orb
```

--------------------------------

### Install Shimmering Text via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/shimmering-text.mdx

Use the ElevenLabs CLI to add the shimmering-text component to your project.

```bash
npx @elevenlabs/cli@latest components add shimmering-text
```

--------------------------------

### Install Voice Picker Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-picker.mdx

Use the ElevenLabs CLI to add the voice picker component to your project.

```bash
npx @elevenlabs/cli@latest components add voice-picker
```

--------------------------------

### Install ElevenLabs UI Components CLI

Source: https://github.com/elevenlabs/ui/blob/main/README.md

Use the ElevenLabs Agents CLI to add components to your Next.js project. Recommended to use directly with npx.

```bash
npx @elevenlabs/cli@latest components add <component-name>
```

```bash
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json
```

--------------------------------

### Music Player Visualization with AudioScrubber

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

This example demonstrates how to use the AudioScrubber component to visualize audio data for a music player. It requires audio data, current playback time, and duration.

```tsx
function MusicPlayer() {
  const [audioData] = useState(() =>
    Array.from({ length: 100 }, () => 0.2 + Math.random() * 0.6)
  )

  return (
    <AudioScrubber
      data={audioData}
      currentTime={currentTime}
      duration={duration}
      onSeek={handleSeek}
      height={60}
      barWidth={3}
      barGap={1}
      barColor="hsl(var(--primary))"
    />
  )
}
```

--------------------------------

### Install Mic Selector via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/mic-selector.mdx

Use the ElevenLabs CLI to add the Mic Selector component to your project.

```bash
npx @elevenlabs/cli@latest components add mic-selector
```

--------------------------------

### Custom Animation Matrix Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Demonstrates creating a custom animation by defining an array of frames. This example shows a simple 3x3 blinking animation.

```tsx
function CustomAnimation() {
  // Create a simple blink animation
  const frames: Frame[] = [
    [
      [1, 0, 1],
      [0, 1, 0],
      [1, 0, 1],
    ], // Frame 1
    [
      [0, 1, 0],
      [1, 0, 1],
      [0, 1, 0],
    ], // Frame 2
  ]

  return <Matrix rows={3} cols={3} frames={frames} fps={2} loop />
}
```

--------------------------------

### Built-in Presets

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Examples of using the pre-defined presets like digits, loader, and pulse.

```APIDOC
## Presets

The component comes with several built-in presets and animations:

### digits

7-segment style digits (0-9) on a 7×5 grid.

```tsx
import { digits, Matrix } from "@/components/ui/matrix"

export default () => <Matrix rows={7} cols={5} pattern={digits[5]} />
```

### loader

Rotating spinner animation (7×7, 12 frames).

```tsx
import { loader, Matrix } from "@/components/ui/matrix"

export default () => <Matrix rows={7} cols={7} frames={loader} fps={12} />
```

### pulse

Expanding pulse effect (7×7, 16 frames).

```tsx
import { Matrix, pulse } from "@/components/ui/matrix"

export default () => <Matrix rows={7} cols={7} frames={pulse} fps={16} />
```
```

--------------------------------

### Install Voice Button via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-button.mdx

Use the ElevenLabs CLI to add the Voice Button component to your project.

```bash
npx @elevenlabs/cli@latest components add voice-button
```

--------------------------------

### Install Conversation Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation.mdx

Use the ElevenLabs CLI to add the Conversation component to your project.

```bash
npx @elevenlabs/cli@latest components add conversation
```

--------------------------------

### Animation Frame Change Callback Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Shows how to use the `onFrame` callback to track the current frame of an animation and display it. This example uses a loader animation.

```tsx
function AnimationTracker() {
  const [currentFrame, setCurrentFrame] = useState(0)

  return (
    <div>
      <Matrix
        rows={7}
        cols={7}
        frames={loader}
        fps={12}
        onFrame={setCurrentFrame}
      />
      <p>Frame: {currentFrame}</p>
    </div>
  )
}
```

--------------------------------

### RecordingWaveform Setup

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Implement RecordingWaveform for a recording interface with scrubbing capabilities. It allows controlling the recording state and provides a callback for completed recordings.

```tsx
<RecordingWaveform
  recording={isRecording}
  onRecordingComplete={(data) => console.log("Recording data:", data)}
/>
```

--------------------------------

### Install Conversation Bar via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation-bar.mdx

Use the ElevenLabs CLI to add the Conversation Bar component to your project.

```bash
npx @elevenlabs/cli@latest components add conversation-bar
```

--------------------------------

### Live Dynamic VU Meter Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

A Matrix component demonstrating a live, dynamic VU meter. It uses `useState` and `useEffect` to simulate changing audio levels and updates the meter accordingly.

```tsx
function LiveVUMeter() {
  const [levels, setLevels] = useState(Array(12).fill(0))

  useEffect(() => {
    // Simulate audio levels
    const interval = setInterval(() => {
      setLevels(Array.from({ length: 12 }, () => Math.random()))
    }, 50)

    return () => clearInterval(interval)
  }, [])

  return (
    <Matrix rows={7} cols={12} mode="vu" levels={levels} size={10} gap={2} />
  )
}
```

--------------------------------

### useAudioPlayerTime Hook - Example Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Calculates and displays playback progress as a percentage using the current time from useAudioPlayerTime and duration from useAudioPlayer.

```tsx
function CustomTimeDisplay() {
  const time = useAudioPlayerTime()
  const { duration } = useAudioPlayer()

  const percentage = duration ? (time / duration) * 100 : 0

  return <div>Progress: {percentage.toFixed(1)}%</div>
}
```

--------------------------------

### Install Message Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/message.mdx

Use the Eleven Labs CLI to add the message component to your project.

```bash
npx @elevenlabs/cli@latest components add message
```

--------------------------------

### Matrix Component API Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Basic usage of the Matrix component with rows, columns, and animation frames.

```typescript
<Matrix rows={7} cols={7} frames={wave} fps={20} />
```

--------------------------------

### Basic Waveform Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Render a static waveform using an array of random data. Customize height and bar appearance.

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

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

--------------------------------

### useAudioPlayer Hook - Example Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Demonstrates controlling playback within a component using the useAudioPlayer hook. Handles playing the next track in a playlist.

```tsx
function PlaylistController() {
  const { play, pause, isPlaying, activeItem } = useAudioPlayer()

  const handlePlayNext = () => {
    const nextTrack = getNextTrack(activeItem?.id)
    if (nextTrack) {
      play(nextTrack)
    }
  }

  return <button onClick={handlePlayNext}>Next Track</button>
}
```

--------------------------------

### Integrate Transcript Viewer Component

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/transcript-viewer.mdx

Example of how to integrate the Transcript Viewer component, including audio playback controls and scrubbing.

```tsx
import {
  TranscriptViewerAudio,
  TranscriptViewerContainer,
  TranscriptViewerPlayPauseButton,
  TranscriptViewerScrubBar,
  TranscriptViewerWords,
} from "@/components/ui/transcript-viewer"

export function TranscriptViewerExample({ audioSrc, alignment }) {
  return (
    <TranscriptViewerContainer audioSrc={audioSrc} alignment={alignment}>
      <TranscriptViewerAudio />
      <TranscriptViewerWords />
      <div className="flex items-center gap-3">
        <TranscriptViewerPlayPauseButton />
        <TranscriptViewerScrubBar />
      </div>
    </TranscriptViewerContainer>
  )
}
```

--------------------------------

### Audio Level Meter Matrix Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

A Matrix component configured as an audio level meter. It takes frequency data, converts it to levels, and displays them using the 'vu' mode.

```tsx
function AudioMeter({ frequencyData }: { frequencyData: number[] }) {
  // Convert frequency data to 0-1 levels
  const levels = frequencyData.map((freq) => freq / 255)

  return (
    <Matrix
      rows={7}
      cols={frequencyData.length}
      mode="vu"
      levels={levels}
      size={8}
      gap={1}
      ariaLabel="Audio frequency meter"
    />
  )
}
```

--------------------------------

### Basic Speech Input Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Demonstrates the basic setup of the SpeechInput component with record, preview, and cancel buttons. Requires a getToken function to authenticate with ElevenLabs Scribe.

```tsx
async function getToken() {
  const response = await fetch("/api/get-scribe-token", { method: "POST" })
  const json = await response.json()
  return json.token
}

export default function Example() {
  return (
    <SpeechInput
      getToken={getToken}
      onChange={(data) => console.log(data.transcript)}
      onStop={(data) => console.log("Final:", data.transcript)>
      <SpeechInputRecordButton />
      <SpeechInputPreview placeholder="Start speaking..." />
      <SpeechInputCancelButton />
    </SpeechInput>
  )
}

```

--------------------------------

### Fetch Voices from ElevenLabs API for Voice Picker

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-picker.mdx

Example of fetching voices from the ElevenLabs API using `ElevenLabsClient` and populating the VoicePicker. Ensure your `ELEVENLABS_API_KEY` is set in your environment variables. This snippet requires `useState` and `useEffect` hooks from React.

```tsx
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js"
import { useState, useEffect } from "react"

const [voices, setVoices] = useState<ElevenLabs.Voice[]>([])

useEffect(() => {
  const client = new ElevenLabsClient({
    apiKey: process.env.ELEVENLABS_API_KEY,
  })

  client.voices.getAll().then((response) => {
    setVoices(response.voices)
  })
}, [])

<VoicePicker
  voices={voices}
  value={selectedVoice}
  onValueChange={setSelectedVoice}
/>
```

--------------------------------

### Using the useSpeechInput Hook

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Example of using the useSpeechInput hook to access transcription status and text within child components.

```tsx
import { useSpeechInput } from "@/components/ui/speech-input"

function TranscriptDisplay() {
  const { transcript, isConnected, isConnecting } = useSpeechInput()

  return (
    <div>
      <p>
        Status: {" "}
        {isConnecting ? "Connecting" : isConnected ? "Recording" : "Idle"}
      </p>
      <p>Transcript: {transcript}</p>
    </div>
  )
}

```

--------------------------------

### Retro Display Matrix Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

A 7x7 Matrix component configured for a retro display effect with wave animation, custom size, gap, and a specific color palette.

```tsx
function RetroDisplay() {
  return (
    <div className="bg-muted/30 rounded-lg border p-8">
      <Matrix
        rows={7}
        cols={7}
        frames={wave}
        fps={20}
        size={16}
        gap={3}
        palette={{
          on: "hsl(142 76% 36%)",
          off: "hsl(142 76% 10%)",
        }}
        ariaLabel="Wave animation"
      />
    </div>
  )
}
```

--------------------------------

### Audio Player with Speed Control

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

A complete audio player UI setup including playback controls, time display, progress bar, duration, and speed selection, all wrapped in an AudioPlayerProvider.

```tsx
function AudioPlayerWithSpeed() {
  return (
    <AudioPlayerProvider>
      <div className="flex items-center gap-4">
        <AudioPlayerButton />
        <AudioPlayerTime />
        <AudioPlayerProgress className="flex-1" />
        <AudioPlayerDuration />
        <AudioPlayerSpeed />
      </div>
    </AudioPlayerProvider>
  )
}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

Change your current directory to the root of the cloned UI repository.

```bash
cd ui
```

--------------------------------

### Matrix Component Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Demonstrates basic usage of the Matrix component with static patterns, animations, and VU meter mode.

```APIDOC
## Matrix Component

The main matrix display component.

### Usage Examples

#### Static Pattern
```tsx
import { Matrix, digits } from "@/components/ui/matrix"

<Matrix rows={7} cols={5} pattern={digits[5]} ariaLabel="Number five" />
```

#### Animated Display
```tsx
import { Matrix, wave } from "@/components/ui/matrix"

<Matrix
  rows={7}
  cols={7}
  frames={wave}
  fps={20}
  loop
  ariaLabel="Wave animation"
/>
```

#### VU Meter
```tsx
import { Matrix } from "@/components/ui/matrix"

<Matrix
  rows={7}
  cols={12}
  mode="vu"
  levels={[0.1, 0.6, 0.9, 0.7, 0.4, 0.8, 0.5, 0.3, 0.6, 0.9, 0.5, 0.2]}
/>
```

### API Reference: Matrix

#### Props

| Prop       | Type                                   | Description                                                    |
| ---------- | -------------------------------------- | -------------------------------------------------------------- |
| rows       | `number`                               | Number of rows in the matrix (required)                        |
| cols       | `number`                               | Number of columns in the matrix (required)                     |
| pattern    | `Frame`                                | Static pattern to display (2D array of brightness values 0-1)  |
| frames     | `Frame[]`                              | Array of frames for animation (ignored if pattern is provided) |
| fps        | `number`                               | Frames per second for animation. Default: 12                   |
| autoplay   | `boolean`                              | Start animation automatically. Default: true                   |
| loop       | `boolean`                              | Loop animation. Default: true                                  |
| size       | `number`                               | Cell size in pixels. Default: 10                               |
| gap        | `number`                               | Gap between cells in pixels. Default: 2                        |
| palette    | `{on: string, off: string}`            | CSS colors for on/off states. Defaults to theme colors         |
| brightness | `number`                               | Global brightness multiplier (0-1). Default: 1                 |
| ariaLabel  | `string`                               | ARIA label for accessibility                                   |
| onFrame    | `(index: number) => void`              | Callback when frame changes during animation                   |
| mode       | `"default" | "vu"`                    | Display mode. Default: "default"                               |
| levels     | `number[]`                             | Live levels for VU meter mode (0-1 per column)                 |
| className  | `string`                               | Additional CSS classes                                         |
| ...props   | `React.HTMLAttributes<HTMLDivElement>` | All standard div element props                                 |

### Frame Type

```tsx
type Frame = number[][] // [row][col] brightness 0..1
```

A frame is a 2D array where each value represents the brightness of a cell (0 = off, 1 = full brightness).

Example:

```tsx
const smiley: Frame = [
  [0, 1, 1, 1, 0],
  [1, 0, 0, 0, 1],
  [1, 1, 0, 1, 1],
  [1, 0, 0, 0, 1],
  [0, 1, 1, 1, 0],
]
```
```

--------------------------------

### useAudioPlayerTime Hook

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Hook to get the current playback time of the audio player, updating every frame.

```APIDOC
## useAudioPlayerTime Hook

### Description
Get the current playback time (updates every frame using requestAnimationFrame).

### Return Values
- **time** (number) - The current playback time in seconds.

### Example Usage
```tsx
function CustomTimeDisplay() {
  const time = useAudioPlayerTime()
  const { duration } = useAudioPlayer()

  const percentage = duration ? (time / duration) * 100 : 0

  return <div>Progress: {percentage.toFixed(1)}%</div>
}
```
```

--------------------------------

### useAudioVolume Hook

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

A hook to get the overall volume level from an audio stream, with options for audio analysis.

```APIDOC
## useAudioVolume Hook

### Description
Get the overall volume level from an audio stream.

### Parameters

#### `mediaStream`
- **Type**: `MediaStream | null`
- **Description**: The audio stream to analyze.

#### `options`
- **Type**: `AudioAnalyserOptions`
- **Description**: FFT size, smoothing, and dB range.
```

--------------------------------

### Shimmering Text Triggered on Viewport Entry

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/shimmering-text.mdx

Configure the ShimmeringText component to start its animation only when it scrolls into the viewport, and animate only once.

```tsx
<ShimmeringText
  text="Appears when scrolled into view"
  startOnView={true}
  once={true}
/>

```

--------------------------------

### Clone the UI Repository

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

Clone the official ElevenLabs UI repository to your local machine to begin development.

```bash
git clone https://github.com/elevenlabs/ui.git
```

--------------------------------

### Basic Voice Button Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-button.mdx

Demonstrates the basic implementation of the VoiceButton, managing its state and handling press events to transition between idle and recording/processing states.

```typescript
const [state, setState] = useState<"idle" | "recording" | "processing">("idle")

<VoiceButton
  state={state}
  onPress={() => {
    if (state === "idle") {
      setState("recording")
    } else {
      setState("processing")
    }
  }}
/>
```

--------------------------------

### Bar Visualizer in Demo Mode

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

Enable demo mode for the BarVisualizer to see animations with fake audio data. Useful for development and testing.

```typescript
<BarVisualizer state="speaking" demo={true} centerAlign={true} />

```

--------------------------------

### Import BarVisualizer and Hooks

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

Import the main BarVisualizer component and necessary hooks for audio analysis and animation.

```typescript
import {
  BarVisualizer,
  useAudioVolume,
  useBarAnimator,
  useMultibandVolume,
  type AgentState,
  type AudioAnalyserOptions,
  type BarVisualizerProps,
  type MultiBandVolumeOptions,
} from "@/components/ui/bar-visualizer"

```

--------------------------------

### Voice Recorder with RecordingWaveform

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

A voice recorder implementation using the RecordingWaveform component. It allows starting and stopping recordings and logs the recorded data upon completion.

```tsx
function VoiceRecorder() {
  const [recording, setRecording] = useState(false)

  return (
    <div className="space-y-4">
      <RecordingWaveform
        recording={recording}
        height={100}
        onRecordingComplete={(data) => {
          console.log("Recording complete", data)
        }}
      />
      <Button onClick={() => setRecording(!recording)}>
        {recording ? "Stop" : "Start"} Recording
      </Button>
    </div>
  )
}
```

--------------------------------

### Basic Bar Visualizer Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

Render a basic BarVisualizer component with a specified number of bars and an audio stream.

```typescript
<BarVisualizer state="listening" barCount={15} mediaStream={stream} />

```

--------------------------------

### Custom Heart Pattern Matrix Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

A 6x7 Matrix component displaying a custom heart pattern with a specific size, gap, and a red/dark red color palette.

```tsx
function Heart() {
  const heartPattern: Frame = [
    [0, 1, 1, 0, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 1, 1, 1, 1, 1, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 1, 0, 0, 0],
  ]

  return (
    <Matrix
      rows={6}
      cols={7}
      pattern={heartPattern}
      size={14}
      gap={2}
      palette={{
        on: "hsl(0 84% 60%)",
        off: "hsl(0 84% 20%)",
      }}
    />
  )
}
```

--------------------------------

### Audio Player Component Imports

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Import all necessary components and hooks for the audio player from the UI library.

```typescript
import {
  AudioPlayerButton,
  AudioPlayerDuration,
  AudioPlayerProgress,
  AudioPlayerProvider,
  AudioPlayerSpeed,
  AudioPlayerSpeedButtonGroup,
  AudioPlayerTime,
  useAudioPlayer,
  useAudioPlayerTime,
} from "@/components/ui/audio-player"

```

--------------------------------

### Import Waveform Components

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Import all available waveform components and utilities from the library.

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

```

--------------------------------

### Digital Clock Digit Matrix Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

A 7x5 Matrix component used to display a single digit for a digital clock. It takes a 'value' prop to determine which digit pattern to show.

```tsx
function ClockDigit({ value }: { value: number }) {
  return (
    <Matrix
      rows={7}
      cols={5}
      pattern={digits[value]}
      size={12}
      gap={2}
      ariaLabel={`Digit ${value}`}
    />
  )
}
```

--------------------------------

### Scrub Bar Usage Example

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/scrub-bar.mdx

This React component demonstrates how to use the ScrubBarContainer and its children to create an interactive scrub bar. It manages the current value and duration, and handles scrubbing events.

```tsx
import * as React from "react"

import {
  ScrubBarContainer,
  ScrubBarProgress,
  ScrubBarThumb,
  ScrubBarTimeLabel,
  ScrubBarTrack,
} from "@/components/ui/scrub-bar"

export function ScrubBarExample() {
  const [value, setValue] = React.useState(30)
  const duration = 100

  return (
    <ScrubBarContainer duration={duration} value={value} onScrub={setValue}>
      <ScrubBarTimeLabel time={value} />
      <ScrubBarTrack className="mx-2">
        <ScrubBarProgress />
        <ScrubBarThumb />
      </ScrubBarTrack>
      <ScrubBarTimeLabel time={duration} />
    </ScrubBarContainer>
  )
}
```

--------------------------------

### Add Transcript Viewer via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/transcript-viewer.mdx

Use the ElevenLabs CLI to add the Transcript Viewer component to your project.

```bash
npx @elevenlabs/cli@latest components add transcript-viewer
```

--------------------------------

### Basic Message Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/message.mdx

Demonstrates how to render basic user and assistant messages with avatars and content.

```typescript
<Message from="user">
  <MessageAvatar src="/user-avatar.jpg" name="John" />
  <MessageContent>Hello, how can I help you?</MessageContent>
</Message>

<Message from="assistant">
  <MessageAvatar src="/assistant-avatar.jpg" name="AI" />
  <MessageContent>I'm here to assist you with any questions!</MessageContent>
</Message>
```

--------------------------------

### Using Card and Orb Components

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/(root)/usage.mdx

Import and render the Card and Orb components from ElevenLabs UI. Ensure the 'use client' directive is present for client components.

```tsx
"use client"

import { Card } from "@/components/ui/card"
import { Orb } from "@/components/ui/orb"

export default function Page() {
  return (
    <Card className="flex items-center justify-center p-8">
      <Orb />
    </Card>
  )
}
```

--------------------------------

### useMultibandVolume Hook Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

Utilize the useMultibandVolume hook to track volume across different frequency bands. Configure the number of bands and frequency range.

```typescript
const frequencyBands = useMultibandVolume(mediaStream, {
  bands: 15,
  loPass: 100,
  hiPass: 200,
  updateInterval: 32,
})

```

--------------------------------

### Import Conversation Components

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation.mdx

Import the necessary components for the Conversation UI. Ensure the import path matches your project structure.

```tsx
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationScrollButton,
} from "@/components/ui/conversation"

```

--------------------------------

### MicrophoneWaveform Component API

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Visualizes real-time microphone input. Requires an 'active' prop to start/stop visualization and accepts sensitivity adjustments.

```typescript
<MicrophoneWaveform active={isListening} sensitivity={1.5} />
```

--------------------------------

### Basic Voice Picker Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-picker.mdx

Demonstrates the basic usage of the VoicePicker component with a predefined list of voices. Ensure you have the `useState` hook imported if using React.

```tsx
import { ElevenLabs } from "@elevenlabs/elevenlabs-js"
import { useState } from "react"

const voices: ElevenLabs.Voice[] = [
  {
    voice_id: "21m00Tcm4TlvDq8ikWAM",
    name: "Rachel",
    preview_url: "https://example.com/rachel-preview.mp3",
    // ... other voice properties
  },
  // ... more voices
]

const [selectedVoice, setSelectedVoice] = useState("")

<VoicePicker
  voices={voices}
  value={selectedVoice}
  onValueChange={setSelectedVoice}
/>
```

--------------------------------

### Audio Player with Multiple Tracks

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Implement an audio player that can play multiple tracks, displaying track titles and allowing selection.

```typescript
const tracks = [
  { id: "1", src: "/audio/track1.mp3", data: { title: "Track 1" } },
  { id: "2", src: "/audio/track2.mp3", data: { title: "Track 2" } },
  { id: "3", src: "/audio/track3.mp3", data: { title: "Track 3" } },
]

<AudioPlayerProvider>
  <div className="space-y-4">
    {tracks.map((track) => (
      <div key={track.id} className="flex items-center gap-4">
        <AudioPlayerButton item={track} />
        <span className="text-sm">{track.data.title}</span>
      </div>
    ))}
    <AudioPlayerProgress className="w-full" />
    <div className="flex gap-2 text-sm">
      <AudioPlayerTime />
      <span>/
      <AudioPlayerDuration />
    </div>
  </div>
</AudioPlayerProvider>

```

--------------------------------

### Matrix Component with VU Meter Pattern

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Renders a 7x5 matrix using the vu() helper function to create VU meter frames. Requires importing the Matrix component and the vu function.

```tsx
import { Matrix, vu } from "@/components/ui/matrix"

export default () => {
  const levels = [0.3, 0.6, 0.9, 0.7, 0.5]
  return <Matrix rows={7} cols={5} pattern={vu(5, levels)} />
}
```

--------------------------------

### useMultibandVolume Hook

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/bar-visualizer.mdx

A hook to track volume across multiple frequency bands for visualization purposes.

```APIDOC
## useMultibandVolume Hook

### Description
Track volume across multiple frequency bands for visualization.

### Parameters

#### `mediaStream`
- **Type**: `MediaStream | null`
- **Description**: The audio stream to analyze.

#### `options`
- **Type**: `MultiBandVolumeOptions`
- **Description**: Band count, frequency range, interval.
```

--------------------------------

### Basic MicSelector Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/mic-selector.mdx

Render the MicSelector component for basic microphone selection.

```typescript
<MicSelector />

```

--------------------------------

### Basic Conversation Bar Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/conversation-bar.mdx

Implement the ConversationBar component with essential props for agent connection and event handling.

```tsx
<ConversationBar
  agentId="your-agent-id"
  onConnect={() => console.log("Connected")}
  onDisconnect={() => console.log("Disconnected")}
  onMessage={(message) => console.log("Message:", message)}
  onError={(error) => console.error("Error:", error)}
/>

```

--------------------------------

### Import Message Components

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/message.mdx

Import the necessary components for rendering messages.

```typescript
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"

```

--------------------------------

### Display VU Meter with Matrix

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Configure the Matrix component to act as a VU meter by setting the mode to 'vu' and providing live levels.

```typescript
<Matrix
  rows={7}
  cols={12}
  mode="vu"
  levels={[0.1, 0.6, 0.9, 0.7, 0.4, 0.8, 0.5, 0.3, 0.6, 0.9, 0.5, 0.2]}
/>
```

--------------------------------

### LiveMicrophoneWaveform Configuration

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/waveform.mdx

Configure LiveMicrophoneWaveform for advanced microphone visualization, including recording history and playback scrubbing. Control active recording state and playback options.

```tsx
<LiveMicrophoneWaveform
  active={isRecording}
  enableAudioPlayback={true}
  playbackRate={1}
/>
```

--------------------------------

### Import Speech Input Components

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Import the necessary components for Speech Input functionality.

```tsx
import {
  SpeechInput,
  SpeechInputCancelButton,
  SpeechInputPreview,
  SpeechInputRecordButton,
} from "@/components/ui/speech-input"

```

--------------------------------

### Import Matrix Component

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Import necessary components and utilities for the Matrix component.

```typescript
import { digits, loader, Matrix, vu, wave } from "@/components/ui/matrix"
```

--------------------------------

### Using the useAudioDevices Hook

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/mic-selector.mdx

Access available audio devices, loading state, errors, and permission status using the useAudioDevices hook.

```typescript
import { useAudioDevices } from "@/components/ui/mic-selector"

const { devices, loading, error, hasPermission, loadDevices } = useAudioDevices()

// Access available microphones
devices.map((device) => console.log(device.label, device.deviceId))

```

--------------------------------

### Update Component Registry

Source: https://github.com/elevenlabs/ui/blob/main/CONTRIBUTING.md

After adding or modifying components, run this command to update the component registry. This is a required step before committing changes.

```bash
pnpm build:registry
```

--------------------------------

### Basic LiveWaveform Usage

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/live-waveform.mdx

Render the LiveWaveform component with active microphone input enabled.

```tsx
<LiveWaveform active={true} />

```

--------------------------------

### Minimal Speech Input (Record Button Only)

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Shows a minimal SpeechInput configuration using only the record button.

```tsx
<SpeechInput
  getToken={getToken}
  onStop={(data) => console.log(data.transcript)>
  <SpeechInputRecordButton />
</SpeechInput>

```

--------------------------------

### LiveWaveform Static Mode

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/live-waveform.mdx

Configure the LiveWaveform component to use static visualization mode.

```tsx
<LiveWaveform active={true} mode="static" />

```

--------------------------------

### Add Scrub Bar Component via CLI

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/scrub-bar.mdx

Use this command to add the scrub-bar component to your project using the ElevenLabs CLI.

```bash
npx @elevenlabs/cli@latest components add scrub-bar
```

--------------------------------

### Render Basic Orb Component

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/orb.mdx

Render the Orb component with its default settings.

```tsx
<Orb />

```

--------------------------------

### Custom Audio Player Controls

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Implements custom playback controls using the useAudioPlayer hook. Allows play/pause, restart, seeking to a specific point, and adjusting playback speed.

```tsx
function CustomAudioPlayer() {
  const { play, pause, isPlaying, seek, duration, setPlaybackRate } = 
    useAudioPlayer()

  return (
    <div className="space-y-4">
      <button onClick={() => (isPlaying ? pause() : play())}>
        {isPlaying ? "Pause" : "Play"}
      </button>

      <button onClick={() => seek(0)}>Restart</button>

      <button onClick={() => duration && seek(duration * 0.5)}>
        Jump to 50%
      </button>

      <button onClick={() => setPlaybackRate(1.5)}>Speed 1.5x</button>
    </div>
  )
}
```

--------------------------------

### Voice Button with Label and Shortcut

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/voice-button.mdx

Configure the VoiceButton with a custom label and a keyboard shortcut for accessibility and user experience.

```typescript
<VoiceButton
  state="idle"
  label="Press to speak"
  trailing="⌥Space"
  onPress={() => console.log("Button pressed")}
/>
```

--------------------------------

### Orb Component with Audio Reactivity

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/orb.mdx

Configure the Orb component to react to input and output audio volumes using custom getter functions.

```tsx
function AudioReactiveOrb() {
  const getInputVolume = () => {
    // Return normalized volume between 0 and 1
    return 0.5
  }

  const getOutputVolume = () => {
    // Return normalized volume between 0 and 1
    return 0.7
  }

  return (
    <Orb getInputVolume={getInputVolume} getOutputVolume={getOutputVolume} />
  )
}

```

--------------------------------

### Audio Player with Specific Track

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

Configure the audio player to play a specific track by providing its source and metadata.

```typescript
const track = {
  id: "track-1",
  src: "/audio/song.mp3",
  data: { title: "My Song", artist: "Artist Name" }
}

<AudioPlayerProvider>
  <AudioPlayerButton item={track} />
  <AudioPlayerProgress />
</AudioPlayerProvider>

```

--------------------------------

### Matrix Component with Wave Animation

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Renders a 7x7 matrix with a smooth sine wave animation. Requires importing the Matrix component and the wave animation frames.

```tsx
import { Matrix, wave } from "@/components/ui/matrix"

export default () => <Matrix rows={7} cols={7} frames={wave} fps={20} />
```

--------------------------------

### AudioPlayerProvider Component

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/audio-player.mdx

The root provider component for managing audio state. It must wrap all other audio player components.

```typescript
<AudioPlayerProvider>{children}</AudioPlayerProvider>

```

--------------------------------

### Matrix Component with Snake Animation

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/matrix.mdx

Renders a 7x7 matrix with a snake traversal pattern. Requires importing the Matrix component and the snake animation frames.

```tsx
import { Matrix, snake } from "@/components/ui/matrix"

export default () => <Matrix rows={7} cols={7} frames={snake} fps={15} />
```

--------------------------------

### Import LiveWaveform Component

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/live-waveform.mdx

Import the LiveWaveform component into your React application.

```tsx
import { LiveWaveform } from "@/components/ui/live-waveform"

```

--------------------------------

### SpeechInput Component Props

Source: https://github.com/elevenlabs/ui/blob/main/apps/www/content/docs/components/speech-input.mdx

Configuration options for the main SpeechInput component.

```APIDOC
## SpeechInput Component Props

### Description
Configuration options for the main SpeechInput component.

### Props

#### `children`
- **Type**: `ReactNode`
- **Description**: Child components (record button, preview, cancel)

#### `getToken`
- **Type**: `() => Promise<string>`
- **Description**: Function to fetch ElevenLabs Scribe token

#### `onChange`
- **Type**: `(data: SpeechInputData) => void`
- **Description**: Called when transcript changes

#### `onStart`
- **Type**: `(data: SpeechInputData) => void`
- **Description**: Called when recording starts

#### `onStop`
- **Type**: `(data: SpeechInputData) => void`
- **Description**: Called when recording stops

#### `onCancel`
- **Type**: `(data: SpeechInputData) => void`
- **Description**: Called when recording is cancelled

#### `onError`
- **Type**: `(error: Error | Event) => void`
- **Description**: Called on connection errors

#### `onAuthError`
- **Type**: `(data: { error: string }) => void`
- **Description**: Called on authentication errors

#### `onQuotaExceededError`
- **Type**: `(data: { error: string }) => void`
- **Description**: Called when quota is exceeded

#### `modelId`
- **Type**: `string`
- **Default**: `"scribe_v2_realtime"`
- **Description**: ElevenLabs model ID

#### `baseUri`
- **Type**: `string`
- **Description**: Custom WebSocket base URI

#### `commitStrategy`
- **Type**: `CommitStrategy`
- **Default**: `"vad"`
- **Description**: How transcripts are committed (`"manual"` or `"vad"`)

#### `vadSilenceThresholdSecs`
- **Type**: `number`
- **Description**: VAD silence threshold (0.3-3.0)

#### `vadThreshold`
- **Type**: `number`
- **Description**: VAD threshold (0.1-0.9)

#### `minSpeechDurationMs`
- **Type**: `number`
- **Description**: Minimum speech duration (50-2000ms)

#### `minSilenceDurationMs`
- **Type**: `number`
- **Description**: Minimum silence duration (50-2000ms)

#### `languageCode`
- **Type**: `string`
- **Description**: ISO-639-1/3 language code

#### `microphone`
- **Type**: `MicrophoneOptions`
- **Description**: Microphone configuration

#### `audioFormat`
- **Type**: `AudioFormat`
- **Description**: Audio format for manual streaming

#### `sampleRate`
- **Type**: `number`
- **Description**: Sample rate for manual streaming

#### `className`
- **Type**: `string`
- **Description**: Optional CSS classes

### Default Microphone Options
```tsx
{
  echoCancellation: true,
  noiseSuppression: true
}
```
```