Integrieren Sie ChatGPT mit Meta (Facebook) Messenger über Messages API

Dieser Artikel wurde geschrieben in Zusammenarbeit mit Benjamin Aronow

Einführung

Konversationelle KI ist für die Verbesserung der Nutzererfahrung auf verschiedenen Plattformen von zentraler Bedeutung. Einer der beliebtesten Kanäle für die Interaktion mit Nutzern ist Meta Messengerder früher als Facebook Messenger bekannt war. Mit Milliarden von aktiven Nutzern haben Entwickler die Möglichkeit, intelligente Chatbots zu entwickeln, die beim Kundensupport helfen, Fragen beantworten und das Erlebnis persönlicher gestalten.

In diesem Beitrag erfahren Sie, wie Sie ChatGPT mit Meta Messenger verbinden können, indem Sie die Vonage-Nachrichten-API damit Sie Ihren eigenen intelligenten, reaktionsschnellen Chatbot erstellen können.

>> tl;dr Finden Sie den vollständig funktionierenden Code in diesem GitHub-Repositorium.

Voraussetzungen

• Vonage API-Konto

• OpenAI API-Konto

• JavaScript-Knoten Version 20 oder höher

• ngrok für den Tunnelbau

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.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Erstellen einer Vonage-Anwendung

Bevor Sie Ihre Vonage-Anwendung erstellen, öffnen Sie in Ihrem Terminal einen Tunnel mit ngrok, den Sie verwenden werden, um die Vonage-Anwendung einzurichten Webhooks:

ngrok http 3000

Für weitere Hilfe siehe Testen mit ngrok.

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 eine Vonage-Anwendung erstellen!

Aktivieren Sie die Nachrichtenfunktionen und fügen Sie Ihre ngrok-URL für die Webhooks hinzu:

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

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

Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren". Dadurch wird automatisch eine Datei namens "private.key" heruntergeladen. Später werden wir diese Datei in unser Projekt verschieben. Klicken Sie schließlich auf "Neue Anwendung generieren".

Verknüpfen Sie Ihr Facebook-Konto mit Vonage

Step-by-step interface for connecting a Facebook Business Page to the Vonage Messages API

1. Im Vonage Developer Dashboard, klicken Sie auf Externe Konten

2. Klicken Sie auf Facebook-Seiten verbinden

3. Melden Sie sich bei Ihrem Facebook-Konto an

4. Wählen Sie die Facebook-Seite aus, mit der Sie sich verbinden möchten

   • Wenn die Seite nicht angezeigt wird, vergewissern Sie sich, dass die Vonage API-Plattform unter Business Integrations aktiviert ist.

5. Klicken Sie auf "Einrichtung abschließen".

6. Kehren Sie zu Ihrer Vonage-Anwendung zurück und klicken Sie auf die Registerkarte Link Social Channels

7. Klicken Sie auf "Link" neben der Facebook-Seite, die Sie verknüpfen möchten

Vonage dashboard showing Facebook Messenger application details and linked page

Erstellen einer Node-Anwendung

Öffnen Sie eine neue Terminal-Registerkarte, getrennt von Ihrer ngrok-Registerkarte, und erstellen Sie ein neues Verzeichnis:

mkdir chatgpt-fb_messenger
cd chatgpt-fb_messenger

Verschieben Sie Ihre private.key-Datei von vorher in Ihr neues Projekt. Initialisieren Sie dann Ihr Projekt:

npm init -y && npm pkg set type=modulegrea

Unser Projekt verwendet einige Pakete. Die OpenAI-Bibliothek gibt uns unsere generativen KI-Fähigkeiten. Die Vonage Node SDK ermöglicht uns den Zugriff auf die Nachrichten-API und die Verbindung mit Facebook.

Installieren Sie Ihre Node-Abhängigkeiten:

npm install express openai @vonage/server-sdk dotenv

Erstellen Sie die Datei app.js:

touch app.js

Fügen Sie die folgende Boilerplate in app.js ein:

import express from 'express'

const PORT = 3000
const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: false }))

app.get('/', (req, res) => res.sendStatus(200))
app.post('/status', async (req, res) => res.sendStatus(200))
app.post('/inbound', async (req, res) => res.sendStatus(200))

app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`)
})

Führen Sie Ihre Anwendung in einem anderen Terminal als Ihr ngrok aus:

node app.js

Sie können testen, ob alles funktioniert, indem Sie eine Nachricht an Ihre Facebook-Seite senden. Sie werden in Ihrem ngrok-Tab sehen, dass der /inbound Endpunkt getroffen wird und einen 200-Status erhalten sollte. Aber das ist nicht sehr lustig! Lassen Sie uns unsere eingehende Nachricht auf eine bessere Weise behandeln!

So empfangen Sie eine Nachricht in Messenger

Fügen wir eine Logik für den Empfang und die Protokollierung eingehender Nachrichten hinzu. Ersetzen Sie die Zeile für die Behandlung von POST-Anfragen an den /inbound Endpunkt:

app.post('/inbound', async (req, res) => {
  res.sendStatus(200);
  const messenger_to = req.body.to;
  const messenger_from = req.body.from;
  const received_text = req.body.text;
  console.log("Received message:", received_text, "from:", messenger_from);
});

Starten Sie nun Ihren Node-Server neu und testen Sie, indem Sie eine Nachricht an Ihre Facebook-Seite senden. Diesmal wird auf der Registerkarte "Node" Ihre Nachricht zusammen mit Ihrer Facebook-ID angezeigt:

➜  chatgpt-fb_messenger node app.js     
Server started on port 3000
Received message: Hello Facebook! This is Vonage! from: 24826607800271195

Nachrichten zu empfangen macht Spaß, aber lassen Sie uns jetzt ChatGPT auf die Nachrichten unserer Benutzer antworten!

Hinzufügen unserer Umgebungsvariablen und Initialisieren unserer Bibliotheken

Beenden Sie Ihren Node-Server und erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts:

touch .env

Füllen Sie nun Ihre .env-Datei mit Ihren Vonage- und OpenAI-Anmeldeinformationen:

API_KEY=your_vonage_api_key
APPLICATION_ID=your_vonage_app_id
PRIVATE_KEY_PATH=./private.key
OPENAI_API_KEY=your_openai_key

Fügen Sie den folgenden Initialisierungscode an den Anfang von app.jsdirekt unter der Anweisung import express ein:

import fs from 'fs'
import { Vonage } from '@vonage/server-sdk'
import OpenAI from 'openai'
import dotenv from 'dotenv'

dotenv.config()

const vonage = new Vonage({
  apiKey: process.env.API_KEY,
  applicationId: process.env.APPLICATION_ID,
  privateKey: fs.readFileSync(process.env.PRIVATE_KEY_PATH)
})

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

Wie man ChatGPT abfragt

Jetzt, wo wir die Vonage- und ChatGPT-Instanzen initialisiert haben, wird es noch spannender. Wir können jetzt unsere Nachrichten an ChatGPT senden.

Aktualisieren wir unseren /inbound Endpunkt und fügen die queryChatGPT Funktion. Fügen Sie diese neue Funktion kurz vor dem Endpunkt hinzu:

async function queryChatGPT(user_message) {
  const chatCompletion = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      { role: 'system', content: 'You are a helpful assistant. Keep responses under 640 characters.' },
      { role: 'user', content: user_message }
    ]
  })
  return chatCompletion.choices[0].message.content
}

Und nun aktualisieren Sie den Endpunkt, um die Antwort von ChatGPT zurückzugeben:

app.post('/inbound', async (req, res) => {
    res.sendStatus(200);
    const messenger_to = req.body.to;
    const messenger_from = req.body.from;
    const received_text = req.body.text;
    const answer = await queryChatGPT(received_text);
    console.log('Received message:', received_text);
    console.log('ChatGPT response:', answer);
  });

Dieses kleine Stückchen Code sendet die empfangene Nachricht an ChatGPT.

In diesem Schritt verwenden wir unsere OpenAI-Instanz ChatGPT und die Methode openai.chat.completions.create, um die Nachricht an die API zu senden. Wir übermitteln zwei zusätzliche Informationen: das Nachrichten-Array, das als Kontext für die Konversation dient, und das Modell, das OpenAI mitteilt, welches KI-Modell verwendet werden soll.

Diejenigen unter Ihnen, die ein Adlerauge haben, können sehen, dass wir ein schwarzes Optionsobjekt namens chatCompletion gesendet haben. Innerhalb von chatCompletion können wir die KI-Antwort auf unseren Text abrufen, und zwar innerhalb der Methode choices.

Testen wir unseren Code noch einmal. Starten Sie Ihre Anwendung neu, indem Sie sie ausführen:

node app.js

Sie können nun eine Nachricht an die Seite senden. Und jetzt werden Sie die Antwort von ChatGPT im Terminal sehen! Etwa so:

Received message:  what is the smelliest cheese? from:  2345801948423549411

Chat GPT Response: One of the smelliest cheeses is Époisses de Bourgogne, a French cheese known for its pungent aroma.

Das ist so cool~~

ChatGPT-Antworten als Antwort im Messenger senden

Jetzt, wo ChatGPT im Terminal antwortet, ist es an der Zeit, die Antwort direkt im Messenger an den Benutzer zurückzuschicken.

Hierfür verwenden wir die MessengerText Klasse von Vonage, die es einfach macht, eine Klartextnachricht über den Messenger-Kanal zurückzusenden.

Am Anfang Ihrer app.js Datei, importieren Sie MessengerText zusammen mit Ihren anderen Importen:

import { MessengerText } from '@vonage/messages'

Aktualisieren wir nun unsere /eingehend Webhook-Handler, um die Nachricht des Benutzers zu extrahieren, sie an ChatGPT zu senden und die Antwort der KI zurück an Messenger zu senden:

app.post('/inbound', async (req, res) => {
  res.sendStatus(200)
  const messenger_to = req.body.to
  const messenger_from = req.body.from
  const received_text = req.body.text

  try {
    const reply = await queryChatGPT(received_text)
    await vonage.messages.send(new MessengerText({
      to: messenger_from,
      from: messenger_to,
      text: reply
    }))
  } catch (error) {
    console.error("Error sending message:", error)
  }
})

Lassen Sie uns das aufschlüsseln:

• from: sollte sein req.body.to - das ist Sie, der Empfänger der ursprünglichen Nachricht.

• to: sollte sein req.body.from - das ist der Benutzer der Ihre Seite angeschrieben hat.

• text: ist die Nachricht, die wir von ChatGPT erhalten werden.

Wenn Sie dies ausführen und testen, sollten Sie direkt im Messenger eine Antwort erhalten! Aber es gibt einen Haken...

Facebook Messenger begrenzt die Länge von Nachrichten auf 640 Zeichen. Wenn ChatGPT diese Grenze überschreitet, kann Ihre Nachricht unbemerkt abgebrochen werden.

Sicher, Sie könnten Nachrichten manuell in Stücke schneiden oder Ihren Code anpassen, aber es gibt einen besseren Weg: Sagen Sie GPT einfach, es kurz zu halten. Lassen Sie uns das als nächstes tun.

Wie wir unseren Bot kontextabhängig machen

Lassen Sie uns zwei Verbesserungen vornehmen:

1. Geben Sie ChatGPT eine Systemanweisung, Antworten unter 640 Zeichen zu halten.

2. Verfolgen Sie den Gesprächsverlauf, damit Antworten auf früheren Nachrichten aufbauen können.

Zu diesem Zweck erstellen wir ein gemeinsames Array, das die laufende Konversation aufnimmt:

const conversationContext = [
  { role: 'system', content: 'You are a helpful assistant. Keep responses under 640 characters.' }
]

Aktualisieren wir nun unsere queryChatGPT Funktion zu:

• Übertragen Sie jede neue Benutzernachricht in die Unterhaltung.

• Rufen Sie die OpenAI-API unter Verwendung des vollständigen Gesprächsverlaufs auf.

• Schneiden Sie Antworten ab, wenn sie zu lang sind.

• Fügen Sie die Antwort von ChatGPT ebenfalls zum Gesprächsverlauf hinzu.

async function queryChatGPT(user_message) {
  conversationContext.push({ role: 'user', content: user_message });

  const chatCompletion = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: conversationContext
  });

  let reply = chatCompletion.choices[0].message.content;

  // Enforce Messenger's 640-character limit
  if (reply.length > 640) {
    reply = reply.substring(0, 637) + '...';
  }

  conversationContext.push({ role: 'assistant', content: reply });
  return reply;
}

Jedes Mal, wenn ein Nutzer eine Nachricht sendet, speichern wir den gesamten Hin- und Rückweg. Auf diese Weise, wenn jemand fragt: Was ist der leckerste Käse?

Und dann geht es weiter mit: Welcher Wein passt dazu?

ChatGPT versteht den Kontext, genau wie bei einem echten Gespräch.

A Facebook Messenger conversation where a user asks about the smelliest cheese and receives wine pairing advice for Limburger

Schlussfolgerung

Das war's! Sie haben jetzt einen funktionierenden Messenger-Chatbot, der von ChatGPT betrieben wird. Von hier aus können Sie Unterstützung für andere Kanäle wie WhatsApp oder SMS über die Nachrichten-API hinzufügen oder eine Verbindung zur Sprach-API für Audio-Agenten verbinden. Sie können sogar versuchen, den Gesprächsverlauf in einer Datenbank oder einem anderen Drittanbieterdienst zu speichern.

Wie immer würden wir gerne sehen, was Sie bauen. Schließen Sie sich uns auf dem Vonage Entwickler-Community Slack oder markieren Sie VonageDev auf X.