MCPcopy Index your code
hub / github.com/elevenlabs/ui

github.com/elevenlabs/ui @v1.0.0

Chat with this repo
repository ↗ · DeepWiki ↗ · release v1.0.0 ↗ · + Follow
566 symbols 1,441 edges 198 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

elevenlabs-ui

II ElevenLabs UI

ElevenLabs UI is a component library built on top of shadcn/ui to help you build audio & agentic applications faster.

Overview

ElevenLabs UI provides pre-built, customizable React components specifically designed for agent & audio applications, including orbs, waveforms, voice agents, audio players, and more. The CLI makes it easy to add these components to your Next.js project.

Installation

You can use the ElevenLabs Agents CLI directly with npx, or install it globally:

# Use directly (recommended)
npx @elevenlabs/agents-cli@latest components add <component-name>

# Or using shadcn cli
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json

Prerequisites

Before using ElevenLabs UI, ensure your Next.js project meets these requirements: - Node.js 18 or later - shadcn/ui initialized in your project (npx shadcn@latest init) - Tailwind CSS configured

Usage

Install All Components

Install all available ElevenLabs UI components at once:

npx @elevenlabs/agents-cli@latest components add all

This command will: - Set up shadcn/ui if not already configured - Install all ElevenLabs UI components to your configured components directory - Add necessary dependencies to your project

Install Specific Components

Install individual components using the components add command:

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

Examples:

# Install the orb component
npx @elevenlabs/agents-cli@latest components add orb

Alternative: Use with shadcn CLI

You can also install components using the standard shadcn/ui CLI:

# Install all components
npx shadcn@latest add https://ui.elevenlabs.io/r/all.json

# Install a specific component
npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json

All available components can be found here or explore a list of example components here.

Contributing

If you'd like to contribute to ElevenLabs UI, please follow these steps:

  1. Fork the repository
  2. Create a new branch
  3. Make your changes to the components in the registry.
  4. Open a PR to the main branch.

Please read the contributing guide.

License

Licensed under the MIT license.

Engineered by ElevenLabs.

Extension points exported contracts — how you extend this code

RecordingState (Interface)
(no doc)
apps/www/registry/elevenlabs-ui/blocks/transcriber-01/page.tsx
TranscriptionResult (Interface)
(no doc)
apps/www/registry/elevenlabs-ui/blocks/transcriber-01/actions/transcribe.ts
ChatMessage (Interface)
(no doc)
apps/www/registry/elevenlabs-ui/blocks/voice-chat-01/page.tsx
Track (Interface)
(no doc)
apps/www/registry/elevenlabs-ui/blocks/music-player-01/page.tsx
ChatMessage (Interface)
(no doc)
apps/www/registry/elevenlabs-ui/blocks/voice-chat-03/page.tsx

Core symbols most depended-on inside this repo

cn
called by 278
apps/www/registry/elevenlabs-ui/lib/utils.ts
cn
called by 73
apps/www/lib/utils.ts
useAudioPlayer
called by 13
apps/www/registry/elevenlabs-ui/ui/audio-player.tsx
clamp01
called by 9
apps/www/registry/elevenlabs-ui/ui/orb.tsx
useBlockViewer
called by 8
apps/www/components/block-viewer.tsx
stopScratchSound
called by 5
apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
useSidebar
called by 5
apps/www/registry/elevenlabs-ui/ui/sidebar.tsx
onClick
called by 5
apps/www/components/cards/activity-goal.tsx

Shape

Function 532
Interface 26
Method 4
Class 2
Enum 2

Languages

TypeScript100%

Modules by API surface

apps/www/registry/elevenlabs-ui/ui/sidebar.tsx25 symbols
apps/www/registry/elevenlabs-ui/ui/audio-player.tsx23 symbols
apps/www/registry/elevenlabs-ui/ui/waveform.tsx21 symbols
apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx17 symbols
apps/www/registry/elevenlabs-ui/ui/menubar.tsx16 symbols
apps/www/registry/elevenlabs-ui/ui/dropdown-menu.tsx15 symbols
apps/www/registry/elevenlabs-ui/ui/context-menu.tsx15 symbols
apps/www/registry/elevenlabs-ui/ui/bar-visualizer.tsx14 symbols
apps/www/registry/elevenlabs-ui/ui/alert-dialog.tsx11 symbols
apps/www/components/block-viewer.tsx11 symbols
apps/www/registry/elevenlabs-ui/ui/sheet.tsx10 symbols
apps/www/registry/elevenlabs-ui/ui/select.tsx10 symbols

For agents

$ claude mcp add ui \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page