# elevenlabs/ui architecture

> Architecture diagram of the GitHub repository elevenlabs/ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/elevenlabs/ui
- Repository: https://github.com/elevenlabs/ui

## Overview

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: [`apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx`](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx) (Realtime transcriber), [`apps/www/app/(app)/(root)/page.tsx`](https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/(root)/page.tsx) (Catalog site), [`apps/www/components/component-preview.tsx`](https://github.com/elevenlabs/ui/blob/main/apps/www/components/component-preview.tsx) (Component docs), [`apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts`](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts) (Scribe token action)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog and discovery"]
  node_catalog_site["Catalog site<br/>[page.tsx]"]
  node_component_docs["Component docs"]
  node_block_catalog["Block catalog<br/>[page.tsx]"]
  node_markdown_endpoint["Markdown docs<br/>[route.ts]"]
end

subgraph group_registry["Component registry"]
  node_audio_primitives["Audio primitives<br/>[waveform.tsx]"]
end

subgraph group_demos["Audio and agent demos"]
  node_radio_demo["Radio player<br/>[radio-speaker.tsx]"]
  node_transcriber_demo["Realtime transcriber<br/>[page.tsx]"]
  node_scribe_token["Scribe token action"]
  node_language_selector["Language selector"]
  node_voice_chat_blocks["Voice chat blocks<br/>[page.tsx]"]
  node_voice_form_block["Voice form block<br/>[page.tsx]"]
  node_voice_nav_block["Voice navigation block<br/>[page.tsx]"]
  node_pong_engine["Pong game engine<br/>[game-engine.ts]"]
  node_sound_manager["Game sound manager<br/>[sound-manager.ts]"]
end

subgraph group_distribution["Component distribution"]
  node_registry_index["Registry index<br/>[__index__.tsx]"]
  node_registry_blocks["Block registry<br/>[registry-blocks.ts]"]
end

node_developer(("Developer"))
node_scribe_service{{"ElevenLabs Scribe API"}}
node_consumer_project["Next.js project"]

node_developer -->|"browses"| node_catalog_site
node_developer -->|"explores components"| node_component_docs
node_developer -->|"explores examples"| node_block_catalog
node_catalog_site -.->|"navigates to"| node_block_catalog
node_component_docs -.->|"previews"| node_audio_primitives
node_developer -->|"requests components"| node_registry_index
node_registry_index -->|"installs into"| node_consumer_project
node_developer -->|"adds blocks"| node_registry_blocks
node_registry_blocks -->|"installs into"| node_consumer_project
node_radio_demo -.->|"uses audio UI"| node_audio_primitives
node_transcriber_demo -->|"requests token"| node_scribe_token
node_transcriber_demo -->|"renders selector"| node_language_selector
node_scribe_token -->|"requests token"| node_scribe_service
node_pong_engine -->|"plays sounds"| node_sound_manager

click node_catalog_site "https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/(root)/page.tsx"
click node_component_docs "https://github.com/elevenlabs/ui/blob/main/apps/www/components/component-preview.tsx"
click node_block_catalog "https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/blocks/page.tsx"
click node_markdown_endpoint "https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/llm/%5B%5B...slug%5D%5D/route.ts"
click node_registry_index "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/__index__.tsx"
click node_registry_blocks "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/registry-blocks.ts"
click node_audio_primitives "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/ui/waveform.tsx"
click node_radio_demo "https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/radio/components/radio-speaker.tsx"
click node_transcriber_demo "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx"
click node_scribe_token "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts"
click node_language_selector "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/components/language-selector.tsx"
click node_voice_chat_blocks "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-chat-01/page.tsx"
click node_voice_form_block "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-form-01/page.tsx"
click node_voice_nav_block "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-nav-01/page.tsx"
click node_pong_engine "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts"
click node_sound_manager "https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/pong-01/components/sound-manager.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_catalog_site,node_component_docs,node_block_catalog,node_markdown_endpoint toneBlue
class node_audio_primitives toneAmber
class node_radio_demo,node_transcriber_demo,node_scribe_token,node_language_selector,node_voice_chat_blocks,node_voice_form_block,node_voice_nav_block,node_pong_engine,node_sound_manager,node_scribe_service toneMint
class node_registry_index,node_registry_blocks toneRose
class node_developer,node_consumer_project toneIndigo
```

## Components

### Catalog and discovery

- [Catalog site](https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/(root)/page.tsx): `apps/www/app/(app)/(root)/page.tsx`
- [Component docs](https://github.com/elevenlabs/ui/blob/main/apps/www/components/component-preview.tsx): `apps/www/components/component-preview.tsx`
- [Block catalog](https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/blocks/page.tsx): `apps/www/app/(app)/blocks/page.tsx`
- [Markdown docs](https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/llm/%5B%5B...slug%5D%5D/route.ts): `apps/www/app/(app)/llm/[[...slug]]/route.ts`

### Component registry

- [Audio primitives](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/ui/waveform.tsx): `apps/www/registry/elevenlabs-ui/ui/waveform.tsx`

### Audio and agent demos

- [Radio player](https://github.com/elevenlabs/ui/blob/main/apps/www/app/(app)/radio/components/radio-speaker.tsx): `apps/www/app/(app)/radio/components/radio-speaker.tsx`
- [Realtime transcriber](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx): `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx`
- [Scribe token action](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts): `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts`
- [Language selector](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/components/language-selector.tsx): `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/components/language-selector.tsx`
- [Voice chat blocks](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-chat-01/page.tsx): `apps/www/registry/elevenlabs-ui/blocks/voice-chat-01/page.tsx`
- [Voice form block](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-form-01/page.tsx): `apps/www/registry/elevenlabs-ui/blocks/voice-form-01/page.tsx`
- [Voice navigation block](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/voice-nav-01/page.tsx): `apps/www/registry/elevenlabs-ui/blocks/voice-nav-01/page.tsx`
- [Pong game engine](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts): `apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts`
- [Game sound manager](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/elevenlabs-ui/blocks/pong-01/components/sound-manager.ts): `apps/www/registry/elevenlabs-ui/blocks/pong-01/components/sound-manager.ts`

### Component distribution

- [Registry index](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/__index__.tsx): `apps/www/registry/__index__.tsx`
- [Block registry](https://github.com/elevenlabs/ui/blob/main/apps/www/registry/registry-blocks.ts): `apps/www/registry/registry-blocks.ts`

### Other components

- **Developer**
- **ElevenLabs Scribe API**
- **Next.js project**

## Connections

- Developer → Catalog site: browses (evidence: `README.md`)
- Developer → Component docs: explores components (evidence: `README.md`)
- Developer → Block catalog: explores examples (evidence: `README.md`)
- Catalog site → Block catalog: navigates to
- Component docs → Audio primitives: previews
- Developer → Registry index: requests components (evidence: `README.md`)
- Registry index → Next.js project: installs into (evidence: `README.md`)
- Developer → Block registry: adds blocks (evidence: `README.md`)
- Block registry → Next.js project: installs into (evidence: `README.md`)
- Radio player → Audio primitives: uses audio UI
- Realtime transcriber → Scribe token action: requests token (evidence: `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx`)
- Realtime transcriber → Language selector: renders selector (evidence: `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/page.tsx`)
- Scribe token action → ElevenLabs Scribe API: requests token (evidence: `apps/www/registry/elevenlabs-ui/blocks/realtime-transcriber-01/actions/get-scribe-token.ts`)
- Pong game engine → Game sound manager: plays sounds (evidence: `apps/www/registry/elevenlabs-ui/blocks/pong-01/components/game-engine.ts`)