Getting started

Prerequisites

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

• Node.js, version 18 or later
• shadcn/ui is installed in your project.

Installation

You can install Agents UI components using the shadcn/ui CLI.

First add the Agents UI registry to your components.json file:

{
  ...
  "registries": {
     ...
    "@agents-ui": "https://livekit.io/ui/r/{name}.json"
  }
}

Then install the component you want to use from the CLI. Ensure you've navigated to the root of your project.

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. The 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.MY_LK_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 component's default styles.

If you re-install any Agents UI component by rerunning npx shadcn@latest add @agents-ui/{component-name}, the CLI will ask before overwriting the file so you can save any custom changes you made.

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

Reporting issues

Please file issues with the GitHub repository.