frontend-env-vars-issue.mdā¢1.63 kB
# Frontend Connection Issue: Missing Environment Variables
## Problem
The LiveKit Voice Assistant Frontend was failing to connect with the error:
```
Error: LIVEKIT_URL is not defined
```
The frontend was compiling successfully but the `/api/connection-details` endpoint was returning 500 errors when trying to authenticate.
## Root Cause
The frontend requires specific environment variables to connect to the LiveKit server, but the `.env.local` file was missing from the frontend directory. Without this file, the Next.js application couldn't access the required LiveKit configuration.
## Solution
Created `/Users/admin/Code/github.com/mbailey/voicemode/voice_mode/frontend/.env.local` with the required variables:
```bash
LIVEKIT_URL=ws://localhost:7880
LIVEKIT_API_KEY=devkey
LIVEKIT_API_SECRET=secret
LIVEKIT_ACCESS_PASSWORD=voicemode123
```
## Impact
- **Before**: Frontend loaded but authentication failed (500 errors)
- **After**: Frontend successfully connects and generates valid LiveKit tokens
## Prevention
The frontend installation process should automatically create the `.env.local` file with default values when setting up the voice assistant frontend. This would prevent users from encountering this connection issue during initial setup.
## Technical Details
- The error occurred in `app/api/connection-details/route.ts` at line 29
- The API endpoint expects `LIVEKIT_URL` to generate room tokens
- Without proper environment variables, the LiveKit client cannot establish WebSocket connections
- Frontend now runs successfully on http://localhost:3001 (port 3000 was in use)
## Date
August 13, 2025