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

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

数週間前、私は 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 Webhook は一意ではなく、繰り返すことができます。
2. メモリ内のチャット履歴を追加します
3. そのメモリを Redis/リレーショナル データベースで永続化します
4. ボタンなどのリッチコンテンツを応答として活用します (これには OpenAI 関数を構築する必要があります)

結論

それでは以上です。 WhatsApp の統合について私が書いた記事にも興味がある場合は、ここでチェックしてください。

動作例のコードも Spur の GitHub 組織で共有しました。

以上がWhatsApp AI チャットボット: API を使用してチャットボットを構築しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。