How elevenlabs/ui works
ElevenLabs UI is a React component library for audio and agent applications, presented through a Next.js catalog and demos. A user can browse the site’s component and block pages, inspect interactive examples, and add components to a project through the documented CLI or shadcn registry. The registry includes reusable audio primitives and larger examples such as radio playback, transcription, voice chat, and voice-driven forms. Edges are limited to relationships visible in excerpts, the source index, or README; unsampled feature wiring is left unspecified.
Main entry points: realtime-transcriber-01/page.tsx Realtime transcriber · (root)/page.tsx Catalog site · component-preview.tsx Component docs · get-scribe-token.ts Scribe token action
Components 19
Catalog and discovery
- Catalog site
apps/www/app/(app)/(root)/page.tsx - Component docs
apps/www/components/component-preview.tsx - Block catalog
apps/www/app/(app)/blocks/page.tsx - Markdown docs
apps/www/app/(app)/llm/[[...slug]]/route.ts
Component registry
- Audio primitives
apps/www/registry/elevenlabs-ui/ui/waveform.tsx
Audio and agent demos
- Radio player
apps/www/app/(app)/radio/components/radio-speaker.tsx - Realtime transcriber
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx - Scribe token action
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts - Language selector
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/components/language-selector.tsx - Voice chat blocks
apps/www/registry/elevenlabs-ui/blocks/voice-chat-01/page.tsx - Voice form block
apps/www/registry/elevenlabs-ui/blocks/voice-form-01/page.tsx - Voice navigation block
apps/www/registry/elevenlabs-ui/blocks/voice-nav-01/page.tsx - Pong game engine
apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts - Game sound manager
apps/www/registry/elevenlabs-ui/blocks/pong-01/components/sound-manager.ts
Component distribution
- Registry index
apps/www/registry/__index__.tsx - Block registry
apps/www/registry/registry-blocks.ts
Other components
- Developer
- ElevenLabs Scribe API
- Next.js project
Connections 14
- Developer → Catalog site: browses
README.md - Developer → Component docs: explores components
README.md - Developer → Block catalog: explores examples
README.md - Catalog site → Block catalog: navigates to
- Component docs → Audio primitives: previews
- Developer → Registry index: requests components
README.md - Registry index → Next.js project: installs into
README.md - Developer → Block registry: adds blocks
README.md - Block registry → Next.js project: installs into
README.md - Radio player → Audio primitives: uses audio UI
- Realtime transcriber → Scribe token action: requests token
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx - Realtime transcriber → Language selector: renders selector
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx - Scribe token action → ElevenLabs Scribe API: requests token
apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts - Pong game engine → Game sound manager: plays sounds
apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts