WhatsApp AI Chatbot : construisons-en un avec l'API

Salut, je m'appelle Rohan, fondateur de Spur, une API WhatsApp et un logiciel d'automatisation de commentaires/DM Instagram.

Il y a quelques semaines, j'ai écrit un blog sur les endroits où vous devriez ou non créer une intégration WhatsApp. Il s'agissait d'un article de haut niveau sur le sujet. Aujourd'hui, nous allons apprendre comment démarrer avec l'API WhatsApp ?

Créons un chatbot WhatsApp AI

Aujourd'hui, nous allons créer un robot simple qui s'exécute sur un serveur Node, récupère les webhooks de l'API WhatsApp Cloud, lit les messages et utilise le
OpenAI GPT 4o pour envoyer une réponse.

Vous voulez accéder directement au code ? Le lien est en bas.

Obtenez le numéro de test et le jeton WhatsApp

C'est assez simple, et Meta a déjà un guide à ce sujet. À l'avenir, je vais supposer

1. Vous avez créé une Meta App
2. Ajout du produit WhatsApp
3. J'ai un numéro de test et je peux envoyer des messages à partir de celui-ci

Pour le jeton, vous pouvez utiliser le jeton temporaire, nous aborderons le déploiement en production dans un autre tutoriel un jour.

Configuration du serveur de nœud

Si vous n'avez pas de configuration pnpm, c'est le moyen le plus simple

corepack enable
corepack prepare pnpm@latest --activate

maintenant, nous commençons

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

Installez les dépendances requises maintenant :

pnpm install express dotenv openai

Ne validez jamais les clés API. Pour conserver les informations sensibles telles que les clés API hors de la base de code, nous utiliserons des variables d'environnement. Créez un fichier .env dans le répertoire racine de votre projet et ajoutez la ligne suivante :

OPENAI_API_KEY=<your-openai-api-key>

Utilisez maintenant le fichier index.js créé et ajoutez le code suivant

import express from 'express';
import { config } from 'dotenv';
import OpenAI from 'openai';

// Load environment variables
config();

// Create a web server
const app = express();
const port = process.env.PORT || 3034;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Add middleware to parse JSON bodies
app.use(express.json());

// Initialize OpenAI API
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.get('/webhooks', (req, res) => {
  if (
    req.query['hub.mode'] === 'subscribe' &&
    req.query['hub.verify_token'] === '1234'
  ) {
    res.send(req.query['hub.challenge']);
  } else {
    res.sendStatus(400);
  }
});

app.post('/webhooks', async (req, res) => {
  const body = req.body.entry[0].changes[0];
  if (body.field !== 'messages') {
    // not from the messages webhook so dont process
    return res.sendStatus(200);
  }

  if (!body.value.messages) {
    return res.sendStatus(200);
  }

  const text = body.value.messages
    .map((message) => message.text.body)
    .join('\n\n');

  console.log(text);

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: text }],
  });

  // Extract the response from the OpenAI completion
  const aiResponse = completion.choices[0].message.content;

  // Extract the phone number from the incoming message
  const phoneNumber = body.value.messages[0].from;

  // Prepare the message payload
  const messagePayload = {
    messaging_product: 'whatsapp',
    to: phoneNumber,
    type: 'text',
    text: {
      body: aiResponse,
    },
  };

  // Send the response back to WhatsApp
  try {
    const response = await fetch(
      `https://graph.facebook.com/v20.0/${process.env.PHONE_NUMBER_ID}/messages`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.SYSTEM_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(messagePayload),
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    console.log('Message sent successfully');
  } catch (error) {
    console.error('Failed to send message:', error);
  }

  res.sendStatus(200);
});

et modifiez également le package.json en

{
  "name": "whatsapp-ai-bot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "packageManager": "pnpm@9.6.0",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "openai": "^4.53.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}

Comprendre le fonctionnement du code

1. Nous créons d'abord un point de terminaison "GET" afin que lorsque vous définissez le webhook dans l'application Facebook, le défi réussisse. J'ai également inclus une valeur pour le jeton de vérification dans la valeur .env.example que vous pouvez utiliser.
2. Vient ensuite le point de terminaison POST, qui fait la vraie magie. Il récupère le texte, le transmet à ChatGPT et envoie cette réponse à l'utilisateur.

Prochaines étapes

Cet exemple n'est que la pointe de l'iceberg, il y a tellement de choses que vous pouvez faire pour améliorer cela

1. Pour mettre en œuvre l'idempotence, les webhooks WhatsApp ne sont pas uniques et peuvent se répéter.
2. Ajouter un historique de discussion en mémoire
3. Conserver cette mémoire avec Redis/bases de données relationnelles
4. Exploitez un contenu riche comme des boutons, etc. comme réponses (cela nécessitera la création de fonctions OpenAI)

Conclusion

Donc c'est tout. Si vous êtes également intéressé par l'article que j'ai écrit sur l'intégration de WhatsApp, vous pouvez le consulter ici.

J'ai également partagé le code de l'exemple de travail sur l'organisation GitHub de Spur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!