---
name: "@agents-ui"
slug: "agents-ui"
description: "Official LiveKit shadcn/ui component registry for building voice AI agent interfaces. Components include: AgentSessionProvider, AgentControlBar, AgentChatTranscript, AgentAudioVisualizerBar (five visualizer styles: Aura, Wave, Radial, Grid, and more), StartAudioButton, plus media controls and session management primitives. Built on React 19 and Tailwind CSS v4; depends on @livekit/components-react and the LiveKit platform. Built on top of Vercel AI Elements. Free, open-source. Use for: any LiveKit-powered voice agent front-end that needs polished, production-ready visualizers and chat transcript UI without building WebRTC audio components from scratch."
category: "AI/chat UI"
tags: ["ai", "audio", "auth", "backgrounds", "buttons", "design-system", "forms", "hooks", "pro-available"]
framework: "react"
license: "Apache-2.0"
author: "livekit"
website: "https://livekit.com/ui"
github: "https://github.com/livekit/components-js"
registry: "https://livekit.com/ui/r/registry.json"
pro: true
pro_url: "https://livekit.com/pricing"
github_stars: 442
component_count: 17
generated_at: "2026-07-28T08:00:50.948Z"
---

# @agents-ui

Official LiveKit shadcn/ui component registry for building voice AI agent interfaces. Components include: AgentSessionProvider, AgentControlBar, AgentChatTranscript, AgentAudioVisualizerBar (five visualizer styles: Aura, Wave, Radial, Grid, and more), StartAudioButton, plus media controls and session management primitives. Built on React 19 and Tailwind CSS v4; depends on @livekit/components-react and the LiveKit platform. Built on top of Vercel AI Elements. Free, open-source. Use for: any LiveKit-powered voice agent front-end that needs polished, production-ready visualizers and chat transcript UI without building WebRTC audio components from scratch.

## Links

- Website: https://livekit.com/ui
- GitHub: https://github.com/livekit/components-js
- Registry JSON: https://livekit.com/ui/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/agents-ui
- This file: https://sh4dcn.vercel.app/md/agents-ui.md
- Pro / pricing: https://livekit.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://livekit.com/ui/r/registry.json
pnpm dlx shadcn@latest add https://livekit.com/ui/r/registry.json
bunx shadcn@latest add https://livekit.com/ui/r/registry.json
# clone the source repo
git clone https://github.com/livekit/components-js.git
# fetch the raw registry index
curl -s https://livekit.com/ui/r/registry.json
```

## Components (17)

| name | type | description | install |
| --- | --- | --- | --- |
| agent-disconnect-button | registry:component | A button for disconnecting the agent session. | `npx shadcn@latest add https://livekit.com/ui/r/agent-disconnect-button.json` |
| agent-track-toggle | registry:component | A toggle button for controlling media tracks (microphone, camera, screen share) with appropriate icons and loading states. | `npx shadcn@latest add https://livekit.com/ui/r/agent-track-toggle.json` |
| agent-track-control | registry:component | A control for managing media tracks (microphone, camera, screen share) with appropriate icons and loading states. | `npx shadcn@latest add https://livekit.com/ui/r/agent-track-control.json` |
| agent-control-bar | registry:component | A control bar for managing media tracks (microphone, camera, screen share), disconnecting the agent session, and opening the chat input, with appropriate icons… | `npx shadcn@latest add https://livekit.com/ui/r/agent-control-bar.json` |
| agent-audio-visualizer-bar | registry:component | A linear bar visualizer for audio tracks. | `npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-bar.json` |
| agent-audio-visualizer-radial | registry:component | A radial bar visualizer for audio tracks. | `npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-radial.json` |
| agent-audio-visualizer-grid | registry:component | A grid visualizer for audio tracks. | `npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-grid.json` |
| agent-session-provider | registry:component | A component for providing an agent's session context and ensuring remote participants’ audio tracks (microphones and screen share) are audible. | `npx shadcn@latest add https://livekit.com/ui/r/agent-session-provider.json` |
| start-audio-button | registry:component | A button for starting the agent session's audio track when the browser blocks audio playback. | `npx shadcn@latest add https://livekit.com/ui/r/start-audio-button.json` |
| agent-chat-indicator | registry:component | A component for indicating the agent's chat status with a blinking dot. Useful for indicating the agent is thinking before generating a response. | `npx shadcn@latest add https://livekit.com/ui/r/agent-chat-indicator.json` |
| agent-chat-transcript | registry:component | A component for displaying the agent session's chat transcript. | `npx shadcn@latest add https://livekit.com/ui/r/agent-chat-transcript.json` |
| react-shader-toy | registry:component | A shadertoy-like shader renderer component for React. | `npx shadcn@latest add https://livekit.com/ui/r/react-shader-toy.json` |
| agent-audio-visualizer-wave | registry:component | A wave visualizer for audio tracks. | `npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-wave.json` |
| agent-audio-visualizer-aura | registry:component | An aura visualizer for audio tracks. | `npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-aura.json` |
| nextjs-api-token-route | registry:page | A NextJS API route to generate a LiveKit session token while keeping your API keys private. | `npx shadcn@latest add https://livekit.com/ui/r/nextjs-api-token-route.json` |
| agent-session-view-01 | registry:block | A full-screen agent session block with transcript, controls, and I/O media tiles. | `npx shadcn@latest add https://livekit.com/ui/r/agent-session-view-01.json` |
| all | registry:item | Installs every component in the @agents-ui registry (excluding the nextjs-api-token-route). | `npx shadcn@latest add https://livekit.com/ui/r/all.json` |

## For AI agents

```text
You are adding components from @agents-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/agents-ui.md) for the component list.
2. Fetch the machine-readable index: https://livekit.com/ui/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: agents-ui).
```