GG Hair Salon

A premium hair salon web application with AI-powered voice booking and text chat. Customers can browse services, check appointment availability, and book appointments instantly by talking to an AI voice assistant.

Features

• AI Voice Booking — Talk to Nina, the AI salon assistant, to check real-time availability and book appointments via natural conversation (powered by Retell AI)
• AI Text Chat — Ask questions about services, pricing, and hair care tips (powered by Google Gemini)
• Services Menu — Browse 16+ salon services across Haircuts, Coloring, Treatments, and Styling with transparent pricing
• Gallery — Masonry image grid showcasing salon transformations
• Fully Responsive — Optimized for desktop, tablet, and mobile devices
• Google Calendar Integration — Appointments are booked directly into Google Calendar via n8n workflows

Screenshots

Desktop	Mobile

Tech Stack

• Frontend: Vanilla HTML, CSS, JavaScript
• Backend: Node.js, Express
• Voice AI: Retell AI WebClient SDK
• Text Chat: Google Gemini 2.5 Flash API
• Automation: n8n workflows (availability checking + appointment booking)
• Calendar: Google Calendar API (via n8n)
• Deployment: Vercel (serverless functions)
• Fonts: Inter + Playfair Display (Google Fonts)

Architecture

User clicks "Book by Voice"
  → Frontend POST /api/create-web-call
    → Backend calls Retell API (returns access_token)
  → Frontend starts WebRTC voice session via Retell SDK
    → Retell agent calls n8n webhook to check Google Calendar availability
    → Retell agent calls n8n webhook to book appointment
  → Appointment confirmed in Google Calendar

User types in chat
  → Frontend POST /api/chat
    → Backend calls Gemini API with salon context
  → AI responds with service info, pricing, hair care tips

Getting Started

Prerequisites

• Node.js 18+
• Retell AI account with configured agent
• Google Gemini API key
• n8n instance with availability/booking workflows

Installation

git clone https://github.com/alfredang/gghairsalon.git
cd gghairsalon
npm install

Environment Variables

Create a .env file in the root directory:

RETELL_API_KEY=your_retell_api_key
RETELL_AGENT_ID=your_retell_agent_id
GEMINI_API_KEY=your_gemini_api_key

Run Locally

npm start

Open http://localhost:3000

Deploy to Vercel

vercel --prod

Project Structure

├── index.html              # Single-page salon website
├── main.js                 # Frontend JS (Retell voice, Gemini chat, services)
├── styles.css              # Rose gold/mauve salon theme
├── server.js               # Express dev server
├── vercel.json             # Vercel deployment config
├── api/
│   ├── create-web-call.js  # Serverless: Retell web call creation
│   └── chat.js             # Serverless: Gemini text chat
└── screenshots/            # App screenshots

License

MIT