ElevenLabs UI

https://ui.elevenlabs.io/docs
Admin
ElevenLabs UI is a component library and custom registry built on shadcn/ui, providing pre-built...
Tokens:32,902
Snippets:273
Trust Score:10
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Response Component via CLI

Source: https://ui.elevenlabs.io/docs/components/response

Installs the Response component into your project using the ElevenLabs CLI. This is a quick way to add the component without manual setup.

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

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

### Add Orb Component using shadcn/ui CLI

Source: https://ui.elevenlabs.io/docs/setup

Installs the 'orb' component by referencing its URL via the shadcn/ui CLI. This method is suitable if you already use shadcn/ui in your project. It requires Node.js and a Next.js project.

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

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

### Install Audio Player Dependencies (Manual)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Installs the necessary dependencies for the audio player component when performing a manual installation. Requires npm or yarn.

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

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

### Install Orb Component via CLI

Source: https://ui.elevenlabs.io/docs/components/orb

Installs the Orb component into your project using the ElevenLabs CLI. This is a quick way to add the component without manual setup.

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

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

### Install Conversation Component Dependencies (Manual)

Source: https://ui.elevenlabs.io/docs/components/conversation

Manually installs the 'use-stick-to-bottom' dependency required for the Conversation component's scrolling behavior. This is part of the manual installation process.

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

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

### Install Voice Picker Dependencies Manually

Source: https://ui.elevenlabs.io/docs/components/voice-picker

Manually installs the necessary npm dependency for the voice picker component. This is typically part of a manual setup process.

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

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

### Install Bar Visualizer via CLI

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Installs the Bar Visualizer component using the ElevenLabs CLI. This is a quick way to add the component to your project.

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

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

### Install Audio Player Component via CLI

Source: https://ui.elevenlabs.io/docs/components/audio-player

Installs the audio player component using the ElevenLabs CLI. This is the quickest way to add the component to your project.

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

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

### Install Shimmering Text CLI

Source: https://ui.elevenlabs.io/docs/components/shimmering-text

Installs the shimmering-text component using the ElevenLabs CLI. This is the recommended method for adding the component to your project.

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

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

### Install Transcript Viewer via CLI

Source: https://ui.elevenlabs.io/docs/components/transcript-viewer

Installs the Transcript Viewer component using the Eleven Labs CLI. This is the recommended method for quick integration.

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

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

### Advanced Player with Speed Control (TSX)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Demonstrates a fully functional audio player setup with integrated speed control. This example shows how to combine various player components like buttons, time display, progress bar, duration, and speed selection within an AudioPlayerProvider context.

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

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

### Basic Audio Player Setup (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Renders a basic audio player with play/pause button, progress bar, current time, and total duration. Requires AudioPlayerProvider to manage state.

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

```

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

### Install Voice Picker via CLI

Source: https://ui.elevenlabs.io/docs/components/voice-picker

Installs the voice picker component using the ElevenLabs CLI. This is a quick way to add the component to your project.

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

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

### Install Matrix Component via CLI

Source: https://ui.elevenlabs.io/docs/components/matrix

Installs the Matrix component using the Elevenlabs CLI. This is a quick method for adding the component to your project.

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

```

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

### Install Speech Input Dependencies and Code (Manual)

Source: https://ui.elevenlabs.io/docs/components/speech-input

Manually installs necessary dependencies (motion, lucide-react) and provides the component source code and hook for integration into your project. Ensure to update import paths as needed.

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

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

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

```tsx
import { useState } from "react"

export default function Example() {
  const [value, setValue] = useState("")

  return (
    <div className="flex items-center gap-2">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="flex-1 rounded border px-3 py-2"
      />
      <SpeechInput
        getToken={getToken}
        onStop={(data) => setValue((prev) => prev + " " + data.transcript)>
        <SpeechInputRecordButton />
        <SpeechInputPreview />
        <SpeechInputCancelButton />
      </SpeechInput>
    </div>
  )
}
```

```tsx
<SpeechInput getToken={getToken}>
  <SpeechInputCancelButton />
  <SpeechInputPreview />
  <SpeechInputRecordButton />
</SpeechInput>
```

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

```tsx
<SpeechInput getToken={getToken}>
  <SpeechInputRecordButton />
  <SpeechInputPreview placeholder="Say something..." />
  <SpeechInputCancelButton />
</SpeechInput>
```

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

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

### Install Live Waveform Component (CLI)

Source: https://ui.elevenlabs.io/docs/components/live-waveform

Installs the Live Waveform component using the Eleven Labs CLI. This is the quickest method for integrating the component into your project.

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

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

### Install Shimmering Text Dependencies

Source: https://ui.elevenlabs.io/docs/components/shimmering-text

Manually installs the 'motion' dependency required for the shimmering-text component. This is part of the manual installation process.

```bash
npm install motion
```

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

### Install Voice Button Component via CLI

Source: https://ui.elevenlabs.io/docs/components/voice-button

Installs the Voice Button component into your project using the ElevenLabs CLI. This is a quick way to add the component to your existing project.

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

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

### Import and Use ElevenLabs UI Components in React

Source: https://ui.elevenlabs.io/docs/usage

Demonstrates how to import and use ElevenLabs UI components (`Card`, `Orb`) in a React application. This example assumes the components are installed and available at the specified paths. The code renders a `Card` containing an `Orb` component, centered within the card.

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

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

### Install Speech Input Component via CLI

Source: https://ui.elevenlabs.io/docs/components/speech-input

Installs the Speech Input component using the ElevenLabs CLI. This is the quickest way to add the component to your project.

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

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

### Install Scrub Bar Component via CLI

Source: https://ui.elevenlabs.io/docs/components/scrub-bar

Use the ElevenLabs CLI to add the scrub-bar component to your project. This is the recommended method for quick integration.

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

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

### Install Conversation Component via CLI

Source: https://ui.elevenlabs.io/docs/components/conversation

Installs the Conversation component using the ElevenLabs CLI. This is a quick way to add the component to your project.

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

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

### Voice Button Auto-transitioning States Example

Source: https://ui.elevenlabs.io/docs/components/voice-button

Provides an example of implementing auto-transitioning states for the Voice Button component in React. It simulates an API call and automatically returns the button to the idle state after a delay.

```typescript
import { useState } from "react"

import {
  VoiceButton,
  type VoiceButtonState,
} from "@/components/ui/voice-button"

export default () => {
  const [state, setState] = useState<VoiceButtonState>("idle")

  const handlePress = () => {
    if (state === "idle") {
      setState("recording")
    } else if (state === "recording") {
      setState("processing")
      // Simulate API call
      setTimeout(() => {
        setState("success")
        // Auto-return to idle after feedback
      }, 2000)
    }
  }

  return <VoiceButton state={state} onPress={handlePress} />
}

```

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

### Install Message Component via CLI

Source: https://ui.elevenlabs.io/docs/components/message

Installs the Message component using the ElevenLabs CLI. This is the quickest way to add the component to your project.

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

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

### Multiple Tracks Playlist Example (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Implements a playlist functionality where multiple tracks can be displayed and played using the AudioPlayerButton. Each track has a play button and its title displayed.

```tsx
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>

```

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

### Install Conversation Bar using CLI

Source: https://ui.elevenlabs.io/docs/components/conversation-bar

Install the Conversation Bar component using the ElevenLabs CLI. This is a quick way to add the component to your project.

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

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

### Install Mic Selector via CLI

Source: https://ui.elevenlabs.io/docs/components/mic-selector

Installs the Mic Selector component using the Eleven Labs CLI. This is a quick way to add the component to your project.

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

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

### Install Streamdown Dependency for Response Component

Source: https://ui.elevenlabs.io/docs/components/response

Manually installs the 'streamdown' npm package, which is a required dependency for the Response component to handle streaming markdown rendering.

```bash
npm install streamdown
```

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

### useAudioVolume Hook Usage (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Demonstrates how to use the `useAudioVolume` hook to get the overall volume level from a media stream. It accepts optional `AudioAnalyserOptions` to configure the analysis.

```tsx
const volume = useAudioVolume(mediaStream, {
  fftSize: 32,
  smoothingTimeConstant: 0,
})

```

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

### Install Orb Component Dependencies

Source: https://ui.elevenlabs.io/docs/components/orb

Installs the necessary npm dependencies for the Orb component, including React Three Fiber, Drei, and Three.js. These are essential for rendering the 3D orb.

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

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

### Voice Button Component Different States

Source: https://ui.elevenlabs.io/docs/components/voice-button

Demonstrates the various states of the Voice Button component, including idle, recording, processing, success, and error feedback. This example shows how to render each state.

```typescript
import { VoiceButton } from "@/components/ui/voice-button"

export default () => (
  <>
    {/* Idle state */}
    <VoiceButton state="idle" />

    {/* Recording with waveform */}
    <VoiceButton state="recording" />

    {/* Processing */}
    <VoiceButton state="processing" />

    {/* Success feedback */}
    <VoiceButton state="success" />

    {/* Error feedback */}
    <VoiceButton state="error" />
  </>
)

```

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

### Music Player Visualization Example

Source: https://ui.elevenlabs.io/docs/components/waveform

Demonstrates using the AudioScrubber component to visualize music player audio data. It shows how to provide audio data, current playback time, duration, and handle seek events. Uses React's useState hook for managing audio data.

```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))"
    />
  )
}
```

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

### BarVisualizer Component API (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Shows an example of the BarVisualizer component with a speaking state and a media stream. This illustrates how to pass props to control the visualizer's behavior and appearance.

```tsx
<BarVisualizer state="speaking" mediaStream={stream} />

```

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

### Custom Audio Player Controls (TSX)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Illustrates how to build custom controls for the audio player using the useAudioPlayer hook. This example shows buttons for play/pause, restart, seeking to a specific point in the track, and adjusting playback speed programmatically.

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

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

### Conversation Bar Usage

Source: https://ui.elevenlabs.io/docs/components/conversation-bar

Examples demonstrating how to integrate the Conversation Bar component into your project, including basic and custom styled implementations.

```APIDOC
## Conversation Bar Usage Examples

### Basic Usage

```tsx
import { ConversationBar } from "@/components/ui/conversation-bar"

<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)}
/>
```

### With Custom Styling

```tsx
<ConversationBar
  agentId="your-agent-id"
  className="max-w-2xl"
  waveformClassName="bg-gradient-to-r from-blue-500 to-purple-500"
  onConnect={() => console.log("Connected")}
/>
```
```

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

### Matrix Component Frame Example - Smiley

Source: https://ui.elevenlabs.io/docs/components/matrix

Provides an example of a 'Frame' definition for a smiley face pattern on a 5x5 grid, illustrating the use of brightness values (0-1) for each cell.

```typescript
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],
]

```

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

### Install Conversation Bar Dependencies

Source: https://ui.elevenlabs.io/docs/components/conversation-bar

Manually install the necessary npm dependency for the Conversation Bar component. This includes the core ElevenLabs React package.

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

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

### Voice Recorder Example

Source: https://ui.elevenlabs.io/docs/components/waveform

Illustrates setting up a voice recorder using the RecordingWaveform component. It includes a button to toggle recording and logs the recorded waveform data upon completion. Uses React's useState hook to manage the recording state.

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

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

### Matrix Component VU Meter Example

Source: https://ui.elevenlabs.io/docs/components/matrix

Renders a Matrix component in VU meter mode, displaying audio levels across a specified number of columns. The 'levels' prop takes an array of numbers between 0 and 1.

```tsx
<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]}
/>

```

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

### Matrix Component Static Pattern Example

Source: https://ui.elevenlabs.io/docs/components/matrix

Renders a static Matrix component displaying a predefined pattern, specifically 'digits[5]', with specified rows and columns. Includes an ARIA label for accessibility.

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

```

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

### Use Scrub Bar Component in React Application

Source: https://ui.elevenlabs.io/docs/components/scrub-bar

Demonstrates how to use the Scrub Bar component within a React application. It shows the basic setup with state management for the scrub bar's value and duration.

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

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

### Import Audio Player Components (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Imports all necessary components and hooks from the audio player library. This setup is required before using any audio player elements in your React application.

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

```

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

### Matrix Component Animated Display Example

Source: https://ui.elevenlabs.io/docs/components/matrix

Renders an animated Matrix component using a sequence of frames ('wave') with a specified frames per second (fps) and loop enabled. Includes an ARIA label for accessibility.

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

```

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

### Integrating Response with Message Component (React)

Source: https://ui.elevenlabs.io/docs/components/response

Demonstrates how to integrate the Response component within a Message component, typically used for chat interfaces. This example shows an assistant's response being rendered by the Response component.

```tsx
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"
import { Response } from "@/components/ui/response"

export default ({ streamingResponse }) => (
  <Message from="assistant">
    <MessageAvatar src="/ai-avatar.jpg" name="AI" />
    <MessageContent>
      <Response>{streamingResponse}</Response>
    </MessageContent>
  </Message>
)
```

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

### Basic Voice Picker Usage with Static Voices

Source: https://ui.elevenlabs.io/docs/components/voice-picker

Shows a basic example of using the VoicePicker component with a predefined list of voices. It utilizes React's useState hook to manage the selected voice.

```tsx
import { VoicePicker } from "@/components/ui/voice-picker"
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}
/>

```

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

### Fetch Voices from ElevenLabs API for Voice Picker

Source: https://ui.elevenlabs.io/docs/components/voice-picker

Provides an example of fetching voices dynamically from the ElevenLabs API using the `@elevenlabs/elevenlabs-js` client and populating the VoicePicker. It uses `useState` and `useEffect` hooks for data fetching and state management.

```tsx
import { VoicePicker } from "@/components/ui/voice-picker"
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}
/>

```

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

### useMultibandVolume Hook Usage (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Illustrates the use of the `useMultibandVolume` hook for tracking volume across different frequency bands. This is useful for creating visualizations that respond to specific audio frequencies.

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

```

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

### useMultibandVolume Hook API

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

The `useMultibandVolume` hook analyzes an audio stream across multiple frequency bands, returning volume data for each band.

```APIDOC
## useMultibandVolume Hook

### Description
Track volume across multiple frequency bands for visualization. This hook is useful for creating visualizations that react to different parts of the audio spectrum.

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

### Parameters
#### Hook Parameters
- **mediaStream** (`MediaStream | null`) - Required - The audio stream to analyze. Can be `null` to disable analysis.
- **options** (`MultiBandVolumeOptions`) - Optional - Configuration options for the multi-band analysis. Includes `bands` (number of frequency bands), `loPass` (low-pass frequency cutoff), `hiPass` (high-pass frequency cutoff), and `updateInterval` (interval for updating band volumes).
```

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

### Retro Display Example: TSX Matrix Component

Source: https://ui.elevenlabs.io/docs/components/matrix

A React component demonstrating a retro display effect using the Matrix component with the 'wave' animation. It includes custom styling, size, gap, and a specific color palette for 'on' and 'off' states. This example requires the Matrix component and wave frames.

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

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

### Response Component Basic Usage (React)

Source: https://ui.elevenlabs.io/docs/components/response

Demonstrates the basic usage of the Response component in a React application. It renders simple text content passed as children.

```tsx
import { Response } from "@/components/ui/response"

<Response>This is a simple text response.</Response>
```

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

### Enable Audio Reactivity for Orb Component

Source: https://ui.elevenlabs.io/docs/components/orb

Illustrates how to make the Orb component react to audio input and output volumes. By providing `getInputVolume` and `getOutputVolume` functions, the orb's visuals can dynamically change with sound levels.

```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} />
  )
}
```

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

### ShimmeringText Trigger on Viewport

Source: https://ui.elevenlabs.io/docs/components/shimmering-text

Configures the ShimmeringText component to start its animation when it enters the viewport. The 'startOnView' prop enables this, and 'once' ensures the animation plays only a single time.

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

```

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

### Import and Use Orb Component

Source: https://ui.elevenlabs.io/docs/components/orb

Demonstrates how to import the Orb component into your React application and render it. This is the basic usage of the component.

```tsx
import { Orb } from "@/components/ui/orb"

<Orb />
```

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

### Message Component in Conversation (React)

Source: https://ui.elevenlabs.io/docs/components/message

Shows how to integrate the Message component within a larger conversation structure using the Conversation and ConversationContent components. This example maps an array of messages to render a chat history.

```tsx
import { Conversation, ConversationContent } from "@/components/ui/conversation"
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"

export default ({ messages }) => (
  <Conversation>
    <ConversationContent>
      {messages.map((message) => (
        <Message key={message.id} from={message.from}>
          <MessageAvatar src={message.avatarUrl} name={message.name} />
          <MessageContent>{message.content}</MessageContent>
        </Message>
      ))}
    </ConversationContent>
  </Conversation>
)
```

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

### Basic Conversation Component Usage (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/conversation

Illustrates the fundamental usage of the Conversation component, rendering a list of messages within ConversationContent and including a ConversationScrollButton. This example assumes a 'messages' array is defined elsewhere.

```tsx
<Conversation>
  <ConversationContent>
    {messages.map((message) => (
      <div key={message.id}>{message.content}</div>
    ))}
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>

```

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

### Basic Bar Visualizer Usage (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Renders a basic BarVisualizer component with a specified number of bars and a media stream. This demonstrates the core functionality of displaying audio frequencies.

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

```

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

### Manually Add Scrub Bar Component Files

Source: https://ui.elevenlabs.io/docs/components/scrub-bar

Provides instructions and the source code for manually adding the scrub-bar component to your project. Ensure to update import paths as needed.

```typescript
/* This is a placeholder for the actual component source code which would be fetched from the ComponentSource component. */
// Example structure:
// // components/ui/scrub-bar.tsx
// import * as React from "react"
// 
// export function ScrubBarContainer(...) { ... }
// export function ScrubBarTrack(...) { ... }
// export function ScrubBarProgress(...) { ... }
// export function ScrubBarThumb(...) { ... }
// export function ScrubBarTimeLabel(...) { ... }

```

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

### Matrix Component API Basic Usage

Source: https://ui.elevenlabs.io/docs/components/matrix

Demonstrates the basic instantiation of the Matrix component with specified rows, columns, and an animation frames array, including frames per second.

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

```

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

### LiveWaveform Component API Reference

Source: https://ui.elevenlabs.io/docs/components/live-waveform

Reference for the LiveWaveform component, detailing its available props, their types, default values, and descriptions.

```APIDOC
## LiveWaveform Component API Reference

### Description
A canvas-based real-time audio visualizer with microphone input support.

### Props

| Prop                  | Type                            | Default    | Description                                    |
| --------------------- | ------------------------------- | ---------- | ---------------------------------------------- |
| active                | `boolean`                       | `false`    | Whether to actively listen to microphone input |
| processing            | `boolean`                       | `false`    | Show processing animation when not active      |
| barWidth              | `number`                        | `3`        | Width of each bar in pixels                    |
| barHeight             | `number`                        | `4`        | Height of each bar in pixels                   |
| barGap                | `number`                        | `1`        | Gap between bars in pixels                     |
| barRadius             | `number`                        | `1.5`      | Border radius of bars                          |
| barColor              | `string`                        | -          | Color of the bars (defaults to text color)     |
| fadeEdges             | `boolean`                       | `true`     | Whether to fade the edges of the waveform      |
| fadeWidth             | `number`                        | `24`       | Width of the fade effect in pixels             |
| height                | `string \| number`              | `64`       | Height of the waveform                         |
| sensitivity           | `number`                        | `1`        | Audio sensitivity multiplier                   |
| smoothingTimeConstant | `number`                        | `0.8`      | Audio analyser smoothing (0-1)                 |
| fftSize               | `number`                        | `256`      | FFT size for audio analysis                    |
| historySize           | `number`                        | `60`       | Number of bars to keep in history (scrolling)  |
| updateRate            | `number`                        | `30`       | Update rate in milliseconds                    |
| mode                  | `"scrolling" \| "static"`       | `"static"` | Visualization mode                             |
| onError               | `(error: Error) => void`        | -          | Error callback                                 |
| onStreamReady         | `(stream: MediaStream) => void` | -          | Callback when stream is ready                  |
| onStreamEnd           | `() => void`                    | -          | Callback when stream ends                      |
| className             | `string`                        | -          | Custom CSS class                               |
| ...props              | `HTMLDivElement`                | -          | All standard div element props                 |
```

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

### Play Specific Track with Audio Player (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/audio-player

Demonstrates how to play a specific audio track using the AudioPlayerButton component by passing the track object. Includes a progress bar for the selected track.

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

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

```

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

### Audio Level Meter Example: TSX Matrix Component

Source: https://ui.elevenlabs.io/docs/components/matrix

Visualizes audio frequency data as an audio level meter using the Matrix component in 'vu' mode. It maps frequency data to levels and configures the grid dimensions, size, and gap. Requires the Matrix component.

```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"
    />
  )
}
```

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

### Voice Button with Label and Keyboard Shortcut

Source: https://ui.elevenlabs.io/docs/components/voice-button

Illustrates how to configure the Voice Button with a custom label and a keyboard shortcut for accessibility and ease of use. The `trailing` prop specifies the shortcut display.

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

```

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

### Custom Heart Pattern Example: TSX Matrix Component

Source: https://ui.elevenlabs.io/docs/components/matrix

Defines and displays a custom heart pattern using the Matrix component. The 'heartPattern' is defined as a 2D array, and the Matrix component is configured with specific dimensions, size, gap, and a custom color palette. Requires the Matrix component and a 'Frame' type definition.

```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%)",
      }}
    />
  )
}
```

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

### useAudioVolume Hook API

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

The `useAudioVolume` hook provides the overall volume level from a given audio stream, with configurable analysis options.

```APIDOC
## useAudioVolume Hook

### Description
Get the overall volume level from an audio stream. This hook analyzes the audio stream and returns a value representing the current volume.

### Usage
```tsx
const volume = useAudioVolume(mediaStream, {
  fftSize: 32,
  smoothingTimeConstant: 0,
})
```

### Parameters
#### Hook Parameters
- **mediaStream** (`MediaStream | null`) - Required - The audio stream to analyze. Can be `null` to disable analysis.
- **options** (`AudioAnalyserOptions`) - Optional - Configuration options for the audio analysis. Includes `fftSize` (size of the FFT window), `smoothingTimeConstant` (smoothing applied to the volume data), and `dbRange` (the range of decibels to map).
```

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

### Matrix Component Preset - Pulse

Source: https://ui.elevenlabs.io/docs/components/matrix

Illustrates the use of the 'pulse' preset for an expanding pulse effect on a 7x7 Matrix component, configuring frames and frames per second.

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

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

```

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

### Digital Clock Digit Example: TSX Matrix Component

Source: https://ui.elevenlabs.io/docs/components/matrix

Renders a single digit for a digital clock using the Matrix component. It takes a numeric value and uses a predefined pattern ('digits[value]') to display the corresponding digit. Customizes cell size and gap. Dependencies: Matrix component and 'digits' pattern data.

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

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

### useBarAnimator Hook Usage (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Shows how to use the `useBarAnimator` hook to generate animation sequences for the visualizer bars based on different states. It takes the current state, number of columns, and animation interval as arguments.

```tsx
const highlightedIndices = useBarAnimator("connecting", 15, 100)

```

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

### Matrix Component Preset - Loader

Source: https://ui.elevenlabs.io/docs/components/matrix

Shows how to use the 'loader' preset for a rotating spinner animation on a 7x7 Matrix component, specifying frames and frames per second.

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

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

```

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

### Basic ShimmeringText Usage

Source: https://ui.elevenlabs.io/docs/components/shimmering-text

Demonstrates the basic usage of the ShimmeringText component, displaying 'Hello, World!' with the default shimmer effect. No additional props are required for basic functionality.

```tsx
<ShimmeringText text="Hello, World!" />

```

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

### useBarAnimator Hook API

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

The `useBarAnimator` hook generates animation sequences for bars based on the current state, number of columns, and animation interval.

```APIDOC
## useBarAnimator Hook

### Description
Create animation sequences for different states of the visualizer. This hook determines which bars should be highlighted or animated based on the provided state and parameters.

### Usage
```tsx
const highlightedIndices = useBarAnimator("connecting", 15, 100)
```

### Parameters
#### Hook Parameters
- **state** (`AnimationState`) - Required - The current animation state. This determines the animation pattern.
- **columns** (`number`) - Required - The total number of bars in the visualizer.
- **interval** (`number`) - Optional - The interval in milliseconds between animation frames. Defaults to 1000ms.
```

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

### Voice Button as Icon Button

Source: https://ui.elevenlabs.io/docs/components/voice-button

Shows how to render the Voice Button as an icon-only button using the `size="icon"` prop and providing an icon component via the `icon` prop. Requires `lucide-react` for the icon.

```typescript
import { MicIcon } from "lucide-react"

import { VoiceButton } from "@/components/ui/voice-button"

export default () => <VoiceButton state="idle" size="icon" icon={<MicIcon />} />

```

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

### Import Voice Button Component in React

Source: https://ui.elevenlabs.io/docs/components/voice-button

Demonstrates how to import the Voice Button component into a React application. Ensure the import path matches your project structure.

```typescript
import { VoiceButton } from "@/components/ui/voice-button"

```

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

### BarVisualizer Component API

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

The main BarVisualizer component allows for real-time audio frequency visualization. It accepts various props to control its appearance and behavior, including animation states and audio input.

```APIDOC
## BarVisualizer Component

### Description
The main visualizer component that displays animated frequency bars. It can be used to visualize audio streams in real-time or in a demo mode.

### Component
```tsx
<BarVisualizer state="speaking" mediaStream={stream} />
```

### Props
#### Available Props
- **state** (`AgentState`) - Required - The current state of the voice assistant, influencing animations. Possible values: `connecting`, `initializing`, `listening`, `speaking`, `thinking`.
- **barCount** (`number`) - Optional - The number of bars to display. Defaults to 15.
- **mediaStream** (`MediaStream`) - Optional - The audio source for real-time visualization. If not provided, and `demo` is false, no visualization will occur.
- **minHeight** (`number`) - Optional - The minimum height of the bars, expressed as a percentage. Defaults to 20.
- **maxHeight** (`number`) - Optional - The maximum height of the bars, expressed as a percentage. Defaults to 100.
- **demo** (`boolean`) - Optional - If true, enables demo mode with fake audio data for development. Defaults to `false`.
- **centerAlign** (`boolean`) - Optional - If true, aligns bars from the center instead of the bottom. Defaults to `false`.
- **...props** (`HTMLDivElement`) - Optional - All standard HTML div element props are accepted and will be applied to the root element.
```

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

### AudioPlayerProvider API (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/audio-player

The AudioPlayerProvider component is essential for managing the audio player's state, including playback, progress, and track management. It must wrap all other audio player components.

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

```

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

### Import Voice Picker Component

Source: https://ui.elevenlabs.io/docs/components/voice-picker

Demonstrates how to import the VoicePicker component into your TypeScript/React project. Assumes a specific project structure.

```tsx
import { VoicePicker } from "@/components/ui/voice-picker"

```

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

### AudioScrubber Component API

Source: https://ui.elevenlabs.io/docs/components/waveform

Documentation for the AudioScrubber component, enabling interactive audio playback and seeking.

```APIDOC
## AudioScrubber Component

### Description
Interactive waveform for audio playback with seek functionality.

### Method
Component

### Endpoint
N/A

### Parameters
#### Props
- **data** (number[]) - Required - Audio data for the waveform.
- **currentTime** (number) - Required - Current playback time in seconds.
- **duration** (number) - Optional - Total duration in seconds. Default: 100.
- **onSeek** (function) - Optional - Callback when user seeks to a new time.
- **showHandle** (boolean) - Optional - Show draggable handle. Default: true.
- **...props** (WaveformProps) - All standard Waveform props.

### Request Example
```tsx
<AudioScrubber
  data={waveformData}
  currentTime={playbackTime}
  duration={totalDuration}
  onSeek={handleSeek}
/>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### Import Bar Visualizer Components and Hooks (TypeScript)

Source: https://ui.elevenlabs.io/docs/components/bar-visualizer

Imports the main BarVisualizer component and related hooks for audio analysis and animation. These are essential for integrating the visualizer into your application.

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

```

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

### Matrix Component Preset - Digits

Source: https://ui.elevenlabs.io/docs/components/matrix

Demonstrates using the 'digits' preset to display a number (specifically the 5th digit) on a 7x5 Matrix component. Imports 'digits' and 'Matrix' from the component.

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

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

```
Tokens:
Raw