From c1ab59e94622c6cf4810d391f5d757db7baf6f20 Mon Sep 17 00:00:00 2001
From: Thomas Yuill <thomas.yuill@livekit.io>
Date: Thu, 4 Dec 2025 13:08:21 -0500
Subject: [PATCH 1/5] add AudioVisualizerBar

---
 .../agents-ui/AudioVisualizerBar.stories.tsx  |  56 +++++++++
 .../components/participant/BarVisualizer.tsx  |   2 +-
 .../audio-visualizer-bar.tsx                  | 113 ++++++++++++++++++
 .../hooks/useBarAnimator.ts                   |  70 +++++++++++
 packages/shadcn/index.ts                      |   1 +
 packages/shadcn/lib/clone-single-child.ts     |  26 ++++
 .../participant/_audio-visualizer.scss        |   2 +-
 packages/styles/scss/prefabs/control-bar.scss |   2 +-
 8 files changed, 269 insertions(+), 3 deletions(-)
 create mode 100644 docs/storybook/stories/agents-ui/AudioVisualizerBar.stories.tsx
 create mode 100644 packages/shadcn/components/agents-ui/audio-visualizer-bar/audio-visualizer-bar.tsx
 create mode 100644 packages/shadcn/components/agents-ui/audio-visualizer-bar/hooks/useBarAnimator.ts
 create mode 100644 packages/shadcn/index.ts
 create mode 100644 packages/shadcn/lib/clone-single-child.ts

diff --git a/docs/storybook/stories/agents-ui/AudioVisualizerBar.stories.tsx b/docs/storybook/stories/agents-ui/AudioVisualizerBar.stories.tsx
new file mode 100644
index 000000000..5e01c6f75
--- /dev/null
+++ b/docs/storybook/stories/agents-ui/AudioVisualizerBar.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AudioVisualizerBar, AudioVisualizerBarProps } from '@agents-ui';
+
+export default {
+  component: AudioVisualizerBar,
+  decorators: [AgentSessionProvider],
+  render: (args: AudioVisualizerBarProps) => {
+    const audioTrack = useMicrophone();
+
+    return <AudioVisualizerBar {...args} audioTrack={audioTrack} />;
+  },
+  args: {
+    size: 'xl',
+    barCount: 5,
+    state: 'connecting',
+  },
+  argTypes: {
+    size: {
+      options: ['icon', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'radio' },
+    },
+    state: {
+      options: [
+        'idle',
+        'disconnected',
+        'pre-connect-buffering',
+        'connecting',
+        'initializing',
+        'listening',
+        'thinking',
+        'speaking',
+        'failed',
+      ],
+      control: { type: 'radio' },
+    },
+    barCount: {
+      control: { type: 'range', min: 1, max: 24, step: 1 },
+    },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AudioVisualizerBarProps> = {
+  args: {},
+};
diff --git a/packages/react/src/components/participant/BarVisualizer.tsx b/packages/react/src/components/participant/BarVisualizer.tsx
index bef470101..69255d99a 100644
--- a/packages/react/src/components/participant/BarVisualizer.tsx
+++ b/packages/react/src/components/participant/BarVisualizer.tsx
@@ -112,7 +112,7 @@ export const BarVisualizer = /* @__PURE__ */ React.forwardRef<HTMLDivElement, Ba
     { state, options, barCount = 15, trackRef, track, children, ...props }: BarVisualizerProps,
     ref,
   ) {
-    const elementProps = mergeProps(props, { className: 'lk-audio-bar-visualizer' });
+    const elementProps = mergeProps(props, { className: 'lk-audio-visualizer-bar' });
     let targetTrack: TrackReferenceOrPlaceholder | LocalAudioTrack | RemoteAudioTrack | undefined =
       useMaybeTrackRefContext();
 
diff --git a/packages/shadcn/components/agents-ui/audio-visualizer-bar/audio-visualizer-bar.tsx b/packages/shadcn/components/agents-ui/audio-visualizer-bar/audio-visualizer-bar.tsx
new file mode 100644
index 000000000..02eec005f
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/audio-visualizer-bar/audio-visualizer-bar.tsx
@@ -0,0 +1,113 @@
+import React, { type ReactNode, useMemo } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
+import {
+  type AgentState,
+  type TrackReferenceOrPlaceholder,
+  useMultibandTrackVolume,
+} from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+import { cloneSingleChild } from '@/lib/clone-single-child';
+import { useBarAnimator } from './hooks/useBarAnimator';
+
+export const AudioVisualizerBarVariants = cva(
+  [
+    'relative flex items-center justify-center',
+    '[&_>_*]:rounded-full [&_>_*]:transition-colors [&_>_*]:duration-250 [&_>_*]:ease-linear',
+    '[&_>_*]:bg-transparent [&_>_*]:data-[lk-highlighted=true]:bg-current',
+  ],
+  {
+    variants: {
+      size: {
+        icon: ['h-[24px] gap-[2px]', '[&_>_*]:w-[4px] [&_>_*]:min-h-[4px]'],
+        sm: ['h-[56px] gap-[4px]', '[&_>_*]:w-[8px] [&_>_*]:min-h-[8px]'],
+        md: ['h-[112px] gap-[8px]', '[&_>_*]:w-[16px] [&_>_*]:min-h-[16px]'],
+        lg: ['h-[224px] gap-[16px]', '[&_>_*]:w-[32px] [&_>_*]:min-h-[32px]'],
+        xl: ['h-[448px] gap-[32px]', '[&_>_*]:w-[64px] [&_>_*]:min-h-[64px]'],
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export interface AudioVisualizerBarProps {
+  state?: AgentState;
+  barCount?: number;
+  audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
+  className?: string;
+  children?: ReactNode | ReactNode[];
+}
+
+export function AudioVisualizerBar({
+  size,
+  state,
+  barCount,
+  audioTrack,
+  className,
+  children,
+}: AudioVisualizerBarProps & VariantProps<typeof AudioVisualizerBarVariants>) {
+  const _barCount = useMemo(() => {
+    if (barCount) {
+      return barCount;
+    }
+    switch (size) {
+      case 'icon':
+      case 'sm':
+        return 3;
+      default:
+        return 5;
+    }
+  }, [barCount, size]);
+
+  const volumeBands = useMultibandTrackVolume(audioTrack, {
+    bands: _barCount,
+    loPass: 100,
+    hiPass: 200,
+  });
+
+  const sequencerInterval = useMemo(() => {
+    switch (state) {
+      case 'connecting':
+        return 2000 / _barCount;
+      case 'initializing':
+        return 2000;
+      case 'listening':
+        return 500;
+      case 'thinking':
+        return 150;
+      default:
+        return 1000;
+    }
+  }, [state, _barCount]);
+
+  const highlightedIndices = useBarAnimator(state, _barCount, sequencerInterval);
+  const bands = useMemo(
+    () => (state === 'speaking' ? volumeBands : new Array(_barCount).fill(0)),
+    [state, volumeBands, _barCount],
+  );
+
+  return (
+    <div className={cn(AudioVisualizerBarVariants({ size }), className)}>
+      {bands.map((band: number, idx: number) =>
+        children ? (
+          <React.Fragment key={idx}>
+            {cloneSingleChild(children, {
+              'data-lk-index': idx,
+              'data-lk-highlighted': highlightedIndices.includes(idx),
+              style: { height: `${band * 100}%` },
+            })}
+          </React.Fragment>
+        ) : (
+          <div
+            key={idx}
+            data-lk-index={idx}
+            data-lk-highlighted={highlightedIndices.includes(idx)}
+            style={{ height: `${band * 100}%` }}
+          />
+        ),
+      )}
+    </div>
+  );
+}
diff --git a/packages/shadcn/components/agents-ui/audio-visualizer-bar/hooks/useBarAnimator.ts b/packages/shadcn/components/agents-ui/audio-visualizer-bar/hooks/useBarAnimator.ts
new file mode 100644
index 000000000..fc397ca13
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/audio-visualizer-bar/hooks/useBarAnimator.ts
@@ -0,0 +1,70 @@
+import { useEffect, useRef, useState } from 'react';
+import { type AgentState } from '@livekit/components-react';
+
+function generateConnectingSequenceBar(columns: number): number[][] {
+  const seq = [];
+
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x]);
+  }
+
+  return seq;
+}
+
+function generateListeningSequenceBar(columns: number): number[][] {
+  const center = Math.floor(columns / 2);
+  const noIndex = -1;
+
+  return [[center], [noIndex]];
+}
+
+export const useBarAnimator = (
+  state: AgentState | undefined,
+  columns: number,
+  interval: number,
+): number[] => {
+  const [index, setIndex] = useState(0);
+  const [sequence, setSequence] = useState<number[][]>([[]]);
+
+  useEffect(() => {
+    if (state === 'thinking') {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === 'connecting' || state === 'initializing') {
+      const sequence = [...generateConnectingSequenceBar(columns)];
+      setSequence(sequence);
+    } else if (state === 'listening') {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === undefined || state === 'speaking') {
+      setSequence([new Array(columns).fill(0).map((_, idx) => idx)]);
+    } else {
+      setSequence([[]]);
+    }
+    setIndex(0);
+  }, [state, columns]);
+
+  const animationFrameId = useRef<number | null>(null);
+  useEffect(() => {
+    let startTime = performance.now();
+
+    const animate = (time: DOMHighResTimeStamp) => {
+      const timeElapsed = time - startTime;
+
+      if (timeElapsed >= interval) {
+        setIndex((prev) => prev + 1);
+        startTime = time;
+      }
+
+      animationFrameId.current = requestAnimationFrame(animate);
+    };
+
+    animationFrameId.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [interval, columns, state, sequence.length]);
+
+  return sequence[index % sequence.length];
+};
diff --git a/packages/shadcn/index.ts b/packages/shadcn/index.ts
new file mode 100644
index 000000000..2c3699ee1
--- /dev/null
+++ b/packages/shadcn/index.ts
@@ -0,0 +1 @@
+export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
diff --git a/packages/shadcn/lib/clone-single-child.ts b/packages/shadcn/lib/clone-single-child.ts
new file mode 100644
index 000000000..19c71783a
--- /dev/null
+++ b/packages/shadcn/lib/clone-single-child.ts
@@ -0,0 +1,26 @@
+import { ReactNode, Children, isValidElement, cloneElement, CSSProperties } from 'react';
+import { cn } from '@/lib/utils';
+
+export function cloneSingleChild(
+  children: ReactNode | ReactNode[],
+  props?: Record<string, unknown>,
+  key?: unknown,
+) {
+  return Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too.
+    if (isValidElement(child) && Children.only(children)) {
+      const childProps = child.props as Record<string, unknown>;
+      if (childProps.className) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.className = cn(childProps.className as string, props.className as string);
+        props.style = {
+          ...(childProps.style as CSSProperties),
+          ...(props.style as CSSProperties),
+        };
+      }
+      return cloneElement(child, { ...props, key: key ? String(key) : undefined });
+    }
+    return child;
+  });
+}
diff --git a/packages/styles/scss/components/participant/_audio-visualizer.scss b/packages/styles/scss/components/participant/_audio-visualizer.scss
index deb9a58e6..e89fb1be3 100644
--- a/packages/styles/scss/components/participant/_audio-visualizer.scss
+++ b/packages/styles/scss/components/participant/_audio-visualizer.scss
@@ -29,7 +29,7 @@ deprecated
   }
 }
 
-.audio-bar-visualizer {
+.audio-visualizer-bar {
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/styles/scss/prefabs/control-bar.scss b/packages/styles/scss/prefabs/control-bar.scss
index a8f5293b8..af0222cff 100644
--- a/packages/styles/scss/prefabs/control-bar.scss
+++ b/packages/styles/scss/prefabs/control-bar.scss
@@ -16,7 +16,7 @@
   --va-bar-width: 2px;
   --va-bar-gap: 4px;
   --va-bar-border-radius: 1px;
-  & .audio-bar-visualizer {
+  & .audio-visualizer-bar {
     & .audio-bar.highlighted {
       filter: none;
     }

From 64068837b2d012aafc48ac8347c52124e8b094f9 Mon Sep 17 00:00:00 2001
From: Thomas Yuill <thomas.yuill@livekit.io>
Date: Wed, 3 Dec 2025 13:25:32 -0500
Subject: [PATCH 2/5] add AgentTrackToggle

---
 .../agents-ui/AgentTrackToggle.stories.tsx    | 106 ++++++++++++++++++
 .../agents-ui/agent-track-toggle.tsx          |  93 +++++++++++++++
 packages/shadcn/index.ts                      |   1 +
 3 files changed, 200 insertions(+)
 create mode 100644 docs/storybook/stories/agents-ui/AgentTrackToggle.stories.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-track-toggle.tsx

diff --git a/docs/storybook/stories/agents-ui/AgentTrackToggle.stories.tsx b/docs/storybook/stories/agents-ui/AgentTrackToggle.stories.tsx
new file mode 100644
index 000000000..d96af0a9a
--- /dev/null
+++ b/docs/storybook/stories/agents-ui/AgentTrackToggle.stories.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentTrackToggle, AgentTrackToggleProps } from '@agents-ui';
+import { Track } from 'livekit-client';
+
+export default {
+  component: AgentTrackToggle,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentTrackToggleProps) => {
+    const [isPressed, setIsPressed] = React.useState(
+      args.source === Track.Source.Microphone ? true : false,
+    );
+
+    return (
+      <AgentTrackToggle
+        {...args}
+        pressed={isPressed}
+        onPressedChange={(pressed: boolean) => setIsPressed(pressed)}
+      />
+    );
+  },
+  args: {
+    size: 'default',
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    pending: { control: { type: 'boolean' } },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentTrackToggleProps> = {
+  render: (args: AgentTrackToggleProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+  args: {},
+};
+
+export const Outlined: StoryObj<AgentTrackToggleProps> = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args: AgentTrackToggleProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackToggle
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/shadcn/components/agents-ui/agent-track-toggle.tsx b/packages/shadcn/components/agents-ui/agent-track-toggle.tsx
new file mode 100644
index 000000000..c4e1be82f
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-track-toggle.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Track } from 'livekit-client';
+import { useTrackToggle } from '@livekit/components-react';
+import {
+  MicIcon,
+  MicOffIcon,
+  MonitorUpIcon,
+  MonitorOffIcon,
+  LoaderIcon,
+  VideoIcon,
+  VideoOffIcon,
+} from 'lucide-react';
+import { Toggle } from '@/components/ui/toggle';
+import { cn } from '@/lib/utils';
+
+export const agentTrackToggleVariants = cva(['size-9'], {
+  variants: {
+    variant: {
+      default: [
+        'data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive',
+        'data-[state=off]:hover:bg-destructive/15',
+        'data-[state=off]:focus-visible:ring-destructive/30',
+        'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+        'data-[state=on]:hover:bg-foreground/10',
+      ],
+      outline: [
+        'data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive data-[state=off]:border-destructive/20',
+        'data-[state=off]:hover:bg-destructive/15 data-[state=off]:hover:text-destructive',
+        'data-[state=off]:focus:text-destructive',
+        'data-[state=off]:focus-visible:border-destructive data-[state=off]:focus-visible:ring-destructive/30',
+        'data-[state=on]:hover:bg-foreground/10 data-[state=on]:hover:border-foreground/12',
+        'dark:data-[state=on]:hover:bg-foreground/10',
+      ],
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+function getSourceIcon(source: Track.Source, enabled: boolean, pending = false) {
+  if (pending) {
+    return LoaderIcon;
+  }
+
+  switch (source) {
+    case Track.Source.Microphone:
+      return enabled ? MicIcon : MicOffIcon;
+    case Track.Source.Camera:
+      return enabled ? VideoIcon : VideoOffIcon;
+    case Track.Source.ScreenShare:
+      return enabled ? MonitorUpIcon : MonitorOffIcon;
+    default:
+      return React.Fragment;
+  }
+}
+
+export type AgentTrackToggleProps = React.ComponentProps<typeof Toggle> & {
+  source: Parameters<typeof useTrackToggle>[0]['source'];
+  pending?: boolean;
+};
+
+export function AgentTrackToggle({
+  source,
+  pressed,
+  variant,
+  pending,
+  className,
+  ...props
+}: AgentTrackToggleProps) {
+  const IconComponent = getSourceIcon(source, pressed ?? false, pending);
+
+  return (
+    <Toggle
+      variant={variant}
+      pressed={pressed ?? false}
+      aria-label={`Toggle ${source}`}
+      className={cn(
+        agentTrackToggleVariants({
+          variant: variant ?? 'default',
+          className,
+        }),
+      )}
+      {...props}
+    >
+      <IconComponent className={cn(pending && 'animate-spin')} />
+      {props.children}
+    </Toggle>
+  );
+}
diff --git a/packages/shadcn/index.ts b/packages/shadcn/index.ts
index 2c3699ee1..485653e99 100644
--- a/packages/shadcn/index.ts
+++ b/packages/shadcn/index.ts
@@ -1 +1,2 @@
 export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
+export * from './components/agents-ui/agent-track-toggle';

From 8b3fd898f0e7d1de70e81082e9be20a020074948 Mon Sep 17 00:00:00 2001
From: Thomas Yuill <thomas.yuill@livekit.io>
Date: Wed, 3 Dec 2025 13:25:40 -0500
Subject: [PATCH 3/5] add AgentTrackControl

---
 .../agents-ui/AgentTrackControl.stories.tsx   | 119 +++++++++
 .../agents-ui/agent-track-control.tsx         | 228 ++++++++++++++++++
 packages/shadcn/components/ui/toggle.tsx      |   2 +-
 packages/shadcn/index.ts                      |   1 +
 4 files changed, 349 insertions(+), 1 deletion(-)
 create mode 100644 docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-track-control.tsx

diff --git a/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx b/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx
new file mode 100644
index 000000000..f1970a22d
--- /dev/null
+++ b/docs/storybook/stories/agents-ui/AgentTrackControl.stories.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentTrackControl, type AgentTrackControlProps } from '@agents-ui';
+import { Track } from 'livekit-client';
+
+export default {
+  component: AgentTrackControl,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentTrackControlProps) => {
+    const [isPressed, setIsPressed] = React.useState(
+      args.source === Track.Source.Microphone ? true : false,
+    );
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <AgentTrackControl
+        {...args}
+        pressed={isPressed}
+        onPressedChange={(pressed: boolean) => setIsPressed(pressed)}
+        audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined}
+      />
+    );
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    pending: { control: { type: 'boolean' } },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentTrackControlProps> = {
+  render: (args: AgentTrackControlProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackControl
+          {...args}
+          kind="audioinput"
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          audioTrack={microphoneTrack}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          kind="videoinput"
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+  args: {},
+};
+
+export const Outlined: StoryObj<AgentTrackControlProps> = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args: AgentTrackControlProps) => {
+    const [isCameraPressed, setIsCameraPressed] = React.useState(true);
+    const [isMicrophonePressed, setIsMicrophonePressed] = React.useState(false);
+    const [isScreenSharePressed, setIsScreenSharePressed] = React.useState(true);
+
+    const microphoneTrack = useMicrophone();
+
+    return (
+      <div className="flex gap-2">
+        <AgentTrackControl
+          {...args}
+          kind="audioinput"
+          source={Track.Source.Microphone}
+          pressed={isMicrophonePressed}
+          audioTrack={args.source === Track.Source.Microphone ? microphoneTrack : undefined}
+          onPressedChange={(pressed: boolean) => setIsMicrophonePressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          kind="videoinput"
+          source={Track.Source.Camera}
+          pressed={isCameraPressed}
+          onPressedChange={(pressed: boolean) => setIsCameraPressed(pressed)}
+        />
+        <AgentTrackControl
+          {...args}
+          source={Track.Source.ScreenShare}
+          pressed={isScreenSharePressed}
+          onPressedChange={(pressed: boolean) => setIsScreenSharePressed(pressed)}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/shadcn/components/agents-ui/agent-track-control.tsx b/packages/shadcn/components/agents-ui/agent-track-control.tsx
new file mode 100644
index 000000000..80e1087e9
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-track-control.tsx
@@ -0,0 +1,228 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
+import {
+  type TrackReferenceOrPlaceholder,
+  useTrackToggle,
+  useMaybeRoomContext,
+  useMediaDeviceSelect,
+} from '@livekit/components-react';
+
+import { AudioVisualizerBar } from '@/components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
+import { AgentTrackToggle } from '@/components/agents-ui/agent-track-toggle';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { toggleVariants } from '../ui/toggle';
+
+const selectVariants = cva(
+  [
+    'rounded-l-none shadow-none pl-2 ',
+    'text-foreground hover:text-muted-foreground',
+    'peer-data-[state=on]/track:bg-muted peer-data-[state=on]/track:hover:bg-foreground/10',
+    'peer-data-[state=off]/track:text-destructive',
+    'peer-data-[state=off]/track:focus-visible:border-destructive peer-data-[state=off]/track:focus-visible:ring-destructive/30',
+    '[&_svg]:opacity-100',
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          'border-none',
+          'peer-data-[state=off]/track:bg-destructive/10',
+          'peer-data-[state=off]/track:hover:bg-destructive/15',
+          'peer-data-[state=off]/track:[&_svg]:!text-destructive',
+
+          'dark:peer-data-[state=on]/track:bg-accent',
+          'dark:peer-data-[state=on]/track:hover:bg-foreground/10',
+          'dark:peer-data-[state=off]/track:bg-destructive/10',
+          'dark:peer-data-[state=off]/track:hover:bg-destructive/15',
+        ],
+        outline: [
+          'border border-l-0',
+          'peer-data-[state=off]/track:border-destructive/20',
+          'peer-data-[state=off]/track:bg-destructive/10',
+          'peer-data-[state=off]/track:hover:bg-destructive/15',
+          'peer-data-[state=off]/track:[&_svg]:!text-destructive',
+          'peer-data-[state=on]/track:hover:border-foreground/12',
+
+          'dark:peer-data-[state=off]/track:bg-destructive/10',
+          'dark:peer-data-[state=off]/track:hover:bg-destructive/15',
+          'dark:peer-data-[state=on]/track:bg-accent',
+          'dark:peer-data-[state=on]/track:hover:bg-foreground/10',
+        ],
+      },
+      size: {
+        default: 'w-[180px]',
+        sm: 'w-auto',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+type DeviceSelectProps = React.ComponentProps<typeof SelectTrigger> &
+  VariantProps<typeof selectVariants> & {
+    kind: MediaDeviceKind;
+    track?: LocalAudioTrack | LocalVideoTrack | undefined;
+    requestPermissions?: boolean;
+    onMediaDeviceError?: (error: Error) => void;
+    onDeviceListChange?: (devices: MediaDeviceInfo[]) => void;
+    onActiveDeviceChange?: (deviceId: string) => void;
+  };
+
+export function TrackDeviceSelect({
+  kind,
+  track,
+  size = 'default',
+  variant = 'default',
+  requestPermissions = false,
+  onMediaDeviceError,
+  onDeviceListChange,
+  onActiveDeviceChange,
+  ...props
+}: DeviceSelectProps) {
+  const room = useMaybeRoomContext();
+  const [open, setOpen] = useState(false);
+  const [requestPermissionsState, setRequestPermissionsState] = useState(requestPermissions);
+  const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
+    room,
+    kind,
+    track,
+    requestPermissions: requestPermissionsState,
+    onError: onMediaDeviceError,
+  });
+
+  useEffect(() => {
+    onDeviceListChange?.(devices);
+  }, [devices, onDeviceListChange]);
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open) {
+      setRequestPermissionsState(true);
+    }
+  };
+
+  const handleActiveDeviceChange = (deviceId: string) => {
+    setActiveMediaDevice(deviceId);
+    onActiveDeviceChange?.(deviceId);
+  };
+
+  const filteredDevices = useMemo(() => devices.filter((d) => d.deviceId !== ''), [devices]);
+
+  if (filteredDevices.length < 2) {
+    return null;
+  }
+
+  return (
+    <Select
+      open={open}
+      value={activeDeviceId}
+      onOpenChange={handleOpenChange}
+      onValueChange={handleActiveDeviceChange}
+    >
+      <SelectTrigger className={cn(selectVariants({ size, variant }), props.className)}>
+        {size !== 'sm' && (
+          <SelectValue className="font-mono text-sm" placeholder={`Select a ${kind}`} />
+        )}
+      </SelectTrigger>
+      <SelectContent>
+        {filteredDevices.map((device) => (
+          <SelectItem key={device.deviceId} value={device.deviceId} className="font-mono text-xs">
+            {device.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export type AgentTrackControlProps = VariantProps<typeof toggleVariants> & {
+  kind: MediaDeviceKind;
+  source: Parameters<typeof useTrackToggle>[0]['source'];
+  pressed?: boolean;
+  pending?: boolean;
+  disabled?: boolean;
+  className?: string;
+  audioTrack?: TrackReferenceOrPlaceholder;
+  onPressedChange?: (pressed: boolean) => void;
+  onMediaDeviceError?: (error: Error) => void;
+  onActiveDeviceChange?: (deviceId: string) => void;
+};
+
+export function AgentTrackControl({
+  kind,
+  variant = 'default',
+  source,
+  pressed,
+  pending,
+  disabled,
+  className,
+  audioTrack,
+  onPressedChange,
+  onMediaDeviceError,
+  onActiveDeviceChange,
+}: AgentTrackControlProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-0 rounded-md',
+        variant === 'outline' && 'shadow-xs [&_button]:shadow-none',
+        className,
+      )}
+    >
+      <AgentTrackToggle
+        variant={variant ?? 'default'}
+        source={source}
+        pressed={pressed}
+        pending={pending}
+        disabled={disabled}
+        onPressedChange={onPressedChange}
+        className="peer/track group/track has-[.audiovisualizer]:w-auto has-[.audiovisualizer]:px-3 has-[~_button]:rounded-r-none has-[~_button]:pr-2 has-[~_button]:pl-3 has-[~_button]:border-r-0 focus:z-10"
+      >
+        {audioTrack && (
+          <AudioVisualizerBar
+            size="icon"
+            barCount={3}
+            audioTrack={audioTrack}
+            className="audiovisualizer flex h-6 w-auto items-center justify-center gap-0.5"
+          >
+            <span
+              className={cn([
+                'h-full w-0.5 origin-center',
+                'group-data-[state=on]/track:bg-foreground group-data-[state=off]/track:bg-destructive',
+                'data-lk-muted:bg-muted',
+              ])}
+            />
+          </AudioVisualizerBar>
+        )}
+      </AgentTrackToggle>
+      {kind && (
+        <TrackDeviceSelect
+          size="sm"
+          kind={kind}
+          variant={variant}
+          requestPermissions={false}
+          onMediaDeviceError={onMediaDeviceError}
+          onActiveDeviceChange={onActiveDeviceChange}
+          className={cn([
+            'relative',
+            'before:bg-border before:absolute before:inset-y-0 before:left-0 before:my-2.5 before:w-px has-[~_button]:before:content-[""]',
+            !pressed && 'before:bg-destructive/20',
+          ])}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/packages/shadcn/components/ui/toggle.tsx b/packages/shadcn/components/ui/toggle.tsx
index 4add57b50..d4ce99f22 100644
--- a/packages/shadcn/components/ui/toggle.tsx
+++ b/packages/shadcn/components/ui/toggle.tsx
@@ -24,7 +24,7 @@ const toggleVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
+  },
 );
 
 function Toggle({
diff --git a/packages/shadcn/index.ts b/packages/shadcn/index.ts
index 485653e99..b748fe5a7 100644
--- a/packages/shadcn/index.ts
+++ b/packages/shadcn/index.ts
@@ -1,2 +1,3 @@
 export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
 export * from './components/agents-ui/agent-track-toggle';
+export * from './components/agents-ui/agent-track-control';

From 96fe24cb86043371646a98eed1f6891c33c321cb Mon Sep 17 00:00:00 2001
From: Thomas Yuill <thomas.yuill@livekit.io>
Date: Wed, 3 Dec 2025 23:36:36 -0500
Subject: [PATCH 4/5] add AgentDisconnectButton

---
 .../AgentDisconnectButton.stories.tsx         | 36 +++++++++++++++++++
 .../agents-ui/agent-disconnect-button.tsx     | 35 ++++++++++++++++++
 packages/shadcn/index.ts                      |  1 +
 3 files changed, 72 insertions(+)
 create mode 100644 docs/storybook/stories/agents-ui/AgentDisconnectButton.stories.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-disconnect-button.tsx

diff --git a/docs/storybook/stories/agents-ui/AgentDisconnectButton.stories.tsx b/docs/storybook/stories/agents-ui/AgentDisconnectButton.stories.tsx
new file mode 100644
index 000000000..5357bea31
--- /dev/null
+++ b/docs/storybook/stories/agents-ui/AgentDisconnectButton.stories.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { AgentSessionProvider } from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentDisconnectButton, type AgentDisconnectButtonProps } from '@agents-ui';
+
+export default {
+  component: AgentDisconnectButton,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentDisconnectButtonProps) => (
+    <AgentDisconnectButton {...args}></AgentDisconnectButton>
+  ),
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'],
+      control: { type: 'select' },
+    },
+    onClick: { action: 'onClick' },
+    className: { control: { type: 'text' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentDisconnectButtonProps> = {
+  args: {},
+};
+
+export const Icon: StoryObj<AgentDisconnectButtonProps> = {
+  args: {
+    size: 'icon',
+  },
+};
diff --git a/packages/shadcn/components/agents-ui/agent-disconnect-button.tsx b/packages/shadcn/components/agents-ui/agent-disconnect-button.tsx
new file mode 100644
index 000000000..d85ddc3fb
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-disconnect-button.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { Button, buttonVariants } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useSessionContext } from '@livekit/components-react';
+import { type VariantProps } from 'class-variance-authority';
+import { PhoneOffIcon } from 'lucide-react';
+
+export interface AgentDisconnectButtonProps
+  extends React.ComponentProps<'button'>,
+    VariantProps<typeof buttonVariants> {
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export function AgentDisconnectButton({
+  icon,
+  size = 'default',
+  children,
+  onClick,
+  ...props
+}: AgentDisconnectButtonProps) {
+  const { end } = useSessionContext();
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    end();
+  };
+
+  return (
+    <Button variant="destructive" size={size} onClick={handleClick} {...props}>
+      {icon ?? <PhoneOffIcon />}
+      {children ?? <span className={cn(size?.includes('icon') && 'sr-only')}>END CALL</span>}
+    </Button>
+  );
+}
diff --git a/packages/shadcn/index.ts b/packages/shadcn/index.ts
index b748fe5a7..38da93b4c 100644
--- a/packages/shadcn/index.ts
+++ b/packages/shadcn/index.ts
@@ -1,3 +1,4 @@
 export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar';
 export * from './components/agents-ui/agent-track-toggle';
 export * from './components/agents-ui/agent-track-control';
+export * from './components/agents-ui/agent-disconnect-button';

From 77be9bba5586586d5e1f7fed2393f0398aa98722 Mon Sep 17 00:00:00 2001
From: Thomas Yuill <thomas.yuill@livekit.io>
Date: Wed, 3 Dec 2025 13:26:01 -0500
Subject: [PATCH 5/5] add AgentControlBar

---
 .../agents-ui/AgentControlBar.stories.tsx     |  79 ++++++
 .../agent-control-bar/agent-chat-input.tsx    |  69 +++++
 .../agent-control-bar/agent-control-bar.tsx   | 246 ++++++++++++++++++
 .../hooks/use-input-controls.ts               | 136 ++++++++++
 .../hooks/use-publish-permissions.ts          |  42 +++
 packages/shadcn/index.ts                      |   1 +
 6 files changed, 573 insertions(+)
 create mode 100644 docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-control-bar/agent-chat-input.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-control-bar/agent-control-bar.tsx
 create mode 100644 packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-input-controls.ts
 create mode 100644 packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-publish-permissions.ts

diff --git a/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx b/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx
new file mode 100644
index 000000000..71dd683c5
--- /dev/null
+++ b/docs/storybook/stories/agents-ui/AgentControlBar.stories.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import {
+  AgentSessionProvider,
+  useMicrophone,
+} from '../../.storybook/lk-decorators/AgentSessionProvider';
+import { AgentControlBar, AgentControlBarProps } from '@agents-ui';
+
+export default {
+  component: AgentControlBar,
+  decorators: [AgentSessionProvider],
+  render: (args: AgentControlBarProps) => {
+    useMicrophone();
+    return <AgentControlBar {...args} className="min-w-lg  mx-auto" />;
+  },
+  args: {
+    isConnected: true,
+    controls: {
+      microphone: true,
+      camera: true,
+      screenShare: true,
+      chat: true,
+      leave: true,
+    },
+    className: 'w-full',
+  },
+  argTypes: {
+    controls: { control: { type: 'object' } },
+    isConnected: { control: { type: 'boolean' } },
+    isChatOpen: { control: { type: 'boolean' } },
+  },
+  parameters: {
+    layout: 'centered',
+    actions: {
+      handles: [],
+    },
+  },
+};
+
+export const Default: StoryObj<AgentControlBarProps> = {
+  args: {},
+};
+
+export const Outline: StoryObj<AgentControlBarProps> = {
+  args: {
+    variant: 'outline',
+  },
+};
+
+export const Livekit: StoryObj<AgentControlBarProps> = {
+  args: {
+    variant: 'livekit',
+  },
+};
+
+export const NoControls: StoryObj<AgentControlBarProps> = {
+  args: {
+    controls: {
+      microphone: false,
+      camera: false,
+      screenShare: false,
+      chat: false,
+      leave: false,
+    },
+  },
+  render: (args: AgentControlBarProps) => {
+    return (
+      <>
+        <p className="text-center">
+          This control bar does not render
+          <br />
+          because <code className="text-muted-foreground text-sm">visibleControls</code> contains
+          only false values.
+        </p>
+        <AgentControlBar {...args} className="min-w-lg  mx-auto" />
+      </>
+    );
+  },
+};
diff --git a/packages/shadcn/components/agents-ui/agent-control-bar/agent-chat-input.tsx b/packages/shadcn/components/agents-ui/agent-control-bar/agent-chat-input.tsx
new file mode 100644
index 000000000..d1f8bb2a8
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-control-bar/agent-chat-input.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+import { SendHorizontal, Loader } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface AgentChatInputProps {
+  chatOpen: boolean;
+  onSend?: (message: string) => void;
+  className?: string;
+}
+
+export function AgentChatInput({
+  chatOpen,
+  onSend = async () => {},
+  className,
+}: AgentChatInputProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [isSending, setIsSending] = useState(false);
+  const [message, setMessage] = useState<string>('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      setIsSending(true);
+      await onSend(message);
+      setMessage('');
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const isDisabled = isSending || message.trim().length === 0;
+
+  useEffect(() => {
+    if (chatOpen) return;
+    // when not disabled refocus on input
+    inputRef.current?.focus();
+  }, [chatOpen]);
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn('mb-3 flex grow items-end gap-2 rounded-md pl-1 text-sm', className)}
+    >
+      <textarea
+        autoFocus
+        ref={inputRef}
+        value={message}
+        disabled={!chatOpen}
+        placeholder="Type something..."
+        onChange={(e) => setMessage(e.target.value)}
+        className="field-sizing-content max-h-16 min-h-8 flex-1 py-2 [scrollbar-width:thin] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      />
+      <Button
+        size="icon"
+        type="submit"
+        disabled={isDisabled}
+        variant={isDisabled ? 'secondary' : 'default'}
+        title={isSending ? 'Sending...' : 'Send'}
+        className="self-end disabled:cursor-not-allowed"
+      >
+        {isSending ? <Loader className="animate-spin" /> : <SendHorizontal />}
+      </Button>
+    </form>
+  );
+}
diff --git a/packages/shadcn/components/agents-ui/agent-control-bar/agent-control-bar.tsx b/packages/shadcn/components/agents-ui/agent-control-bar/agent-control-bar.tsx
new file mode 100644
index 000000000..86eb12b20
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-control-bar/agent-control-bar.tsx
@@ -0,0 +1,246 @@
+'use client';
+
+import { type HTMLAttributes, useState } from 'react';
+import { Track } from 'livekit-client';
+import { motion } from 'motion/react';
+import { useChat } from '@livekit/components-react';
+import { MessageSquareTextIcon } from 'lucide-react';
+import {
+  AgentTrackToggle,
+  agentTrackToggleVariants,
+} from '@/components/agents-ui/agent-track-toggle';
+import { AgentTrackControl } from '@/components/agents-ui/agent-track-control';
+import { Toggle } from '@/components/ui/toggle';
+import { cn } from '@/lib/utils';
+import { AgentChatInput } from './agent-chat-input';
+import { UseInputControlsProps, useInputControls } from './hooks/use-input-controls';
+import { usePublishPermissions } from './hooks/use-publish-permissions';
+import { AgentDisconnectButton } from '../agent-disconnect-button';
+
+const TOGGLE_VARIANT_1 = [
+  '[&_[data-state=off]]:bg-accent [&_[data-state=off]]:hover:bg-foreground/10',
+  '[&_[data-state=off]_~_button]:bg-accent [&_[data-state=off]_~_button]:hover:bg-foreground/10',
+  '[&_[data-state=off]]:border-border [&_[data-state=off]]:hover:border-foreground/12',
+  '[&_[data-state=off]_~_button]:border-border [&_[data-state=off]_~_button]:hover:border-foreground/12',
+  '[&_[data-state=off]]:text-destructive [&_[data-state=off]]:hover:text-destructive [&_[data-state=off]]:focus:text-destructive',
+  '[&_[data-state=off]]:focus-visible:ring-foreground/12 [&_[data-state=off]]:focus-visible:border-ring',
+  'dark:[&_[data-state=off]_~_button]:bg-accent dark:[&_[data-state=off]_~_button:hover]:bg-foreground/10',
+];
+
+const TOGGLE_VARIANT_2 = [
+  'data-[state=off]:bg-accent data-[state=off]:hover:bg-foreground/10',
+  'data-[state=off]:border-border data-[state=off]:hover:border-foreground/12',
+  'data-[state=off]:focus-visible:border-ring data-[state=off]:focus-visible:ring-foreground/12',
+  'data-[state=off]:text-foreground data-[state=off]:hover:text-foreground data-[state=off]:focus:text-foreground',
+  'data-[state=on]:bg-blue-500/20 data-[state=on]:hover:bg-blue-500/30',
+  'data-[state=on]:border-blue-700/10 data-[state=on]:text-blue-700 data-[state=on]:ring-blue-700/30',
+  'data-[state=on]:focus-visible:border-blue-700/50',
+  'dark:data-[state=on]:bg-blue-500/20 dark:data-[state=on]:text-blue-300',
+];
+
+const MOTION_PROPS = {
+  variants: {
+    hidden: {
+      height: 0,
+      opacity: 0,
+      marginBottom: 0,
+    },
+    visible: {
+      height: 'auto',
+      opacity: 1,
+      marginBottom: 12,
+    },
+  },
+  initial: 'hidden',
+  transition: {
+    duration: 0.3,
+    ease: 'easeOut',
+  },
+};
+
+export interface ControlBarControls {
+  leave?: boolean;
+  camera?: boolean;
+  microphone?: boolean;
+  screenShare?: boolean;
+  chat?: boolean;
+}
+
+export interface AgentControlBarProps extends UseInputControlsProps {
+  variant?: 'default' | 'outline' | 'livekit';
+  controls?: ControlBarControls;
+  isConnected?: boolean;
+  isChatOpen?: boolean;
+  onIsChatOpenChange?: (open: boolean) => void;
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
+}
+
+/**
+ * A control bar specifically designed for voice assistant interfaces
+ */
+export function AgentControlBar({
+  variant = 'default',
+  controls,
+  isChatOpen = false,
+  isConnected = false,
+  saveUserChoices = true,
+  onDisconnect,
+  onDeviceError,
+  onIsChatOpenChange,
+  className,
+  ...props
+}: AgentControlBarProps & HTMLAttributes<HTMLDivElement>) {
+  const { send } = useChat();
+  const publishPermissions = usePublishPermissions();
+  const [isChatOpenUncontrolled, setIsChatOpenUncontrolled] = useState(isChatOpen);
+  const {
+    micTrackRef,
+    cameraToggle,
+    microphoneToggle,
+    screenShareToggle,
+    handleAudioDeviceChange,
+    handleVideoDeviceChange,
+    handleMicrophoneDeviceSelectError,
+    handleCameraDeviceSelectError,
+  } = useInputControls({ onDeviceError, saveUserChoices });
+
+  const handleSendMessage = async (message: string) => {
+    await send(message);
+  };
+
+  const visibleControls = {
+    leave: controls?.leave ?? true,
+    microphone: controls?.microphone ?? publishPermissions.microphone,
+    screenShare: controls?.screenShare ?? publishPermissions.screenShare,
+    camera: controls?.camera ?? publishPermissions.camera,
+    chat: controls?.chat ?? publishPermissions.data,
+  };
+
+  const isEmpty = Object.values(visibleControls).every((value) => !value);
+
+  if (isEmpty) {
+    console.warn('AgentControlBar: `visibleControls` contains only false values.');
+    return null;
+  }
+
+  return (
+    <div
+      aria-label="Voice assistant controls"
+      className={cn(
+        'bg-background border-input/50 dark:border-muted flex flex-col border drop-shadow-md/3  p-3',
+        variant === 'livekit' ? 'rounded-[31px]' : 'rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      <motion.div
+        {...MOTION_PROPS}
+        // @ts-ignore
+        inert={!(isChatOpen || isChatOpenUncontrolled)}
+        animate={isChatOpen || isChatOpenUncontrolled ? 'visible' : 'hidden'}
+        className="border-input/50 flex w-full items-start overflow-hidden border-b"
+      >
+        <AgentChatInput
+          chatOpen={isChatOpen || isChatOpenUncontrolled}
+          onSend={handleSendMessage}
+          className={cn(variant === 'livekit' && '[&_button]:rounded-full')}
+        />
+      </motion.div>
+
+      <div className="flex gap-1">
+        <div className="flex grow gap-1">
+          {/* Toggle Microphone */}
+          {visibleControls.microphone && (
+            <AgentTrackControl
+              variant={variant === 'outline' ? 'outline' : 'default'}
+              kind="audioinput"
+              aria-label="Toggle microphone"
+              source={Track.Source.Microphone}
+              pressed={microphoneToggle.enabled}
+              disabled={microphoneToggle.pending}
+              audioTrack={micTrackRef}
+              onPressedChange={microphoneToggle.toggle}
+              onActiveDeviceChange={handleAudioDeviceChange}
+              onMediaDeviceError={handleMicrophoneDeviceSelectError}
+              className={cn(
+                variant === 'livekit' && [
+                  TOGGLE_VARIANT_1,
+                  'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
+                ],
+              )}
+            />
+          )}
+
+          {/* Toggle Camera */}
+          {visibleControls.camera && (
+            <AgentTrackControl
+              variant={variant === 'outline' ? 'outline' : 'default'}
+              kind="videoinput"
+              aria-label="Toggle camera"
+              source={Track.Source.Camera}
+              pressed={cameraToggle.enabled}
+              pending={cameraToggle.pending}
+              disabled={cameraToggle.pending}
+              onPressedChange={cameraToggle.toggle}
+              onMediaDeviceError={handleCameraDeviceSelectError}
+              onActiveDeviceChange={handleVideoDeviceChange}
+              className={cn(
+                variant === 'livekit' && [
+                  TOGGLE_VARIANT_1,
+                  'rounded-full [&_button:first-child]:rounded-l-full [&_button:last-child]:rounded-r-full',
+                ],
+              )}
+            />
+          )}
+
+          {/* Toggle Screen Share */}
+          {visibleControls.screenShare && (
+            <AgentTrackToggle
+              variant={variant === 'outline' ? 'outline' : 'default'}
+              aria-label="Toggle screen share"
+              source={Track.Source.ScreenShare}
+              pressed={screenShareToggle.enabled}
+              disabled={screenShareToggle.pending}
+              onPressedChange={screenShareToggle.toggle}
+              className={cn(variant === 'livekit' && [TOGGLE_VARIANT_2, 'rounded-full'])}
+            />
+          )}
+
+          {/* Toggle Transcript */}
+          {visibleControls.chat && (
+            <Toggle
+              variant={variant === 'outline' ? 'outline' : 'default'}
+              pressed={isChatOpen || isChatOpenUncontrolled}
+              aria-label="Toggle transcript"
+              onPressedChange={(state) => {
+                if (!onIsChatOpenChange) setIsChatOpenUncontrolled(state);
+                else onIsChatOpenChange(state);
+              }}
+              className={agentTrackToggleVariants({
+                variant: variant === 'outline' ? 'outline' : 'default',
+                className: cn(variant === 'livekit' && [TOGGLE_VARIANT_2, 'rounded-full']),
+              })}
+            >
+              <MessageSquareTextIcon />
+            </Toggle>
+          )}
+        </div>
+
+        {/* Disconnect */}
+        {visibleControls.leave && (
+          <AgentDisconnectButton
+            onClick={onDisconnect}
+            disabled={!isConnected}
+            className={cn(
+              variant === 'livekit' &&
+                'rounded-full bg-destructive/10 dark:bg-destructive/10 text-destructive hover:bg-destructive/20 dark:hover:bg-destructive/20 focus:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/4 font-mono text-xs font-bold tracking-wider',
+            )}
+          >
+            <span className="hidden md:inline">END CALL</span>
+            <span className="inline md:hidden">END</span>
+          </AgentDisconnectButton>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-input-controls.ts b/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-input-controls.ts
new file mode 100644
index 000000000..e89f173be
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-input-controls.ts
@@ -0,0 +1,136 @@
+import { useCallback, useMemo } from 'react';
+import { Track } from 'livekit-client';
+import {
+  type TrackReferenceOrPlaceholder,
+  useLocalParticipant,
+  usePersistentUserChoices,
+  useTrackToggle,
+} from '@livekit/components-react';
+
+export interface UseInputControlsProps {
+  saveUserChoices?: boolean;
+  onDisconnect?: () => void;
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
+}
+
+export interface UseInputControlsReturn {
+  micTrackRef: TrackReferenceOrPlaceholder;
+  microphoneToggle: ReturnType<typeof useTrackToggle<Track.Source.Microphone>>;
+  cameraToggle: ReturnType<typeof useTrackToggle<Track.Source.Camera>>;
+  screenShareToggle: ReturnType<typeof useTrackToggle<Track.Source.ScreenShare>>;
+  handleAudioDeviceChange: (deviceId: string) => void;
+  handleVideoDeviceChange: (deviceId: string) => void;
+  handleMicrophoneDeviceSelectError: (error: Error) => void;
+  handleCameraDeviceSelectError: (error: Error) => void;
+}
+
+export function useInputControls({
+  saveUserChoices = true,
+  onDeviceError,
+}: UseInputControlsProps = {}): UseInputControlsReturn {
+  const { microphoneTrack, localParticipant } = useLocalParticipant();
+
+  const microphoneToggle = useTrackToggle({
+    source: Track.Source.Microphone,
+    onDeviceError: (error) => onDeviceError?.({ source: Track.Source.Microphone, error }),
+  });
+
+  const cameraToggle = useTrackToggle({
+    source: Track.Source.Camera,
+    onDeviceError: (error) => onDeviceError?.({ source: Track.Source.Camera, error }),
+  });
+
+  const screenShareToggle = useTrackToggle({
+    source: Track.Source.ScreenShare,
+    onDeviceError: (error) => onDeviceError?.({ source: Track.Source.ScreenShare, error }),
+  });
+
+  const micTrackRef = useMemo(() => {
+    return {
+      participant: localParticipant,
+      source: Track.Source.Microphone,
+      publication: microphoneTrack,
+    };
+  }, [localParticipant, microphoneTrack]);
+
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices });
+
+  const handleAudioDeviceChange = useCallback(
+    (deviceId: string) => {
+      saveAudioInputDeviceId(deviceId ?? 'default');
+    },
+    [saveAudioInputDeviceId]
+  );
+
+  const handleVideoDeviceChange = useCallback(
+    (deviceId: string) => {
+      saveVideoInputDeviceId(deviceId ?? 'default');
+    },
+    [saveVideoInputDeviceId]
+  );
+
+  const handleToggleCamera = useCallback(
+    async (enabled?: boolean) => {
+      if (screenShareToggle.enabled) {
+        screenShareToggle.toggle(false);
+      }
+      await cameraToggle.toggle(enabled);
+      // persist video input enabled preference
+      saveVideoInputEnabled(!cameraToggle.enabled);
+    },
+    [cameraToggle, screenShareToggle, saveVideoInputEnabled]
+  );
+
+  const handleToggleMicrophone = useCallback(
+    async (enabled?: boolean) => {
+      await microphoneToggle.toggle(enabled);
+      // persist audio input enabled preference
+      saveAudioInputEnabled(!microphoneToggle.enabled);
+    },
+    [microphoneToggle, saveAudioInputEnabled]
+  );
+
+  const handleToggleScreenShare = useCallback(
+    async (enabled?: boolean) => {
+      if (cameraToggle.enabled) {
+        cameraToggle.toggle(false);
+      }
+      await screenShareToggle.toggle(enabled);
+    },
+    [cameraToggle, screenShareToggle]
+  );
+  const handleMicrophoneDeviceSelectError = useCallback(
+    (error: Error) => onDeviceError?.({ source: Track.Source.Microphone, error }),
+    [onDeviceError]
+  );
+
+  const handleCameraDeviceSelectError = useCallback(
+    (error: Error) => onDeviceError?.({ source: Track.Source.Camera, error }),
+    [onDeviceError]
+  );
+
+  return {
+    micTrackRef,
+    cameraToggle: {
+      ...cameraToggle,
+      toggle: handleToggleCamera,
+    },
+    microphoneToggle: {
+      ...microphoneToggle,
+      toggle: handleToggleMicrophone,
+    },
+    screenShareToggle: {
+      ...screenShareToggle,
+      toggle: handleToggleScreenShare,
+    },
+    handleAudioDeviceChange,
+    handleVideoDeviceChange,
+    handleMicrophoneDeviceSelectError,
+    handleCameraDeviceSelectError,
+  };
+}
diff --git a/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-publish-permissions.ts b/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-publish-permissions.ts
new file mode 100644
index 000000000..835ecd3e0
--- /dev/null
+++ b/packages/shadcn/components/agents-ui/agent-control-bar/hooks/use-publish-permissions.ts
@@ -0,0 +1,42 @@
+import { Track } from 'livekit-client';
+import { useLocalParticipantPermissions } from '@livekit/components-react';
+
+const trackSourceToProtocol = (source: Track.Source) => {
+  // NOTE: this mapping avoids importing the protocol package as that leads to a significant bundle size increase
+  switch (source) {
+    case Track.Source.Camera:
+      return 1;
+    case Track.Source.Microphone:
+      return 2;
+    case Track.Source.ScreenShare:
+      return 3;
+    default:
+      return 0;
+  }
+};
+
+export interface PublishPermissions {
+  camera: boolean;
+  microphone: boolean;
+  screenShare: boolean;
+  data: boolean;
+}
+
+export function usePublishPermissions(): PublishPermissions {
+  const localPermissions = useLocalParticipantPermissions();
+
+  const canPublishSource = (source: Track.Source) => {
+    return (
+      !!localPermissions?.canPublish &&
+      (localPermissions.canPublishSources.length === 0 ||
+        localPermissions.canPublishSources.includes(trackSourceToProtocol(source)))
+    );
+  };
+
+  return {
+    camera: canPublishSource(Track.Source.Camera),
+    microphone: canPublishSource(Track.Source.Microphone),
+    screenShare: canPublishSource(Track.Source.ScreenShare),
+    data: localPermissions?.canPublishData ?? false,
+  };
+}
diff --git a/packages/shadcn/index.ts b/packages/shadcn/index.ts
index 38da93b4c..a9b3a0427 100644
--- a/packages/shadcn/index.ts
+++ b/packages/shadcn/index.ts
@@ -2,3 +2,4 @@ export * from './components/agents-ui/audio-visualizer-bar/audio-visualizer-bar'
 export * from './components/agents-ui/agent-track-toggle';
 export * from './components/agents-ui/agent-track-control';
 export * from './components/agents-ui/agent-disconnect-button';
+export * from './components/agents-ui/agent-control-bar/agent-control-bar';