skills.rest
shegeblaqofficials
shegeblaqofficialsCOMMUNITY
Explore all skills by this author →
Website𝕏@mr_sh3gunGitHub

livekit-agents

Connect React components to a LiveKit agent backend for voice interactions.

Updated Aug 27, 2026
Search Tags:#react#agent#voice#session#livekit#client
One-click install
npx skills add https://github.com/shegeblaqofficials/stridify-web --skill livekit-agents-shegeblaqofficials
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: livekit-agents
Source: https://github.com/shegeblaqofficials/stridify-web/tree/main/.agents/skills/livekit-agents
Command: npx skills add https://github.com/shegeblaqofficials/stridify-web --skill livekit-agents-shegeblaqofficials

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build client-only voice UI in Next.js that connects to an existing LiveKit agent backend. Use when adding a voice assistant, microphone button, floating voice widget, or embedded voice session to a page. The agent server, worker, and TTS are already running — only build the React client.

Core Features & Use Cases

  • Client-only React components that stream audio to/from an already-deployed LiveKit agent.
  • Do not build or modify the agent worker, TTS, instructions, or backend logic — those already exist.
  • Embedding a voice session on a page (e.g., travel guide, product advisor) with a floating widget or modal.

Quick Start

Create the client-side LiveKit UI in a Next.js page, gated behind an activation control, and render the session UI using the token from /api/livekit/token?template=<slug>.

Frequently Asked Questions about livekit-agents

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a voice assistant UI to a Next.js page?▼

To add a voice assistant UI in Next.js, use client-side React components that connect to an existing LiveKit agent backend. You render RoomAudioRenderer inside a SessionProvider and use useAgent for state-driven interactions.

What is a client-only LiveKit voice session?▼

A client-only LiveKit voice session streams audio to and from an already-deployed LiveKit agent using React components. It focuses strictly on the frontend UI, such as a microphone button or floating widget, without modifying the backend agent worker or TTS logic.

Do I need to build the agent worker to use this LiveKit voice UI pattern?▼

No, you do not build or modify the agent worker, TTS, or backend logic. This pattern assumes the LiveKit agent server is already running, and you only build the React client to connect to the existing backend.

How does the React client get a LiveKit token for the voice session?▼

The React client obtains a LiveKit token using TokenSource.endpoint. The session UI is rendered using a token fetched from an API route like /api/livekit/token?template=<slug>.

Can I embed a floating voice widget on a page with LiveKit agents?▼

Yes, you can embed a voice session on a page as a floating widget or modal. This is achieved by applying the client-side React pattern to connect to the deployed LiveKit agent backend for voice interactions.

Related Skills

Explore More Software Engineering Skills→
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
TIAN0517TIAN0517

ASR

Transcribe spoken audio from files or base64 inputs into text.

Community
Intermediate
FutureAtomsFutureAtoms
1

livekit-react-native

Integrate LiveKit React Native SDK for real-time audio and video communication.

Community
Intermediate
jokken79jokken79
1

voice-ai-development

Develop real-time voice AI applications using OpenAI Realtime API, Deepgram, ElevenLabs, and LiveKit.

Community
Advanced