CallCenter IA

The Ultimate Next.js AI Voice Agent SaaS Boilerplate

CallCenter IA is a premium, production-ready Next.js 15 template designed to build, manage, and scale AI Voice Agents. Inspired by industry leaders like Vapi.ai and Retell AI, it gives you a massive head start in the fastest-growing SaaS niche.

This is a functional-first UI boilerplate. Every screen, interaction, and animation is crafted to look and feel like a high-end, production-ready SaaS. The BYOK (Bring Your Own Key) architecture lets your users connect their own AI and telephony providers instantly.

Key Highlights

• Live Call Monitoring with real-time transcripts and "Barge-In" capability
• Advanced Prompt Builder with split-screen editor and live simulator
• Embeddable Web Widget generator with live preview
• Webhooks & Automations engine for CRM sync, Slack alerts, and more
• Sentiment Analysis Timeline with Recharts visualizations
• Knowledge Base (RAG) with PDF upload and web crawling
• Voice Cloning interface (ElevenLabs-style)
• Cinematic Marketing Pages with Framer Motion animations
• Interactive Setup Wizard for guided onboarding

Tech Stack

Requirements

Installation

Follow these steps to get CallCenter IA running on your local machine.

unzip callcenter-ia.zip -d callcenter-ia
cd callcenter-ia

npm install

cp .env.example .env.local

npm run db:generate

npm run db:migrate

npm run db:seed

npm run dev

Setup Wizard

On first launch, CallCenter IA presents an interactive Setup Wizard at /setup that guides you through the initial configuration. The wizard follows the BYOK (Bring Your Own Key) architecture.

Wizard Steps

Step 1 -- License Verification

Enter your Envato purchase code to verify your license. The application calls /api/verify-license to validate the code before proceeding.

Step 2 -- Database Connection

Configure and test your PostgreSQL connection. The wizard calls /api/setup/test-db to verify connectivity, then /api/setup/migrate to run migrations.

Step 3 -- API Keys (BYOK)

Enter your third-party service keys. All fields are optional and can be configured later from Settings:

• OpenAI -- GPT models for AI agent conversations
• ElevenLabs -- Text-to-speech and voice cloning
• Deepgram -- Speech-to-text transcription
• Twilio -- Phone number provisioning and call routing
• Stripe -- Subscription billing

Step 4 -- Create Admin Account

Set up your initial admin user via /api/setup/create-admin. This account has full access to all dashboard features.

Configuration

All configuration is managed through environment variables in .env.local. Below is a complete reference of every supported variable.

Core

AI / Voice Providers

Telephony

Payments

Google Calendar

Notifications

Demo Mode

Features

CallCenter IA includes 12+ fully designed dashboard modules, each with interactive UI, animations, and realistic data flows.

Marketing Pages

The template includes a fully modular marketing site with Framer Motion animations:

• / -- Landing page with hero, features, and social proof
• /pricing -- Three-tier pricing table
• /about -- Company and team page
• /features -- Detailed feature showcase
• /blog -- Blog listing page
• /developers -- API documentation portal
• /contact -- Contact form
• /careers, /privacy, /terms, /cookies -- Legal and careers pages

Integrations

Twilio (Telephony)

Twilio powers phone number provisioning, inbound/outbound calling, and call recording.

1. Create a Twilio account and note your Account SID and Auth Token
2. Purchase a phone number from the Twilio console
3. Set the Voice webhook URL to https://yourdomain.com/api/twilio/webhook (HTTP POST)
4. Add TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, and TWILIO_PHONE_NUMBER to your .env.local

OpenAI (Conversation AI)

OpenAI GPT models power the AI agent conversations, generating context-aware responses in real-time.

1. Get an API key from platform.openai.com
2. Set OPENAI_API_KEY in your environment
3. Configure model selection per-agent in the Agents dashboard (GPT-4o recommended)

ElevenLabs (Text-to-Speech)

ElevenLabs provides ultra-realistic voice synthesis and custom voice cloning.

1. Sign up at elevenlabs.io
2. Copy your API key from Profile > API Keys
3. Set ELEVENLABS_API_KEY in your environment
4. Use the Voice Cloning page to create and manage custom voices

Deepgram (Speech-to-Text)

Deepgram provides real-time speech recognition for live call transcription.

1. Create an account at deepgram.com
2. Generate an API key from the Deepgram console
3. Set DEEPGRAM_API_KEY in your environment

Stripe (Billing)

Stripe handles subscription billing, plan management, and payment processing.

1. Create a Stripe account
2. Get your keys from Developers > API Keys
3. Set STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY in your environment
4. Create a webhook endpoint pointing to https://yourdomain.com/api/stripe/webhook
5. Set STRIPE_WEBHOOK_SECRET from the webhook signing secret

Google Calendar

Enables AI agents to book meetings and callbacks directly into Google Calendar.

1. Create a project in Google Cloud Console
2. Enable the Google Calendar API
3. Create OAuth 2.0 credentials (Web application type)
4. Set GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_REDIRECT_URI

Slack (Notifications)

Receive real-time notifications about calls, transfers, and alerts in Slack.

1. Create a Slack App at api.slack.com/apps
2. Enable Incoming Webhooks and copy the webhook URL
3. Set SLACK_WEBHOOK_URL in your environment
4. Optionally configure a Bot Token for richer integrations via SLACK_BOT_TOKEN

Customization

Theme Customizer

The application uses shadcn/ui with CSS custom properties for theming. The dark theme is defined in src/app/globals.css under the .dark class.

Key design tokens you can modify:

.dark {
  --background: oklch(0.145 0 0);     /* zinc-950 */
  --card: oklch(0.205 0 0);            /* zinc-900 */
  --primary: oklch(0.922 0 0);         /* zinc-200 */
  --accent: oklch(0.269 0 0);           /* zinc-800 */
  --sidebar-primary: oklch(0.488 0.243 264.376); /* indigo */
  --border: oklch(1 0 0 / 10%);        /* subtle white */
}

Branding

• Logo: Replace the SVG in the sidebar layout component at src/app/(dashboard)/layout/
• Favicon: Replace src/app/favicon.ico
• Fonts: Custom fonts are loaded in src/app/layout.tsx. The theme uses the system font stack by default
• Colors: Modify CSS custom properties in globals.css to change the accent color scheme

Adding Pages

The application uses the Next.js App Router. To add a new dashboard page:

// Create a new file at:
src/app/(dashboard)/your-page/page.tsx

export default function YourPage() {
  return (
    <div className="p-6">
      <h1>Your New Page</h1>
    </div>
  )
}

The page automatically inherits the dashboard layout with sidebar navigation. Add a navigation link in the sidebar component to make it accessible.

Adding Marketing Pages

Marketing pages live under src/app/(marketing)/ and inherit the marketing layout with the public header and footer.

Deployment

Vercel (Recommended)

Vercel is the recommended deployment platform for Next.js applications.

1. Push your project to a Git repository (GitHub, GitLab, or Bitbucket)
2. Import the project in vercel.com
3. Add all environment variables from .env.local in the Vercel dashboard
4. Set the build command to npm run build (default)
5. Deploy. Vercel handles SSL, CDN, and edge functions automatically

VPS with PM2 + Nginx

For self-hosted deployments on a VPS (Ubuntu/Debian):

# 1. Install Node.js 20+ and PM2
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt install -y nodejs
sudo npm install -g pm2

# 2. Clone/upload your project
cd /var/www/callcenter-ia

# 3. Install dependencies and build
npm install
npm run build

# 4. Start with PM2
pm2 start npm --name "callcenter-ia" -- start
pm2 save
pm2 startup

Nginx Reverse Proxy

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Docker

# Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["npm", "start"]

# Build and run
docker build -t callcenter-ia .
docker run -p 3000:3000 --env-file .env.local callcenter-ia

Demo Mode

Demo Mode allows you to showcase the application without exposing real data or allowing destructive actions.

Enable / Disable

# .env.local
DEMO_MODE=true   # Enable demo mode
DEMO_MODE=false  # Disable demo mode (default)

What Demo Mode Restricts

API Reference

CallCenter IA exposes the following API routes under /api. All authenticated routes require a valid session cookie from Better Auth.

Authentication

Agents

Calls

Phone Numbers

Knowledge Base

Campaigns

Automations

Webhooks

Incoming Webhooks

Export

Setup

Changelog

v1.0.0 -- Initial Release

April 2026

• Complete SaaS dashboard with 12+ modules (Agents, Calls, Numbers, Knowledge, Campaigns, Automations, Analytics, Calendar, Webhooks, Widget, Live Calls)
• Interactive Setup Wizard with BYOK architecture
• Cinematic marketing site with 10+ pages and Framer Motion animations
• Full authentication system with Better Auth
• Drizzle ORM with PostgreSQL support and seed scripts
• Integration-ready architecture for Twilio, OpenAI, ElevenLabs, Deepgram, Stripe, Google Calendar, and Slack
• Live Call Monitoring with "Barge-In" capability
• Sentiment Analysis Timeline with Recharts
• Embeddable Web Widget generator
• RESTful API with export endpoints
• Demo Mode for safe showcasing
• Dark theme with zinc-950 base and indigo accents
• Responsive design for mobile and desktop

Support

Getting Help

If you encounter issues or have questions about CallCenter IA:

1. Check this documentation -- Most common setup and configuration questions are covered here
2. Envato Item Comments -- Post your question on the item page for community and author support
3. Email Support -- Contact us through our Envato profile for direct support

Before Contacting Support

Please include the following information to help us resolve your issue faster:

• Your Node.js version (node -v)
• Your operating system
• The full error message or screenshot
• Steps to reproduce the issue
• Your purchase code (for verification)

What Is Included in Support