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.endpoint('/api/token');export function Demo() {const session = useSession(TOKEN_SOURCE);const handlePressedChange = (pressed: boolean) => console.log('pressed', pressed);return (<AgentSessionProvider session={session}><AgentTrackTogglevariant="default"source="microphone"pressed={false}pending={false}disabled={false}onPressedChange={handlePressedChange}/></AgentSessionProvider>);}
Features
- Toggle the capture of a client's media input (microphone, camera, screen share)
- Select from five sizes:
icon,sm,md,lg, andxl - Select from three styles:
default,outline, andlivekit
Installation
pnpm dlx shadcn@latest add @agents-ui/agent-track-toggle
Props
| Prop name | Type | Default |
|---|---|---|
size? | enum | default |
variant? | enum | default |
ref? | Ref<HTMLButtonElement> | – |
source | enum | – |
pending? | boolean | – |
pressed? | boolean | – |
defaultPressed? | boolean | – |
onPressedChange? | function | – |
...props? | ComponentProps<'button'> | |