Cal.ai

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack web development

• GitHubfree

  Source control and deployment pipeline connection

• 

  Vapi AI AccountFree tier available

  Voice agent orchestration infrastructure for handling STT, LLM, and TTS streaming

• 

  Twilio AccountPay-as-you-go (~$1/mo per number)

  Phone number provisioning and SIP calling connectivity

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding multi-file integrations, API routes, and websocket handlers

• 

  Cursor

  IDE for fine-tuning UI components, styling, and debugging state bugs interactively

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Supabase database tables for users, triggers, contacts, and call logs.

   Create a new Next.js 16 application using the App Router, TypeScript, and Tailwind CSS. Initialize shadcn/ui components including buttons, dialogs, cards, inputs, and tables. Set up a Supabase client configuration file using environment variables for SUPABASE_URL and SUPABASE_ANON_KEY. Create SQL migration scripts for tables: 'profiles' (id, email, credits), 'contacts' (id, user_id, name, phone_number), 'workflows' (id, user_id, event_type, prompt_template), and 'call_logs' (id, user_id, contact_id, status, transcript, duration_seconds, created_at). Implement robust TypeScript types for all database models and verify clean compilation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Dashboard Shell

   Implement Supabase authentication and build the main dashboard layout with navigation, credit counter, and active workflow views.

   Build Supabase email/password authentication flows including login, signup, and auth middleware protected routes in Next.js. Create a polished main dashboard layout using Tailwind CSS featuring a sidebar navigation (Dashboard, Workflows, Call Logs, Settings), a top header displaying user credits remaining, and a responsive main content area. Add a dashboard home view summarizing total calls made, completed bookings, and recent call log snippets with placeholder data states.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Calendar Integration and Event Slots

   Integrate Google Calendar API to allow users to connect their calendars, fetch available time slots, and insert booking events directly.

   Implement Google Calendar OAuth connection flow in Next.js, securely storing encrypted tokens in Supabase. Build a backend service utility that fetches free/busy calendar time slots using the Google Calendar API based on a specified date range and user timezone. Create an API endpoint /api/calendar/slots that returns available scheduling slots, and another endpoint /api/calendar/book that inserts a confirmed meeting event directly into the user's connected calendar.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Workflow Triggers and Vapi AI Voice Agent Integration

   Create a workflow trigger system and integrate the Vapi API to programmatically dispatch AI phone calls to leads.

   Build a workflow configuration UI where users can define trigger events (e.g., 'New Lead Form Submitted', 'Meeting Reminder 24h prior') and customize the AI voice agent prompt, tone, and system instructions. Implement a backend service that makes an authenticated API request to Vapi AI (vapi.ai) to initiate an outbound phone call via Twilio. Ensure the payload includes the contact's phone number, customized prompt variables, and a webhook URL callback for call updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Webhook Receiver, Transcript Logging, and Call Analytics

   Handle incoming webhooks from Vapi to record call transcripts, calculate duration, deduct credits, and trigger calendar bookings upon successful calls.

   Create a secure API route /api/webhooks/vapi to receive real-time webhook events from Vapi AI, including call-started, call-ended, transcript-update, and function-call events. When a call completes successfully with intent to book, parse the extracted date/time from the transcript and invoke the calendar booking service. Store the complete call transcript, duration, sentiment score, and status in the 'call_logs' table, and deduct corresponding credits from the user's balance. Build a Call Logs page in the frontend to display transcript histories with audio playback links and status badges.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06UI Polish, Credit Management, and End-to-End Testing

   Add credit bundle purchasing simulation screens, polish UI states with loading spinners and toast notifications, and test the full voice trigger flow.

   Build a credit management and settings page where users can view credit consumption history and simulate purchasing credit bundles. Add comprehensive error handling, toast notifications using Sonner, loading skeletons for asynchronous dashboard data, and empty states across all pages. Write integration tests for the workflow trigger and webhook handling pipeline using Jest to verify robust error recovery.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cal.ai