Skip to main content

Agent Control Bar

A control bar for managing media tracks (microphone, camera, screen share), opening the chat input, and disconnecting the agent session.

On this page

UsageFeaturesInstallationProps

Usage

Features

  • Configure which controls are visible: microphone, camera, screenShare, chat, and leave
  • Select from three styles: default, outline, and livekit
  • Control chat input visibility with isChatOpen and onIsChatOpenChange
  • Persist user device preferences with saveUserChoices (enabled by default)
  • Handle device errors

Installation

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

Props

Prop nameTypeDefault
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'>