@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.
Install this registry
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 curl -s https://livekit.com/ui/r/registry.json Components
17 totalA button for disconnecting the agent session.
npx shadcn@latest add https://livekit.com/ui/r/agent-disconnect-button.json 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 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 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 A linear bar visualizer for audio tracks.
npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-bar.json A radial bar visualizer for audio tracks.
npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-radial.json A grid visualizer for audio tracks.
npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-grid.json 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 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 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 A component for displaying the agent session's chat transcript.
npx shadcn@latest add https://livekit.com/ui/r/agent-chat-transcript.json A shadertoy-like shader renderer component for React.
npx shadcn@latest add https://livekit.com/ui/r/react-shader-toy.json A wave visualizer for audio tracks.
npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-wave.json An aura visualizer for audio tracks.
npx shadcn@latest add https://livekit.com/ui/r/agent-audio-visualizer-aura.json 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 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 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