https://a.storyblok.com/f/270183/146509/9e169fca3d/chatgpt_whatsapp_5steps.png

Atique Khan

Atique is a computer graduate and proficient Python developer with a passion for exploring new technologies. With a strong background in programming and system engineering, he holds over 10 years of experience in automation, testing, and integration. His interests span single-board computers, software-defined radios, and continuous experimentation with generative AI tools.

ChatGPT WhatsAppインテグレーション 5つの簡単ステップ (ハウツーガイド)

最終更新日 October 3, 2023

#open-ai

#messages-api

#chatgpt

所要時間：1 分

この記事の更新者ベンジャミン・アロノフ2025年7月

はじめに

WhatsAppは、友人や家族、企業とのチャットなど、多くの人が時間を過ごす場所です。 ChatGPTは会話体験を構築する最も簡単な方法の一つです； WhatsAppだけでなく、Facebook Messengerだけでなく、Facebookメッセンジャーでも。

このチュートリアルでは、誰かがWhatsAppにメッセージを送ると、PythonバックエンドがそれをChatGPTに転送し、応答を取得し、返信として送り返す方法を紹介します。

これは、基本的なアシスタントを作ったり、会話のアイデアを試したり、これらのAPIがどのように組み合わされるかを見たりするのに便利な方法です。また、ボーナスとして、OpenAIの画像生成API（DALL-E）を使って画像を送信するように拡張する方法も紹介します。

WhatsAppチャットボットが完成し、サンドボックス番号を使って会話できるようになります。

前提条件

このチュートリアルでは、ChatGPTとWhatsAppを統合するための前提条件を説明します：

ステップ 1: WhatsApp 用 Messages API サンドボックスの設定

にサインインします。 Vonage開発者ダッシュボード.次にメッセージサンドボックス.

QRコードをスキャンしてWhatsAppを起動し、入力済みのメッセージを送信。メッセージを送信すると、電話番号が許可リストに追加されます。

次に、サンドボックスがFlaskアプリに接続するためのWebhookを設定する必要がある。これにはngrokを使う。コマンドライン・ターミナルを開いて実行する：

ngrok http 3000

これでngrokのURLは以下のようになる：

Forwarding   https://ed95-77-137-44-66.ngrok-free.app 
-> http://localhost:3000

これでウェブフックを更新できる：

インバウンド向け： https://YOUR_NGROK_URL/inbound
ステータスのために https://YOUR_NGROK_URL/status

より詳しいヘルプは ngrokを使ったテスト.

Configuring webhook URLs for inbound messages and status updates in the WhatsApp sandbox.

ファイル .envファイルのヘルプが必要ですか？私たちの Python環境変数入門ガイドを参照してください。

ステップ2：Flaskアプリのセットアップ方法

WhatsAppメッセージの送受信が可能なサンドボックスが完成したら、ロジックを処理するFlaskアプリを作成します：

mkdir whatsapp-chatgpt-bot
cd whatsapp-chatgpt-bot

パッケージと環境を安全に管理するために仮想環境を作成する。以下のターミナルコマンドはすべて仮想環境内から実行する。

python3 -m venv venv
source venv/bin/activate

Flaskのコアファイルを作成します：

touch main.py config.py .env requirements.txt

プロジェクトの依存関係をインストールします：

pip install flask requests openai python-dotenv

そして要件ファイルに保存する：

pip freeze > requirements.txt

Vonageと OpenAIの認証情報を .env ファイルに追加します：

VONAGE_API_KEY=your_api_key
VONAGE_API_SECRET=your_secret

OPENAI_API_KEY=your_openai_key

>> を参照してください。 Python 環境変数入門ビデオを参照してください。

そうすれば、環境変数を安全に config.pyファイルに安全に読み込むことができる。さらに、Vonage API Key と Secret を連結してエンコードし、Vonage API で認証できるようにします。

from dotenv import load_dotenv
import os
import base64

load_dotenv()

VONAGE_API_KEY = os.getenv("VONAGE_API_KEY")
VONAGE_API_SECRET = os.getenv("VONAGE_API_SECRET")
VONAGE_SANDBOX_NUMBER = 14157386102

credentials = f"{VONAGE_API_KEY}:{VONAGE_API_SECRET}"
encoded_credentials = base64.b64encode(credentials.encode('utf-8')).decode('utf-8')
VONAGE_AUTH_HEADER = f"Basic {encoded_credentials}"

VONAGE_URL = "https://messages-sandbox.nexmo.com/v1/messages"

OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")

最後に main.pyファイルに、Flaskサーバーを作成しましょう。このサーバーには2つのエンドポイントがあります、 /inboundと /statusの2つのエンドポイントがあり、これらは先にサンドボックスで設定したものに対応している！Vonageアプリケーションで何かが起こるたびに、Flaskサーバーに転送され、ここのロジックがトリガーされます。

import os
import json
import logging
from flask import Flask, request, Response
from config import *

app = Flask(__name__)
logging.basicConfig(format="%(message)s", level=logging.INFO)

@app.route('/status', methods=['POST'])
def message_status():
    data = request.get_json()
    logging.info(f"Status webhook received: {json.dumps(data)}")
    return Response(status=204)

@app.route('/inbound', methods=['POST'])
def inbound_message():
    data = request.get_json()
    logging.info(f"Inbound message: {json.dumps(data)}")

    return Response(status=200)

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 3000))
    app.run(host="0.0.0.0", port=port)

サンドボックスがメッセージを受信し、Flask アプリに転送していることをテストできます。ngrok とは別のタブで、Flask サーバーを実行します：

chmod 666 main.py
export FLASK_ENV=development
export FLASK_APP=main.py
python3 main.py -p 3000

そして、サーバーにログされたメッセージが表示されるはずだ！

ステップ3: FlaskでWhatsAppメッセージを受信する方法

VonageからのWhatsApp受信メッセージを解析し、ユーザーとメッセージ内容を特定し、WhatsAppでレスポンスを送信するロジックを作成しましょう。

まず、すべてのロジックを保存する新しいファイルを作成しましょう：

touch chatbot_utils.py

内部 chatbot_utils.pyを追加する：

import os
import json
import requests
from   config import *
from openai import OpenAI

# OpenAI setup using SDK v1.x
client = OpenAI(api_key=OPENAI_API_KEY)

def send_whatsapp_text(to, text):
    payload = {
        "from": VONAGE_SANDBOX_NUMBER,
        "to": to,
        "channel": "whatsapp",
        "message_type": "text",
        "text": text
    }
    _post_to_vonage(payload)


def _post_to_vonage(payload):
    headers = {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "Authorization": VONAGE_AUTH_HEADER
    }
    response = requests.post(VONAGE_URL, headers=headers, data=json.dumps(payload))
    response.raise_for_status()

そして main.pyファイルを更新して新しい関数をインポートする：

from chatbot_utils import *

そして /inboundエンドポイントを更新して main.pyのエンドポイントを更新して、送信者を取得し、send_whatsapp_text関数を使うようにします：

@app.route('/inbound', methods=['POST'])
def inbound_message():
    data = request.get_json()
    logging.info(f"Incoming message:\n{json.dumps(data, indent=2)}")

    try:
        sender = data['from']
        text = data.get('text', '').strip()

        if not text:
            logging.warning("No text in incoming message. Skipping.")
            return Response(status=204)

       response_text = f"I've received your question! You asked: \n \n {text}"
       send_whatsapp_text(sender, response_text)

    except Exception as e:
        logging.error(f"Error processing inbound message: {e}", exc_info=True)
        return Response("Error", status=500)

    return Response(status=200)

これでFlaskサーバーを再起動し、新しいコードをテストすることができます！あなたの質問が繰り返されるはずです。

A WhatsApp chat showing the Vonage Sandbox confirming receipt of a user's question about the meaning of life.

ステップ 4: OpenAI API を呼び出し、WhatsApp 返信を送信する

最後のステップは OpenAI API を呼び出し、ユーザーのメッセージを渡し、WhatsApp.Inside へのレスポンスを処理することです。 chatbot_utils.pyの中に以下の関数を追加します：

def generate_chatgpt_reply(prompt):
    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": prompt}
        ]
    )
    return response.choices[0].message.content.strip()

を更新することで使用できるようになりました。 /inboundエンドポイントを更新することで使用できるようになります：

@app.route('/inbound', methods=['POST'])
def inbound_message():
    data = request.get_json()
    logging.info(f"Incoming message:\n{json.dumps(data, indent=2)}")

    try:
        sender = data['from']
        text = data.get('text', '').strip()

        if not text:
            logging.warning("No text in incoming message. Skipping.")
            return Response(status=204)

        # Generate reply using ChatGPT
        reply = generate_chatgpt_reply(text)
        logging.info(f"ChatGPT reply: {reply}")

        # Send response via WhatsApp
        send_whatsapp_text(sender, reply)

    except Exception as e:
        logging.error(f"Error processing inbound message: {e}", exc_info=True)
        return Response("Error", status=500)

    return Response(status=200)

ステップ 5: ChatGPT & WhatsApp インテグレーションのテスト

これでFlaskサーバーを（再）起動できます：

chmod 666 main.py
export FLASK_ENV=development
export FLASK_APP=main.py
python3 main.py -p 3000

WhatsAppサンドボックスの電話番号に質問を送信してください。ChatGPTから返信が届きます！

WhatsApp chatbot responds to a user question with a detailed explanation generated by ChatGPT.

ボーナス：画像生成の追加

すごい！OpenAIのGPT-4oモデルを使って、LLMによるテキスト生成が追加されましたね。しかし、OpenAIのDALL-Eモデルを使ってAI画像を生成して送信することもできます。ユーザが"IMAGE：「DALL-Eを呼び出して画像を生成し、キャプションを付けてWhatsAppでユーザーに送り返すことができます。

あなたの chatbot_utils.py ファイルに以下の2つの関数を追加する、 send_whatsapp_imageと generate_image_from_prompt:

def send_whatsapp_image(to, image_url, caption="Image"):
    payload = {
        "from": VONAGE_SANDBOX_NUMBER,
        "to": to,
        "channel": "whatsapp",
        "message_type": "image",
        "image": {
            "url": image_url,
            "caption": caption
        }
    }
    _post_to_vonage(payload)


def generate_image_from_prompt(prompt):
    response = client.images.generate(
        model="dall-e-3",
        prompt=prompt,
        size="1024x1024",
        n=1
    )
    return response.data[0].url

そして最後に、ユーザーが画像リクエストを送信したのか、それとも通常の質問を送信したのかを判別するために /inboundエンドポイントを更新する必要があります：

@app.route('/inbound', methods=['POST'])
def inbound_message():
    data = request.get_json()
    logging.info(f"Incoming message:\n{json.dumps(data, indent=2)}")

    try:
        sender = data['from']
        text = data.get('text', '').strip()

        if not text:
            logging.warning("No text in incoming message. Skipping.")
            return Response(status=204)

        if text.upper().startswith("IMAGE:"):
            prompt = text[6:].strip()
            logging.info(f"Image prompt: {prompt}")
            image_url = generate_image_from_prompt(prompt)
            send_whatsapp_image(sender, image_url, caption=prompt)
        else:
            reply = generate_chatgpt_reply(text)
            logging.info(f"ChatGPT reply: {reply}")
            send_whatsapp_text(sender, reply)

    except Exception as e:
        logging.error(f"Error processing inbound message: {e}", exc_info=True)
        return Response("Error", status=500)

    return Response(status=200)

もう一度サーバーを起動し、AI画像を生成してみてください！

A DALL·E-generated image sent in response to the prompt 'What is the meaning of life?' via Vonage WhatsApp Sandbox

結論

よくやったChatGPTに接続して自然なテキストで返信し、DALL-Eを使って画像まで生成するWhatsAppチャットボットの構築に成功したことは、素晴らしいことです！これは、LLMで実験するための素晴らしい出発点でした。

ここから、カスタムシステムプロンプトを追加したり、トレーニングのためにユーザー入力を記録したり、より構造化されたコマンドを処理したり、人間のエージェントにメッセージをルーティングすることもできます。OpenAIとVonageのMessages APIを組み合わせることで、多くの可能性が広がります。

また、Sandbox から完全な Vonage アプリケーションに移行したくなるでしょう。直接 API 呼び出しを Vonage Python SDK に置き換えて、エラー処理と保守性を向上させます。これにより、Vonageからの純粋なWebhookであることを確認するための検証を簡単に追加できるようになり、潜在的なセキュリティの脆弱性を防ぐことができます。

あなたが何かクールなものを作ったら、私たちはそれについて聞きたいと思っています！私たちと一緒に Vonage Developer SlackまたはX (旧 Twitter).