Agent Starter for React

This is a starter template for LiveKit Agents that provides a simple voice interface using the LiveKit JavaScript SDK. It supports voice, transcriptions, and virtual avatars.

Also available for: Android • Flutter • Swift • React Native

Features:

• Real-time voice interaction with LiveKit Agents
• Camera video streaming support
• Screen sharing capabilities
• Audio visualization and level monitoring
• Virtual avatar integration
• Light/dark theme switching with system preference detection
• Customizable branding, colors, and UI text via configuration

This template is built with Next.js and is free for you to use or modify as you see fit.

Project structure

agent-starter-react/
├── app/
│   ├── (app)/
│   ├── api/
│   ├── components/
│   ├── fonts/
│   ├── globals.css
│   └── layout.tsx
├── components/
│   ├── livekit/
│   ├── ui/
│   ├── app.tsx
│   ├── session-view.tsx
│   └── welcome.tsx
├── hooks/
├── lib/
├── public/
└── package.json

Getting started

Tip

If you'd like to try this application without modification, you can deploy an instance in just a few clicks with LiveKit Cloud Sandbox.

Run the following command to automatically clone this template.

lk app create --template agent-starter-react

Then run the app with:

pnpm install
pnpm dev

And open http://localhost:3000 in your browser.

You'll also need an agent to speak with. Try our Voice AI Quickstart for the easiest way to get started.

Configuration

This starter is designed to be flexible so you can adapt it to your specific agent use case. You can easily configure it to work with different types of inputs and outputs:

Example: App configuration (app-config.ts)

export const APP_CONFIG_DEFAULTS = {
  companyName: 'LiveKit',
  pageTitle: 'LiveKit Voice Agent',
  pageDescription: 'A voice agent built with LiveKit',
  supportsChatInput: true,
  supportsVideoInput: true,
  supportsScreenShare: true,
  logo: '/lk-logo.svg',
  accent: '#002cf2',
  logoDark: '/lk-logo-dark.svg',
  accentDark: '#1fd5f9',
  startButtonText: 'Start call',
};

You can update these values in app-config.ts to customize branding, features, and UI text for your deployment.

Environment Variables

You'll also need to configure your LiveKit credentials in .env.local (copy .env.example if you don't have one):

LIVEKIT_API_KEY=your_livekit_api_key
LIVEKIT_API_SECRET=your_livekit_api_secret
LIVEKIT_URL=https://your-livekit-server-url

These are required for the voice agent functionality to work with your LiveKit project.

Contributing

This template is open source and we welcome contributions! Please open a PR or issue through GitHub, and don't forget to join us in the LiveKit Community Slack!