https://d226lax1qjow5r.cloudfront.net/blog/blogposts/chatgpt-whatsapp-integration-in-5-easy-steps-how-to-guide/chatgpt_whatsapp_5steps.png

ChatGPT WhatsApp Integration in 5 einfachen Schritten (Anleitung)

Zuletzt aktualisiert am October 3, 2023

Lesedauer: 4 Minuten

Dieser Artikel wurde aktualisiert von Benjamin Aronow im Juli 2025

Einführung

Viele Menschen verbringen ihre Zeit mit WhatsApp, sei es beim Chatten mit Freunden, der Familie oder sogar mit Unternehmen. Und ChatGPT ist zu einer der einfachsten Möglichkeiten geworden, Konversationserlebnisse zu schaffen; nicht nur auf WhatsApp, sondern auch auf dem Facebook Messenger auch.

In diesem Tutorial zeigen wir Ihnen, wie Sie die beiden miteinander verbinden können: Wenn jemand eine Nachricht auf WhatsApp sendet, wird Ihr Python-Backend diese an ChatGPT weiterleiten, eine Antwort erhalten und diese als Antwort zurücksenden; all dies unter Verwendung der Vonage Messages API Sandbox und einer einfachen Flask-App.

Es ist eine nützliche Methode, um einen einfachen Assistenten zu erstellen, Ideen für Konversationen zu testen oder einfach zu sehen, wie diese APIs zusammenpassen. Als Bonus zeigen wir auch, wie man ihn so erweitert, dass er mit der OpenAI-API zur Bilderzeugung (DALL-E) Bilder senden kann.

Am Ende haben Sie einen funktionierenden WhatsApp-Chatbot, mit dem Sie über Ihre Sandbox-Nummer sprechen können.

Voraussetzungen

In diesem Tutorial benötigen Sie die folgenden Voraussetzungen, um ChatGPT mit WhatsApp zu integrieren:

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Schritt 1: Einrichten der Messages API Sandbox für WhatsApp

Melden Sie sich an beim Vonage Entwickler Dashboard. Öffnen Sie dann die Nachrichten-Sandbox.

Scannen Sie den QR-Code, um WhatsApp zu öffnen und die vorausgefüllte Nachricht zu senden. Sobald Sie die Nachricht gesendet haben, wird Ihre Telefonnummer der Erlaubnisliste hinzugefügt.

Als nächstes müssen Sie die Webhooks für die Sandbox einrichten, um eine Verbindung zu unserer Flask-App herzustellen. Hierfür steht uns ngrok zur Verfügung. Öffnen Sie also Ihr Kommandozeilenterminal und führen Sie aus:

ngrok http 3000

Sie haben nun eine ngrok-URL, die etwa so aussieht:

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

Jetzt können Sie die Webhooks aktualisieren:

  • Für Inbound: https://YOUR_NGROK_URL/inbound

  • Für Status: https://YOUR_NGROK_URL/status

Für weitere Hilfe siehe Testen mit ngrok.

Screenshot of the WhatsApp sandbox interface showing two input fields for HTTP POST webhook URLs—one for inbound messages and one for message status updates, with a 'Save webhooks' button below.Configuring webhook URLs for inbound messages and status updates in the WhatsApp sandbox.

Brauchen Sie Hilfe bei .env Dateien? Besuchen Sie unsere Erste Schritte mit Python-Umgebungsvariablen für weitere Hilfe bei der sicheren Verwaltung von API-Schlüsseln.

Schritt 2: Einrichten einer Flask-App

Nun, da Ihre Sandbox bereit ist, WhatsApp-Nachrichten zu senden und zu empfangen, erstellen Sie Ihre Flask-App, die die Logik verarbeiten wird:

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

Erstellen Sie eine virtuelle Umgebung für eine sichere Paket- und Umgebungsverwaltung. Alle folgenden Terminalbefehle sollten innerhalb der virtuellen Umgebung ausgeführt werden.

python3 -m venv venv
source venv/bin/activate

Erstellen Sie unsere Kerndateien für Flask:

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

Installieren Sie unsere Projektabhängigkeiten:

pip install flask requests openai python-dotenv

Und speichern Sie sie in unserer Anforderungsdatei:

pip freeze > requirements.txt

Fügen Sie Ihre Vonage- und OpenAI-Anmeldeinformationen zu Ihrer .env-Datei hinzu:

VONAGE_API_KEY=your_api_key
VONAGE_API_SECRET=your_secret

OPENAI_API_KEY=your_openai_key

>> Siehe die Erste Schritte mit Python-Umgebungsvariablen Video für weitere Hilfe.

Sie können dann Ihre Umgebungsvariablen sicher in die Datei config.py Datei laden. Außerdem werden hier Ihr Vonage-API-Schlüssel und Ihr Geheimnis verkettet und verschlüsselt, um sich bei der Vonage-API authentifizieren zu können.

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

Schließlich erstellen wir in unserer main.py Datei unseren Flask-Server erstellen. Dieser Server hat zwei Endpunkte, /inbound und /statusdie den Endpunkten entsprechen, die Sie zuvor in Ihrer Sandbox eingerichtet haben! Wann immer also etwas in der Vonage-Anwendung passiert, wird es an Ihren Flask-Server weitergeleitet, und dann wird die Logik hier ausgelöst.

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)

Sie können nun testen, ob die Sandbox Ihre Nachrichten empfängt und an die Flask-App weiterleitet. Starten Sie Ihren Flask-Server in einer anderen Registerkarte als ngrok:

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

Und Sie sollten Ihre Nachrichten auf dem Server protokolliert sehen!

Schritt 3: Wie man WhatsApp-Nachrichten in Flask empfängt

Lassen Sie uns nun eine Logik erstellen, um die eingehenden WhatsApp-Nachrichten von Vonage zu analysieren, den Benutzer und den Inhalt der Nachricht zu identifizieren und eine Antwort in WhatsApp zu senden.

Erstellen wir zunächst eine neue Datei, in der wir unsere gesamte Logik speichern:

touch chatbot_utils.py

Innerhalb von chatbot_utils.py ist Folgendes hinzuzufügen:

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()

Und dann aktualisieren Sie Ihre main.py Datei, um unsere neuen Funktionen zu importieren, unterhalb der vorherigen Importe hinzufügen:

from chatbot_utils import *

Und aktualisieren Sie den /inbound Endpunkt in main.py um jetzt den Absender zu erhalten und unsere Funktion send_whatsapp_text zu verwenden:

@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)

Sie können nun Ihren Flask-Server neu starten und den neuen Code testen! Ihre Frage sollte sich nun wiederholen.

WhatsApp conversation where the user asks 'What’s the meaning of life?' and the Vonage Sandbox responds with a confirmation message repeating the question.A WhatsApp chat showing the Vonage Sandbox confirming receipt of a user's question about the meaning of life.

Schritt 4: OpenAI API aufrufen und WhatsApp Antwort senden

Unser letzter Schritt besteht darin, die OpenAI-API aufzurufen, die Nachricht des Benutzers zu übergeben und dann die Antwort an WhatsApp.Inside weiterzuleiten chatbot_utils.py fügen Sie die folgende Funktion ein:

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()

Und Sie können es jetzt verwenden, indem Sie den /inbound Endpunkts:

@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)

Schritt 5: Testen Sie Ihre ChatGPT & WhatsApp Integration

Jetzt können Sie Ihren Flask-Server (wieder) starten:

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

Und senden Sie eine Frage an die Telefonnummer der WhatsApp Sandbox. Sie werden nun eine Antwort von ChatGPT erhalten!

Screenshot of a WhatsApp chat where a user asks 'What’s the meaning of life?' and receives a long, structured reply discussing religious and philosophical perspectives.WhatsApp chatbot responds to a user question with a detailed explanation generated by ChatGPT.

Bonus: Bilderzeugung hinzufügen

Fantastisch! Sie haben die Texterstellung mit einem LLM unter Verwendung des GPT-4o-Modells von OpenAI hinzugefügt. Aber Sie können auch KI-Bilder mit dem DALL-E-Modell von OpenAI erzeugen und senden. Lassen Sie uns unsere Anwendung erweitern, indem wir erkennen, wenn ein Benutzer eine Eingabeaufforderung sendet, die mit "IMAGE:" beginnt, können wir DALL-E aufrufen, um ein Bild zu generieren und es dann mit einer Bildunterschrift an den Benutzer auf WhatsApp zurückzuschicken.

In Ihrer chatbot_utils.py Datei fügen Sie die folgenden zwei Funktionen hinzu, send_whatsapp_image und 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

Und schließlich müssen wir unseren /inbound Endpunkt aktualisieren, um zu entschlüsseln, ob der Benutzer eine Bildanfrage oder eine normale Frage gesendet hat:

@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)

Starten Sie Ihren Server neu und versuchen Sie, einige AI-Bilder zu erzeugen!

WhatsApp chat showing a user asking 'IMAGE: what is the meaning of life?' and receiving a colorful AI-generated image featuring abstract symbols, books, and a cosmic background.A DALL·E-generated image sent in response to the prompt 'What is the meaning of life?' via Vonage WhatsApp Sandbox

Schlussfolgerung

Gute Arbeit! Der erfolgreiche Aufbau eines funktionierenden WhatsApp-Chatbots, der sich mit ChatGPT für natürliche Textantworten verbindet und sogar Bilder mit DALL-E generiert, war großartig! Dies war ein großartiger Ausgangspunkt, um mit LLMs zu experimentieren.

Von hier aus können Sie benutzerdefinierte Systemaufforderungen hinzufügen, Benutzereingaben für Schulungen protokollieren, strukturiertere Befehle verarbeiten oder sogar Nachrichten an menschliche Agenten weiterleiten. Die Kombination von OpenAI und der Messages API von Vonage eröffnet eine Vielzahl von Möglichkeiten.

Außerdem sollten Sie die Sandbox verlassen und zu einer vollständigen Vonage-Anwendung wechseln. Ersetzen Sie direkte API-Aufrufe durch das Python-SDK von Vonage, um eine bessere Fehlerbehandlung und Wartbarkeit zu gewährleisten. So können Sie auf einfache Weise eine Validierung für eingehende Webhooks hinzufügen, um sicherzustellen, dass sie wirklich von Vonage stammen, was potenzielle Sicherheitslücken verhindert.

Wenn Sie etwas Cooles bauen, wollen wir davon hören! Treten Sie uns im Vonage Entwickler-Slackoder taggen Sie uns auf X (früher Twitter).

Teilen Sie:

https://a.storyblok.com/f/270183/400x400/620f535ce9/atique-khan.jpg
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.