Pular para o conteúdo
← Back to Skalablog

Published article

How to Build a WhatsApp Chatbot with Next.js

Next.jsOpenAIFirebase

You want an AI assistant your users can message on WhatsApp without installing anything. That requires three pieces: a Meta business account approved for the WhatsApp Cloud API, a backend that answers Meta's webhook calls, and a language model that produces the replies. This guide shows how one developer combined a WhatsApp chatbot with Next.js to ship it in days.

What Is a WhatsApp Chatbot with Next.js and How Does It Work?

A WhatsApp chatbot with Next.js is a backend that receives WhatsApp messages as webhook events from Meta, generates replies with the OpenAI API, and sends them back through the WhatsApp Cloud API. In the project covered here, called Jesus in Chat, the developer André Elias used Next.js as the entire backend, Firebase as the encrypted datastore, and the OpenAI API for generation, deploying on Vercel.

The flow has five stages. A user sends a message to the bot's number. WhatsApp fires a webhook event to the developer's server. The server validates the event, checks the user's quota, and loads recent conversation history from the database. It calls OpenAI with a persona prompt and that history. The generated reply goes back to the user through the same WhatsApp integration.

How Do You Get WhatsApp API Approval from Meta?

You create a Meta developer account, register a WhatsApp integration, and verify a real business entity. The developer reported this as the slowest part of the whole build: roughly one week of back and forth, several rejections without explanations, three verification videos, and domain confirmation before approval.

His practical takeaway for anyone repeating this: submit complete business documentation the first time, confirm your domain early, and expect opaque errors. Meta gives little guidance inside the approval flow, so a rejection usually means resubmitting rather than debugging a specific message.

What Does the Webhook Code Look Like?

WhatsApp sends many event types: received messages, delivery status, the read receipt, and contact number changes. For the first version the developer handles only the received-message event, which keeps the minimum viable product small; the remaining events can be added later or handled manually per user.

The Next.js API route implements two handlers, mirroring the pattern documented in Meta's WhatsApp Cloud API webhook guide:

  1. A GET handler that answers Meta's verification challenge, proving the route exists and is controlled by you.
  2. A POST handler that receives events, validates that the request genuinely comes from the WhatsApp API as a security measure, filters for text messages, and processes the conversation.

Inside the POST handler the logic runs in this order: look up the user in Firebase and create the record with a zero-message counter if new; block or upsell when the free limit is reached; load and decrypt the last five messages as conversation context; call OpenAI; encrypt and store both the incoming and outgoing messages; return the reply to the user.

How Does the AI Persona and Conversation Memory Work?

The bot answers as a Bible-based persona of Jesus, a prompt the developer wrote with his wife to keep the tone scriptural rather than denominational. The prompt plus recent history goes to OpenAI on every turn, which is what makes the conversation feel continuous.

He sends only the last five decrypted messages instead of the whole history, because full history raises token costs on every exchange. Five turns was enough context for coherent answers while keeping the per-message bill low.

For the model he chose the cheaper mini variant of ChatGPT, OpenAI's assistant model family, reporting that quality was good for the price. He also tested Grok, xAI's model, and found its replies better but noticeably more expensive, so the final choice is a cost and quality tradeoff rather than a technical one.

How Are Messages Stored and Secured?

Every inbound and outbound message is encrypted before it lands in Firebase, Google's app development platform used here as the database. The point is that a database leak would not expose what users wrote, since decryption happens only in the backend when building context for OpenAI.

The database also tracks three operational fields per user: total messages sent, whether the user has paid, and the date of the last message. The last-message date feeds retention analysis and lets the bot identify users whose subscription expired versus those who simply hit the free cap.

What Did the First Version Cost and Earn?

These are the creator's own reported figures from December 2024, about ten days after the December 10 launch, so treat them as one project's experience rather than a benchmark: 244 people started conversations, 8,634 messages were sent, 6 users paid, and total AI generation cost was 1.42 in local currency, already covered by the paying customers.

The average conversation ran about four messages, well under the seven free messages allowed. His diagnosis: people try the bot but do not return, so they never reach the moment of paying. The planned fix is recurring outbound messages, roughly weekly or every three days, with devotional content to create habitual value before the paywall, plus more organic marketing on Threads and TikTok, where he reported decent unpaid engagement.

Should You Use Next.js as the Whole Backend?

For this traffic level, yes. The developer already knew Next.js, the React framework that also runs server-side API routes, and the request volume stayed within the limits of the free tier on Vercel, the platform built by the same company. A separate server would add operations cost with no benefit at this scale.

Revisit the decision when volume grows or when you need background jobs, since recurring outbound messages and delivery-receipt handling fit a queue or cron worker better than a request-scoped route.

FAQ

  • Do you need a business entity to use the WhatsApp Cloud API? Yes. Meta requires a verified real business with documentation, and the creator reported that approval took about a week and several resubmissions, including three verification videos.
  • Why send only the last five messages to OpenAI? Token cost grows with every message you include. Five turns kept replies coherent while keeping the per-message bill close to the 1.42 total the creator reported for the whole launch period.
  • Can the bot remember the full conversation? It stores everything encrypted in Firebase, but it only decrypts and sends the most recent five messages as context, which keeps the model's input small and the conversation affordable.
  • Is the read receipt and status handling required? No. The first version ignores those webhook events and processes only received text messages, which was enough to launch.

Turn Your Own Build Log Into an Article

This article exists because one developer recorded a fifteen-minute walkthrough of his architecture, costs, and mistakes, and that knowledge deserves to be findable as text, not buried in a video timeline. If you have a build log, an interview, or a technical explanation sitting in a YouTube video, Skala Blog turns that URL into a structured, searchable article: paste the link, the video is transcribed, and you get an editable draft ready to publish.

Source video