VAPI Voice AI Assistant

A standalone, zero-dependency voice AI widget built with the VAPI platform. Drop it into any project or open it directly in a browser — no build step required.

---

Screenshots

1. Listening — User Speaking

2. AI Speaking

3. Connecting

4. Microphone Permission Modal

5. Idle — Ready to Chat

The orb color shifts from cyan (listening) to purple (AI speaking) with matching status pill and audio visualizer bars reacting to volume in real time.

---

Features

• Real-time voice conversations powered by VAPI
• Live conversation transcript with speaker labels
• Audio visualizer bars that react to volume level
• Animated microphone orb with state-driven glow effects
• Status pill: Ready / Connecting / Listening / AI speaking / Ended
• Microphone permission modal before any audio access
• Toast notifications for connection events
• Dark theme with cyan accent — fully responsive
• Pure vanilla JS + CSS, no frameworks or build tools

---

Quick Start

# 1. Clone or download this project
git clone <your-repo-url>
cd vapi-voice-assistant

# 2. Open config.js and fill in your credentials (see VAPI Setup below)

# 3. Open index.html in a browser
#    (serve via a local HTTP server to avoid CORS issues)
npx serve .
# or
python3 -m http.server 8080

Note: Modern browsers require a secure context (HTTPS or localhost) for microphone access. Use a local HTTP server rather than opening the file directly with file://.

---

VAPI Setup

1. Create a VAPI Account

Go to https://dashboard.vapi.ai and sign up for a free account.

2. Create an Assistant

1. In the VAPI dashboard, click Assistants → Create Assistant
2. Give it a name (e.g., "Aria")
3. Choose a voice (ElevenLabs, Deepgram, etc.)
4. Add a System Prompt (see template below)
5. Save the assistant and copy the Assistant ID from the URL or settings panel

3. Get Your Public Key

1. Go to Settings → API Keys
2. Copy your Public / Web key (starts with a long token — safe to include in browser code)

4. Fill in config.js

const VA_CONFIG = {
  vapiPublicKey: "your-public-key-here",
  assistantId: "your-assistant-id-here",
};

---

Suggested System Prompt

Use this as a starting point for your assistant's system prompt in the VAPI dashboard. Customize it for your use case.

You are Aria, a friendly and knowledgeable AI voice assistant.

Your role is to:
- Answer questions clearly and concisely
- Help users find the information they need
- Offer to schedule a meeting or callback when appropriate

Guidelines:
- Keep responses short (2–4 sentences) since this is a voice interface
- Speak naturally — avoid bullet points or markdown
- If you don't know something, say so honestly and offer to connect the user with a human
- Always be warm, professional, and helpful

If someone asks to schedule a meeting or speak to a person, acknowledge the request
and let them know someone will be in touch shortly.

---

File Structure

vapi-voice-assistant/
├── index.html        # Complete single-page UI (HTML + CSS + JS inline)
├── config.js         # Your VAPI credentials (fill this in)
├── screenshots/      # UI screenshots for documentation
├── README.md         # This file
└── .gitignore

---

Tech Stack

Layer	Technology
UI	Vanilla HTML5 / CSS3 / ES2020 JavaScript
Voice SDK	@vapi-ai/web via esm.sh CDN
Styling	CSS custom properties, CSS animations, no frameworks
Build	None — open index.html directly

---

UI States

The assistant has 5 visual states, each with distinct orb glow, status pill color, and visualizer behavior:

State	Orb Color	Status Pill	Visualizer
Idle	Cyan dim	Cyan	Static flat bars
Connecting	Cyan glow	Yellow	Gentle bounce
Listening	Cyan bright	Cyan	Volume-reactive
AI Speaking	Purple	Purple	Volume-reactive
Ended	Red dim	Red	Flat red bars

---

Keeping Credentials Out of Git

If you want to commit this project without exposing real keys:

1. Rename config.js → config.local.js
2. Uncomment the relevant line in .gitignore
3. Create a placeholder config.js with YOUR_... values for the repo

---

License

MIT — use freely in personal and commercial projects.