Agents UI
Design polished voice agent interfaces with LiveKit's open source component library built with React and shadcn. Start with production-ready defaults, then customize every detail to match your brand.
Give your agent a visual personality
Choose from five audio visualizer styles. Each one offers custom parameters and distinct behaviors for every agent state: connecting, speaking, listening, thinking, and more.
Aura Audio Visualizer
An undulating energy field. Designed in partnership with Unicorn Studio. Powered with a custom WebGL shader.
Learn more in our component documentation
pnpm dlx shadcn@latest add @livekit/agent-audio-visualizer-auraWave Audio Visualizer
An oscillating wave visualizer powered by a custom WebGL shader.
Learn more in our component documentation
pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-waveRadial Audio Visualizer
Give your agent a bright and energetic appearance with our radial visualizer.
Learn more in our component documentation
pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-radialGrid Audio Visualizer
pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-gridBar Audio Visualizer
pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-barPre-built Agent UI blocks
npx shadcn@latest add @agents-ui/agent-control-barHi, how are you?
I'm good, thank you!
npx shadcn@latest add @agents-ui/agent-chat-transcriptBuild, run, and observe
agents with LiveKit Cloud
Our end-to-end platform powers enterprise-grade voice AI
for customer support at global scale.
Get started
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