Agent Control Bar | LiveKit Documentation

Usage

Code

'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="livekit"
        isChatOpen=false
        isConnected=true
        controls={"leave":true,"microphone":true,"screenShare":true,"camera":true,"chat":true}
      />
    </AgentSessionProvider>
  );
}

Features

Configure which controls are visible: leave, microphone, camera, screenShare, and chat
Three style variant options: default, outline, and livekit
Chat input visibility can be controlled (isChatOpen + onIsChatOpenChange) or uncontrolled
Persist user device preferences with saveUserChoices (enabled by default)
Handle device errors with the onDeviceError callback
Disconnect button state controlled by isConnected

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-control-bar

Props

Prop name	Type	Default
variant?	enum	default
controls?	AgentControlBarControls	{ leave: true, microphone: true, screenShare: true, camera: true, chat: true, }
saveUserChoices?	boolean	true
isConnected?	boolean	–
isChatOpen?	boolean	–
onDisconnect?	function	–
onIsChatOpenChange?	function	–
onDeviceError?	function	–
ref?	Ref<HTMLDivElement>	–
...props?	ComponentProps<'div'>