Complete Developer Blueprint: WhatsApp Business API AI Integration

#ai #nextjs #automation

Complete Developer Blueprint: WhatsApp Business API AI Integration

Executive Summary

Integrating AI models into the WhatsApp Business Cloud API allows businesses to replace manual customer service representatives with 24/7 intelligent sales agents that qualify leads, answer inventory queries, and sync lead data to CRM databases.

1. Architecture Overview

A production WhatsApp AI integration consists of 3 architectural layers:

[ WhatsApp Business API ] ──(Webhook)──> [ Next.js Route Handler ] ──> [ Google Gemini 1.5 Flash ]
                                                      │
                                                      └──> [ CRM Database ]

Meta Webhook Listener: Receives incoming user messages via POST requests.
AI Agent Processing Engine: Sends message context + function definitions to Google Gemini 1.5 Flash or Claude 3.5 Sonnet.
Outbound Cloud API Dispatch: Calls Meta's /v20.0/PHONE_NUMBER_ID/messages endpoint to send instant responses back to the user.

2. Key Code Implementation

// app/api/whatsapp/webhook/route.ts
import { NextResponse } from 'next/server';
import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function POST(req: Request) {
  const body = await req.json();
  const message = body.entry?.[0]?.changes?.[0]?.value?.messages?.[0];

  if (message && message.text) {
    const userText = message.text.body;
    const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
    const result = await model.generateContent(userText);
    const aiReply = result.response.text();

    await sendWhatsAppMessage(message.from, aiReply);
  }

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