Agents UI overview

Overview

Agents UI is a component library built on top of Shadcn and AI Elements to accelerate the creation of agentic applications built with LiveKit's real-time platform. It provides pre-built components for controlling IO, managing sessions, rendering transcripts, visualing audio streams, and more.

The AgentAudioVisualizerAura component featured above was designed in partnership with Unicorn Studio

Unicorn Studio

Create jaw-dropping motion and interaction in minutes — no code. Embed with a few clicks.

Quick reference

Prerequisites

Before installing Agents UI, make sure your environment meets the following requirements:

• Node.js, version 18 or later
• Shadcn is installed in your project.

Installation

You can install Agents UI components using the Shadcn CLI.

Confirm you've navigated to the root of your project, and 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}

Usage

Most Agents UI components require access to a LiveKit session object for access to values like agent state or audio tracks. A Session object can be created from a TokenSource, and provided by wrapping the component in an AgentSessionProvider.

'use client';

import { useSession } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentControlBar } from '@/components/agents-ui/agent-control-bar';

const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
  process.env.NEXT_PUBLIC_ SANDBOX_TOKEN_SERVER_ID
);

export function Demo() {
  const session = useSession(TOKEN_SOURCE);

  return (
    <AgentSessionProvider session={session}>
      <AgentControlBar
        variant={{variant}}
        isChatOpen={{isChatOpen}}
        isConnected={{isConnected}}
        controls={{controls}}
      />
    </AgentSessionProvider>
  );
}

Extensibility

Agents UI components take as many primitive attributes as possible. For example, the AgentControlBar component extends HTMLAttributes<HTMLDivElement>, so you can pass any props that a div supports. This makes it easy to extend the component with your own styles or functionality.

You can edit any Agents UI component's source code in the components/agents-ui directory. For style changes, we recommend passing in tailwind classes to override the default styles. Take a look at the source code to get a sense of how to override a component's default styles.

If you reinstall any Agents UI components by rerunning npx shadcn@latest add @agents-ui/{component-name}, the CLI will ask before overwriting the file so you can avoid losing any customizations you made.

After installation, no additional setup is needed. The component's styles (Tailwind CSS classes) and scripts are already integrated. You can start building with the component in your app immediately.

Additional resources

Find in-depth API reference documentation for our Agents UI components references below.