⚡ Dialogue Spark Viz

Interactive AI voice agent paired with real-time conversation telemetry, dot-matrix audio spectrum visualization, and visual turn-taking state machine. Live at dialogue-spark-viz.vercel.app.

Local Development

1. Install dependencies:

npm install

2. Create a local environment file:

cp .env.example .env.local

3. Add your OpenAI API key to .env.local:

OPENAI_API_KEY=your_openai_api_key

4. Start the dev server:

npm run dev

The app runs locally at http://localhost:8080.

Vercel Deployment

This project should be deployed as a Next.js application.

Use these Vercel project settings:

• Framework Preset: Next.js
• Install Command: npm install
• Build Command: npm run build
• Output Directory: leave empty/default
• Root Directory: project root

Add this environment variable in Vercel under Project -> Settings -> Environment Variables:

OPENAI_API_KEY=your_openai_api_key

Use the exact variable name OPENAI_API_KEY. Do not expose it with a NEXT_PUBLIC_ prefix.

The app uses gpt-realtime-mini by default. Change REALTIME_MODEL in src/lib/realtimeConfig.ts if you want to use another realtime voice model your OpenAI account has access to, such as gpt-realtime-2.

After changing environment variables or build settings, redeploy the latest production deployment.

Important Files

• app/page.tsx: renders the voice agent page.
• app/api/route.ts: creates short-lived OpenAI realtime client secrets on the server.
• src/components/VoiceAgent.tsx: browser voice-session UI and realtime session connection.
• src/contexts/AuthContext.tsx: local demo authentication and usage limits.