How We Built a 24/7 WhatsApp AI Sales Bot with Next.js 15 and Gemini

When potential clients reach out on WhatsApp, they expect answers right away. If you take three hours to reply, chances are they've already messaged two other agencies.

We wanted a system that could answer client questions, qualify project details, and collect contact info around the clock without sounding like a rigid phone tree menu.

Here is the exact setup we built using Next.js 15, Prisma, Supabase, and the Google Gemini API.

The Core Setup
The bot architecture is straightforward:

Meta Webhook Endpoint: Catches incoming WhatsApp messages in real time.
Gemini Prompt Engine: Processes message history and enforces strict business rules.
Prisma + Supabase: Stores contacts, chat history, and lead stage.
Internal CRM Dashboard: Gives our team direct view and takeover control.

1. Catching Inbound Messages in Next.js We handle Meta’s webhook using an API route in Next.js 15 App Router:

typescript

// app/api/whatsapp/webhook/route.ts
import { NextResponse } from 'next/server';
export async function POST(req: Request) {
const body = await req.json();
const message = body.entry?.[0]?.changes?.[0]?.value?.messages?.[0];

if (message?.type === 'text') {
const customerPhone = message.from;
const incomingText = message.text.body;

// Process response asynchronously
await handleAiConversation(customerPhone, incomingText);

}
return NextResponse.json({ status: 'success' });
}

1. Training Gemini to Stay on Topic AI models love to ramble if you don't constrain them. We pass explicit guardrails into the prompt so the bot acts like an experienced account strategist—polite, focused, and concise:

typescript

import { GoogleGenerativeAI } from '@google/generative-ai';
const ai = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
const model = ai.getGenerativeModel({ model: 'gemini-1.5-flash' });
export async function handleAiConversation(phone: string, text: string) {
const systemPrompt = You are the AI assistant for Apex Digital Solution.
Answer questions about web development, app development, and digital services briefly.
Never promise fixed prices without scope. Always aim to get their name and email for a consultation.;
const chat = model.startChat({
history: [
{ role: 'user', parts: [{ text: systemPrompt }] },
{ role: 'model', parts: [{ text: 'Got it. Ready to help your visitors.' }] }
]
});
const response = await chat.sendMessage(text);
return response.response.text();
}
Real World Results
Zero Unanswered Messages: Inbound leads get answered in under 2 seconds.
Better Lead Context: Before we jump on a call, we already know the client's budget range and goals.
Clean Human Takeover: If a client asks for something complex, the bot alerts our team in the dashboard so a human can step in seamlessly.
If you're looking to build something similar for your business, check out our WhatsApp AI Chatbot Services at Apex Digital Solution.

Author
Written by the team at Apex Digital Solution—we build custom Next.js web applications, mobile apps, and automated AI sales bots.