Skip to main content

Agent Track Toggle

A UI toggle for capturing a client's media input (microphone, camera, screen share).

Usage

Code
'use client';
import { useSession } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentTrackToggle } from '@/components/agents-ui/agent-track-toggle';
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}>
<AgentTrackToggle
variant="default"
source="microphone"
pressed={pressed}
pending=false
/>
</AgentSessionProvider>
);
}

Features

  • Toggle the capture of a client's media input (microphone, camera, screen share)
  • Select from five sizes: icon, sm, md, lg, and xl
  • Select from three styles: default, outline, and livekit

Installation

pnpm dlx shadcn@latest add @agents-ui/agent-track-toggle

Props

Prop nameTypeDefault
size?
enum
default
variant?
enum
default
ref?
Ref<HTMLButtonElement>
source
enum
pending?
boolean
pressed?
boolean
defaultPressed?
boolean
onPressedChange?
function
...props?
ComponentProps<'button'>