Skip to main content
IntroductionBuild AgentsAgent FrontendsTelephonyRoboticsWebRTC TransportManage & DeployReferences
XYouTubeSlack

Agent Popup - 01

A floating chat-bubble trigger that expands into a compact agent session popup, suitable for embedding on any page.

On this page

UsageFeaturesInstallationProps

Usage

Popup trigger should appear
in the bottom right corner

Features

  • Show a floating chat-bubble trigger that expands into a compact agent session popup.
  • Connect the agent session when the popup opens and disconnect it when the popup closes.
  • Toggle chat, camera, and screen share support in the control bar.
  • Show a pre-connect shimmer prompt before the first message arrives.
  • Configure a custom logo, agent name, and brand color for the trigger bubble.

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-popup-01

Props

Prop nameTypeDefault
logo?
string
–
agentName?
string
Agent
tokenSource
TokenSourceConfigurable | TokenSourceFixed
–
themeMode?
enum
–
preConnectMessage?
string
'Agent is listening, ask it a question'
controls?
AgentControlBarControls
{
  leave: false,
  microphone: true,
  chat: false,
  camera: false,
  screenShare: false,
}
triggerColor?
`#${string}`
–
isPreConnectBufferEnabled?
boolean
true
audioVisualizer?
AudioVisualizerConfig
{
    type: 'bar',
    size: 'lg',
  }