Today we're introducing Agents UI, a component library that lets you build polished multimodal agent interfaces in minutes.

These are not placeholder UI kits or sample code. Every component in Agents UI is built for real production use, designed atop shadcn/ui and its proven React conventions, and integrated with the same LiveKit platform you use to ship agents to production. From the very first install, you're building the real thing.

How it works

Agents UI components are installed via the shadcn CLI so they land directly in your codebase. That means you can inspect the source, modify behavior, and adjust styling without waiting for library updates or working around API limitations. LiveKit provides built-in controls for audio input and output, audio visualizers, session lifecycle management, and chat interactions out of the box.

You can customize every component with Tailwind CSS classes, extend them to match your brand, and modify the source directly since it lives in your repo. Every component can be themed, so it's easy to express your brand’s unique style.

Built on familiar primitives

Agents UI builds on top of shadcn and AI Elements, combining well-known React patterns with components tailored specifically to voice agent workflows.

One highlight is the aura audio visualizer, designed in partnership with Unicorn Studio. It's a shader-based visualizer that responds smoothly to live audio, is more expressive than generic volume bars, and fast enough to run comfortably in realtime apps.

Agents UI focuses on the patterns that repeat across every voice agent project:

• Media controls for managing audio and video input
• Audio visualizers so users know the agent is listening or speaking
• Session management for handling agent state and lifecycle
• Chat and transcript views for text interaction and message history

Designed to grow with your product

Agents UI is not a UI framework that locks you in. It is designed to give you ownership, and we are investing in patterns that make the transition from first component to fully custom interface seamless.

Components live in your repository, so you can extend them as your product evolves. Add custom hooks, integrate with your state management, or fork components entirely—the code is yours. As we learn from production use cases, we'll add new components and patterns based on real-world feedback.

What's next

Agents UI is not meant to be the only way to build agent interfaces, but it is a core part of how we improve the developer experience of building on LiveKit. Upcoming additions include:

• Additional voice and video control components
• More audio visualizer styles and customization options
• Advanced session state management patterns
• Templates for common agent interface layouts

Our goal is to package the patterns that work in production, then give you the flexibility to customize them for whatever your product requires.

Start building with Agents UI today

Agents UI is available now. Getting started takes just a few steps.

First, if you haven’t set up shadcn, run:

npx shadcn@latest init

Then add the Agents UI registry with:

npx shadcn@latest registry add @agents-ui

Finally, install the components you need from the CLI with:

npx shadcn@latest add @agents-ui/{component-name}

Most Agents UI components require a LiveKit session object. Create one from a TokenSource and wrap your components in an AgentSessionProvider:

'use client';

import { 
  useAgent,
  useSession, 
  useSessionContext,
  useSessionMessages,
} from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentControlBar } from '@/components/agents-ui/agent-control-bar';
import { AgentAudioVisualizerAura } from '@/components/agents-ui/agent-audio-visualizer-aura';import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';
import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';

const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
  process.env.NEXT_PUBLIC_SANDBOX_TOKEN_SERVER_ID
);

export default function DemoWrapper({ session }) {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <Demo />
    </AgentSessionProvider>
  );
}

export function Demo() {
  const session = useSessionContext();
	const { messages } = useSessionMessages(session);
  const { audioTrack, state } = useAgent();
  
  return (
    <>
	    <AgentChatTranscript
	      agentState={state}
	      messages={messages}
	    />
	    <AgentAudioVisualizerAura
	      size="xl"
	      state={state}
	      color="#1FD5F9"
	      colorShift={0.1}
	      themeMode={{themeMode}}
	      audioTrack={audioTrack}
	    />
      <AgentControlBar
        variant="default"
        isChatOpen={false}
        isConnected={true}
        controls={['microphone', 'camera', 'chat']}
      />
    </>
  );
}

That's it. The components are now part of your app and fully customizable with Tailwind CSS.

Check out the full documentation and source code in the GitHub repository. For a complete example application, see agent-starter-react.

Build your own shader-based audio visualizers that react to voice and agent state in realtime with our custom visualizer tutorial.

If you've been building agent interfaces from scratch or patching together UI libraries that weren't designed for realtime voice, Agents UI is the fastest way to ship production-quality components and set yourself up to customize as you scale. Try it today and let us know how it goes.