WhatsApp AI チャットボット: API を使用してチャットボットを構築しましょう-jsチュートリアル-php.cn

WhatsApp AI チャットボット: API を使用してチャットボットを構築しましょう

PHPz

リリース： 2024-07-30 08:26:03

オリジナル

993 人が閲覧しました

やあ、私は Rohan です。WhatsApp API および Instagram コメント/DM 自動化ソフトウェアである Spur の創設者です。

数週間前、私は WhatsApp 統合を構築するべきかどうかについてブログを書きました。これはこのトピックに関する高レベルの記事でした。今日は WhatsApp API の使用を開始する方法について学習します。

WhatsApp AIチャットボットを作ろう

今日は、Node サーバー上で実行され、WhatsApp Cloud API から Webhook を受け取り、メッセージを読み取り、
を使用する単純なボットを作成します。 OpenAI GPT 4o を使用して応答を送信します。

コードに直接ジャンプしたいですか?リンクは一番下にあります。

WhatsApp テスト番号とトークンを取得する

これは非常に簡単で、Meta にはすでにこれに関するガイドがあります。今後は

と仮定してみます。

メタアプリを作成しました
WhatsApp 製品を追加しました
テスト番号を取得し、そこからメッセージを送信できます

トークンについては、一時トークンを使用できます。運用環境へのデプロイについては、いつか別のチュートリアルで説明します。

ノードサーバーのセットアップ

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

ログイン後にコピー

コードがどのように機能するかを理解する

Image description

最初に「GET」エンドポイントを作成します。これにより、Facebook アプリで Webhook を設定するとチャレンジが成功します。使用できる .env.example 値に検証トークンの値も含めました。
次に、実際の魔法を実行する POST エンドポイントが登場します。テキストを取り込んで ChatGPT に渡し、その応答をユーザーに送信します。