WhatsApp AI Chatbot: Erstellen wir einen mit der API

Hallo, ich bin Rohan, Gründer von Spur, einer WhatsApp-API- und Instagram-Kommentar-/DM-Automatisierungssoftware.

Vor ein paar Wochen habe ich einen Blog darüber geschrieben, wo man eine WhatsApp-Integration aufbauen sollte oder nicht. Das war ein hochrangiger Artikel zu diesem Thema. Heute erfahren wir, wie man mit der WhatsApp-API anfängt?

Lassen Sie uns einen WhatsApp AI Chatbot erstellen

Heute erstellen wir einen einfachen Bot, der auf einem Node-Server läuft, Webhooks von der WhatsApp Cloud API aufnimmt, die Nachrichten liest und das
verwendet OpenAI GPT 4o, um eine Antwort zu senden.

Möchten Sie direkt zum Code springen? Der Link ist unten.

Holen Sie sich die WhatsApp-Testnummer und das Token

Das ist ziemlich einfach und Meta hat bereits eine Anleitung dazu. Für die Zukunft gehe ich davon aus

1. Sie haben eine Meta-App erstellt
2. Das WhatsApp-Produkt hinzugefügt
3. Habe eine Testnummer und kann von dort aus Nachrichten senden

Für das Token können Sie das temporäre Token verwenden. Die Bereitstellung in der Produktion werden wir später in einem anderen Tutorial behandeln.

Einrichten des Node-Servers

Wenn Sie kein PNPM-Setup haben, ist dies der einfachste Weg

corepack enable
corepack prepare pnpm@latest --activate

Jetzt fangen wir an

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

Installieren Sie jetzt die erforderlichen Abhängigkeiten:

pnpm install express dotenv openai

Legen Sie niemals API-Schlüssel fest. Um vertrauliche Informationen wie API-Schlüssel aus der Codebasis fernzuhalten, verwenden wir Umgebungsvariablen. Erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Zeile hinzu:

OPENAI_API_KEY=<your-openai-api-key>

Verwenden Sie nun die erstellte Datei index.js und fügen Sie den folgenden Code hinzu

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

und ändern Sie auch die package.json in

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

Verstehen, wie der Code funktioniert

1. Wir erstellen zunächst einen „GET“-Endpunkt, sodass die Herausforderung bestanden wird, wenn Sie den Webhook in der Facebook-App festlegen. Ich habe auch einen Wert für das Verifizierungstoken in den .env.example-Wert eingefügt, den Sie verwenden können.
2. Dann kommt der POST-Endpunkt, der die eigentliche Magie ausführt. Es nimmt den Text auf, leitet ihn an ChatGPT weiter und sendet diese Antwort an den Benutzer.

Nächste Schritte

Dieses Beispiel ist nur die Spitze des Eisbergs. Es gibt so viele Dinge, die Sie tun können, um dies zu verbessern

1. Um Idempotenz zu implementieren, sind WhatsApp-Webhooks nicht eindeutig und können sich wiederholen.
2. Fügen Sie einen Chat-Verlauf im Speicher hinzu
3. Behalten Sie diesen Speicher mit Redis/relationalen Datenbanken bei
4. Nutzen Sie umfangreiche Inhalte wie Schaltflächen usw. als Antworten (dafür sind OpenAI-Funktionen erforderlich)

Abschluss

Das war's also auch schon. Wenn Sie auch an dem Artikel interessiert sind, den ich über die WhatsApp-Integration geschrieben habe, können Sie ihn hier lesen.

Ich habe den Code des Arbeitsbeispiels auch auf der GitHub-Organisation von Spur geteilt.

Das obige ist der detaillierte Inhalt vonWhatsApp AI Chatbot: Erstellen wir einen mit der API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!