WhatsApp AI 聊天機器人：讓我們用 API 建立一個聊天機器人

大家好，我是 Rohan，Spur 的創辦人，Spur 是一款 WhatsApp API 和 Instagram 評論/DM 自動化軟體。

幾週前，我寫了一篇博客，討論應該在哪裡建立 WhatsApp 整合。這是一篇關於該主題的高級文章，今天我們將學習如何開始使用 WhatsApp API？

讓我們製作一個 WhatsApp AI 聊天機器人

今天，我們將製作一個在 Node 伺服器上運行的簡單機器人，從 WhatsApp Cloud API 取得 Webhook，讀取訊息並使用
OpenAI GPT 4o 發送回應。

想直接跳到程式碼嗎？鏈接在底部。

取得 WhatsApp 測試號碼和令牌

這相當簡單，Meta 已經有這方面的指南。展望未來，我將假設

1. 您已經建立了一個元應用程式
2. 新增了 WhatsApp 產品
3. 已取得測試號碼，可以用它發送訊息

對於令牌，您可以使用臨時令牌，我們將在另一篇教學中介紹如何部署到生產環境。

設定節點伺服器

如果您沒有 pnpm 設定，這是最簡單的方法

corepack enable
corepack prepare pnpm@latest --activate

現在我們開始

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

立即安裝所需的依賴項：

pnpm install express dotenv openai

切勿提交 API 金鑰。為了將 API 金鑰等敏感資訊保留在程式碼庫之外，我們將使用環境變數。在專案的根目錄中建立一個 .env 檔案並新增以下行：

OPENAI_API_KEY=<your-openai-api-key>

現在使用建立的index.js檔案並加入以下程式碼

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

並將package.json修改為

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

了解程式碼的工作原理

1. 我們先建立一個「GET」端點，以便當您在 Facebook 應用程式中設定 Webhook 時，挑戰就會通過。我還在 .env.example 值中包含了一個驗證令牌的值，您可以使用它。
2. 然後是 POST 端點，它發揮了真正的作用。它接收文本，將其傳遞到 ChatGPT 並將回應發送給用戶。

下一步

這個例子只是冰山一角，你可以做很多事情來改進它

1. 為了實現冪等性，WhatsApp webhooks 不是唯一的並且可以重複。
2. 新增記憶體聊天記錄
3. 使用 Redis/關聯式資料庫保留記憶體
4. 利用按鈕等豐富內容作為回應（這需要建立 OpenAI 函數）

結論

就是這樣。如果您也對我寫的有關 WhatsApp 整合的文章感興趣，可以在這裡查看。

我也在 Spur 的 GitHub 組織上分享了工作範例的程式碼。

以上是WhatsApp AI 聊天機器人：讓我們用 API 建立一個聊天機器人的詳細內容。更多資訊請關注PHP中文網其他相關文章！