Build beautiful voice AI experiences
Agents UI is LiveKit’s open source component library built with React and shadcn for designing voice agent interfaces. Start with production-ready defaults, then customize every detail to match your brand.
Audio visualizers
Choose from five audio visualizer styles. Each one offers custom parameters and distinct behaviors for every agent state: connecting, speaking, listening, thinking, and more.
An undulating energy field. Designed in partnership with Unicorn Studio. Powered with a custom WebGL shader.
An oscillating wave visualizer powered by a custom WebGL shader.
Give your agent a bright and energetic appearance with our radial visualizer.
A retro, lo-fi vibe dot-matrix grid visualizer.
Our classic bar visualizer.
1'use client';23import { useTheme } from 'next-themes';4import { useAgent } from '@livekit/components-react';5import { AgentAudioVisualizerAura } from '@/components/agents-ui/agent-audio-visualizer-aura';67function Demo() {8 const { state } = useAgent();9 const { resolvedTheme } = useTheme();1011 return (12 <AgentAudioVisualizerAura13 size="xl"14 color="#1FD5F9"15 colorShift={0.3}16 state={state}17 themeMode={resolvedTheme}18 className="aspect-square size-auto w-full"19 />20 );21}
npx shadcn@latest add @agents-ui/agent-audio-visualizer-auraBlocks
Hello, how are you?
I am good, thank you!
This is a longer message that should wrap to the next line.
Great I'm responding with an even longer message to see how it wraps. Have you tried Agents UI yet?
Get started
Build your voice agent on LiveKit with our Agent SDKs or Agent Builder, and deploy it to LiveKit Cloud.
To customize your agent frontend, follow these three simple steps:
- Initialize shadcn$
npx shadcn@latest init - Add the Agents UI registry$
npx shadcn@latest registry add @agents-ui - Install the components you need from the CLI$
npx shadcn@latest add @agents-ui/agent-session-view-01