feat: LiveKit OSS Shadcn components

[thomasyuill-livekit]

PR Summary: Agents UI - Shadcn Component Library

Overview

This PR introduces @agents-ui, a new shadcn-compatible component library for building voice-first agent interfaces with LiveKit.

Key Changes

🔧 Infrastructure

• Updated livekit-client to ^2.16.0 and @livekit/protocol to ^1.43.4
• React 19 support in storybook dependencies
• New env variable: VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID for agent development
• Renamed CSS class .audio-bar-visualizer → .audio-visualizer-bar for consistency

📚 Storybook Updates

• Upgraded from Storybook v7 → v10
• Added Tailwind CSS v4 support via @tailwindcss/vite
• New AgentSessionProvider decorator with sandbox token server support
• Added next-themes integration for light/dark mode testing
• New stories for all agents-ui components

🆕 New Package: packages/shadcn (@agents-ui)

A complete component library featuring:

Session Management

• AgentSessionProvider - Context provider for agent sessions with automatic audio rendering
• AgentSessionAudio - Room audio renderer wrapper
• AgentSessionStartAudioButton - Handle browser autoplay restrictions

Media Controls

• AgentTrackToggle - Toggle button for mic/camera/screen share with icons & loading states
• AgentTrackControl - Full media control with device selection dropdown
• AgentControlBar - Complete control bar prefab with chat input support
• AgentDisconnectButton - End session button

Audio Visualizers (5 variants)

• AudioVisualizerBar - Linear bar visualization
• AudioVisualizerRadial - Circular/radial visualization
• AudioVisualizerGrid - Dot matrix grid visualization
• AudioVisualizerWave - WebGL shader-based wave (uses ReactShader)
• AudioVisualizerAura - WebGL shader-based aura effect

Chat Components

• AgentChatIndicator - Animated typing/thinking indicator
• AgentChatTranscript - Conversation display component

Utilities

• ReactShader - WebGL shader component (forked from react-shaders)
• Base UI primitives: Button, Toggle, Select, Tooltip, Separator, etc.

Installation

Users can install components via:

pnpm dlx shadcn@latest add @agents-ui/{componentName}

After configuring their components.json:

{
  "registries": {
    "@agents-ui": "https://ui.livekit.io/r/{name}.json"
  }
}

Usage Example

import { useSession } from '@livekit/components-react';
import { TokenSource } from 'livekit-client';
import { AgentSessionProvider } from '@agents-ui/agent-session-provider';
import { AgentControlBar } from '@agents-ui/agent-control-bar';

export default function VoiceAgent() {
  const session = useSession(TokenSource.sandboxTokenServer('token-XXXXXX'));

  return (
    <AgentSessionProvider session={session}>
      <AgentControlBar />
    </AgentSessionProvider>
  );
}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 38de718

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
LiveKitRoom only	6 KB (0%)
LiveKitRoom with VideoConference	32.46 KB (0%)
All exports	43.29 KB (0%)