WhatsApp AI Chatbot : construisons-en un avec l'API-js tutoriel-php.cn

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

PHPz

Libérer： 2024-07-30 08:26:03

original

1006 Les gens l'ont consulté

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

Vous avez créé une Meta App
Ajout du produit WhatsApp
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

Copier après la connexion

maintenant, nous commençons

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

Copier après la connexion

Installez les dépendances requises maintenant :

pnpm install express dotenv openai

Copier après la connexion

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>

Copier après la connexion

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);
});

Copier après la connexion

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"
  }
}

Copier après la connexion

Comprendre le fonctionnement du code

Image description

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.
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

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