product

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.

Background image of grid in 3d space

300+ AI model integrations

300,000+ developers

100% open source

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.

<AgentAudioVisualizerAura/>

An undulating energy field. Designed in partnership with Unicorn Studio. Powered with a custom WebGL shader.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agent-audio-visualizer-aura

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.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agent-audio-visualizer-aura

Wave Audio Visualizer

An oscillating wave visualizer powered by a custom WebGL shader.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-wave

Radial Audio Visualizer

Give your agent a bright and energetic appearance with our radial visualizer.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-radial

Grid Audio Visualizer

A retro, lo-fi vibe dot-matrix grid visualizer.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-grid

Bar Audio Visualizer

Our classic bar visualizer.

Agent State

Color hue

#1FD5F9

Color shift0.3

Learn more in our component documentation

$pnpm dlx shadcn@latest add @livekit/agents-ui-agent-audio-visualizer-bar

Pre-built Agent UI blocks

Control Bar

Access everything in one place: manage media, send chat messages, and end the call.

$npx shadcn@latest add @agents-ui/agent-control-bar

Chat Transcript

A message interface for displaying conversational history.

$npx shadcn@latest add @agents-ui/agent-chat-transcript

Session view

A complete realtime agent session view with transcript, audio visualizer, and media controls.

$npx shadcn@latest add @agents-ui/agent-session-view-01

To customize your agent frontend, follow these three simple steps:

  1. Initialize shadcn

    $npx shadcn@latest init

  2. Add the Agents UI registry

    $npx shadcn@latest registry add @agents-ui

  3. Install the components you need from the CLI

    $npx shadcn@latest add @agents-ui/agent-session-view-01