The Best shadcn Component Library for Voice AI Agents

LiveKit
3,147 views March 4, 2026

👉 Sign up for LiveKit Cloud: https://cloud.livekit.io/signup?utm_source=youtube&utm_medium=video&utm_campaign=devrel&utm_content=v9sUj8rFf7I In this video, I'll show you how to add production-ready UI components to your voice AI agent using LiveKit Agents UI — the best shadcn-based component library built specifically for LiveKit Agents. You'll learn: ✅ Why we built LiveKit Agents UI (and the problem it solves) ✅ How to add audio visualizers (Bar, Wave, Radial, Grid, Aura) to your React app ✅ How to wire components to a live LiveKit Agent in minutes ✅ How to get started fast with the agent-starter-react repo ✅ How to install components manually in a fresh Next.js project ✅ How to use a fully custom GLSL shader visualizer that reacts to live audio LiveKit Agents UI follows the shadcn pattern — you install components directly into your project, you own the code, and you can customize everything. 📚 Resources 📚 Agent docs: https://docs.livekit.io/agents/?utm_source=youtube&utm_medium=video&utm_campaign=devrel&utm_content=v9sUj8rFf7I ⏱ Chapters ⏱ 00:00 - Intro 02:26 - Deploy basic agent 03:43 - Agents-UI via Quickstart Template 06:58 - Agents-ui via Fresh Next.js App 🤝 Join the Community Slack: https://community.livekit.io/?utm_source=youtube&utm_medium=video&utm_campaign=devrel&utm_content=v9sUj8rFf7I #livekit #ai #voiceai

Keyboard shortcuts

On. Switch them off if they collide with your assistive tools; ? still opens this sheet.

Go to

Press g then the letter.

  • gh Latest
  • gs Sources
  • gm Media
  • gv Videos
  • gp Podcasts
  • gc Calendar
  • gd Decoder
  • gz Dataviz
  • ga Datasets
  • gb Blog
  • gk Markets
  • gj Careers
  • gn Prompt Notebook

On this page

  • / Focus search, where there is one
  • t Back to top
  • ? This list
  • Esc Close