Intégrer ChatGPT avec Meta (Facebook) Messenger via Messages API

Cet article a été rédigé en collaboration avec Benjamin Aronov et mis à jour en juillet 2025

Introduction

L'IA conversationnelle est devenue essentielle pour améliorer l'expérience des utilisateurs sur diverses plateformes. L'un des canaux les plus populaires pour dialoguer avec les utilisateurs est Meta Messengeranciennement connu sous le nom de Facebook Messenger. Avec des milliards d'utilisateurs actifs, les développeurs ont la possibilité de créer des chatbots intelligents qui peuvent aider au support client, répondre aux questions et rendre l'expérience plus personnelle.

Dans cet article, vous apprendrez à connecter ChatGPT à Meta Messenger en utilisant l'API de Vonage Messages. Vonage Messages API afin que vous puissiez créer votre propre chatbot intelligent et réactif.

>> tl;dr Vous trouverez le code complet dans ce GitHub.

Conditions préalables

• Compte API Vonage

• Compte API OpenAI

• JavaScript Node version 20 ou supérieure

• ngrok pour le creusement de tunnels

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Créer une application Vonage

Avant de créer votre application Vonage, ouvrez un tunnel avec ngrok dans votre terminal, que vous utiliserez pour mettre en place les webhooks:

ngrok http 3000

Pour plus d'aide, voir Tester avec ngrok.

Vous avez maintenant votre URL ngrok qui ressemble à quelque chose comme :

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

Vous êtes maintenant prêt à créer une application Vonage !

Activez les fonctionnalités Messages et ajoutez votre URL ngrok pour les webhooks :

• Pour les appels entrants : https://YOUR_NGROK_URL/inbound

• Pour le statut : https://YOUR_NGROK_URL/status

Cliquez sur "Generate public and private key". Un fichier appelé "private.key" sera automatiquement téléchargé. Plus tard, nous déplacerons ce fichier dans notre projet. Enfin, cliquez sur "générer une nouvelle application".

Liez votre Account Facebook à Vonage

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

1. Dans le tableau de bord du développeur Vonage, cliquez sur External Accounts (comptes externes)

2. Cliquez sur Connecter des pages Facebook

3. Connectez-vous à votre Account Facebook

4. Sélectionnez la page Facebook à laquelle vous souhaitez vous connecter

   • Si la page ne s'affiche pas, assurez-vous que la plateforme API de Vonage est activée sous Intégrations commerciales

5. Cliquez sur "Complete Setup" (Terminer l'installation)

6. Retournez dans votre Applications Vonage et cliquez sur l'onglet Liaison avec les canaux sociaux.

7. Cliquez sur "Lien" à côté de la page Facebook à laquelle vous souhaitez vous associer.

Vonage dashboard showing Facebook Messenger application details and linked page

Créer une application Node

Ouvrez un nouvel onglet de terminal, séparé de votre onglet ngrok, et créez un nouveau répertoire :

mkdir chatgpt-fb_messenger
cd chatgpt-fb_messenger

Déplacez votre fichier private.key dans votre nouveau projet. Ensuite, initialisez votre projet :

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

Notre projet utilise quelques paquets. La bibliothèque bibliothèque OpenAI nous donne nos capacités d'IA générative. Le SDK Vonage Node nous permet d'accéder à l'API Messages et de nous connecter à Facebook.

Installez vos dépendances Node :

npm install express openai @vonage/server-sdk dotenv

Créez le fichier app.js :

touch app.js

Ajoutez le modèle suivant à app.js :

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}`)
})

Exécutez votre application dans un terminal séparé de votre ngrok :

node app.js

Vous pouvez vérifier que tout fonctionne en envoyant un message à votre page Facebook. Vous verrez dans votre onglet ngrok que le point de terminaison /inbound est atteint et devrait recevoir un statut 200. Mais ce n'est pas très amusant ! Traitons notre message entrant d'une meilleure manière !

Comment recevoir un message dans Messenger

Ajoutons la logique de réception et d'enregistrement des messages entrants. Remplacez la ligne pour la gestion des requêtes POST vers le point de terminaison /inbound :

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);
});

Maintenant, redémarrez votre serveur Node et testez en envoyant un message à votre page Facebook. Cette fois, dans votre onglet Node, vous verrez votre message s'afficher avec votre identifiant Facebook :

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

Recevoir des messages, c'est bien, mais il faut maintenant que ChatGPT réponde aux messages de nos utilisateurs !

Ajouter nos variables d'environnement et initialiser nos bibliothèques

Fermez votre serveur node et créez un fichier .env à la racine de votre projet :

touch .env

Maintenant, remplissez votre fichier .env avec vos identifiants Vonage et OpenAI:

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

Ajoutez le code d'initialisation suivant au début de app.jsjuste en dessous de l'instruction import express :

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

Comment interroger ChatGPT

Maintenant que nous avons initialisé les instances de Vonage et de ChatGPT, la situation devient plus excitante. Nous pouvons maintenant envoyer nos messages à ChatGPT.

Mettons à jour notre /inbound et ajoutons la fonction queryChatGPT . Ajoutons cette nouvelle fonction juste avant le point d'arrivée :

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
}

Et maintenant, mettez à jour le point de terminaison pour qu'il renvoie la réponse de ChatGPT :

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);
  });

Ce petit bout de code envoie le message que nous recevons à ChatGPT.

Dans cette étape, nous utilisons notre instance openai ChatGPT et la méthode openai.chat.completions.create pour envoyer le message à l'API. Nous transmettons deux informations supplémentaires : le tableau des messages, qui sert de contexte à la conversation, et le modèle, qui indique à OpenAI le modèle d'IA à utiliser.

Pour ceux d'entre vous qui ont l'œil aiguisé, vous pouvez voir que nous avons envoyé un objet optionnel noir nommé chatCompletion. Dans chatCompletion, nous pouvons récupérer la réponse de l'IA à notre texte, dans la méthode choices.

Testons à nouveau notre code. Redémarrez votre application en exécutant :

node app.js

Vous pouvez maintenant envoyer un message à la page. Et maintenant, vous verrez la réponse de ChatGPT dans le terminal ! Quelque chose comme ça :

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.

C'est trop cool~~~

Comment envoyer des réponses ChatGPT en tant que réponse dans Messenger

Maintenant que ChatGPT répond dans le terminal, il est temps de renvoyer cette réponse à l'utilisateur directement dans Messenger.

Pour ce faire, nous utiliserons la classe MessengerText fournie par Vonage, qui simplifie l'envoi d'un message en texte clair via le canal Messenger.

Au début de votre fichier app.js importez MessengerText avec vos autres importations :

import { MessengerText } from '@vonage/messages'

Mettons maintenant à jour notre fichier /inbound pour extraire le message de l'utilisateur, l'envoyer à ChatGPT et renvoyer la réponse de l'IA à Messenger :

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

Voyons ce qu'il en est :

• from: devrait être req.body.to - c'est vousle destinataire du message original.

• to: devrait être req.body.from - c'est le utilisateur qui a envoyé un message à votre page.

• text: c'est le message que nous recevrons de ChatGPT.

Si vous l'exécutez et le testez, vous devriez obtenir une réponse directement dans Messenger ! Mais il y a un hic...

Facebook Messenger limite la longueur des messages à 640 caractères. Si ChatGPT dépasse cette limite, votre message risque d'échouer silencieusement.

Bien sûr, vous pouvez fragmenter manuellement les messages ou modifier votre code, mais il y a une meilleure façon de procéder : dites simplement à GPT de faire court. C'est ce que nous allons faire.

Comment rendre notre robot conscient du contexte

Nous allons procéder à deux améliorations :

1. Donnez à ChatGPT une instruction système pour que les réponses ne dépassent pas 640 caractères.

2. Commencez à suivre l'historique des conversations afin que les réponses puissent s'appuyer sur les messages précédents.

Pour ce faire, nous allons créer un tableau partagé qui contiendra la conversation en cours :

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

Mettons maintenant à jour notre fonction queryChatGPT pour qu'elle devienne :

• Pousser chaque nouveau message de l'utilisateur dans la conversation.

• Appelez l'API OpenAI en utilisant l'historique complet de la conversation.

• Tronquez les réponses si elles sont trop longues.

• Ajoutez également la réponse de ChatGPT à l'historique de la conversation.

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

Désormais, chaque fois qu'un utilisateur envoie un message, nous enregistrons l'ensemble des échanges. Ainsi, lorsque quelqu'un demande : quel est le fromage le plus odorant ?

Et ensuite, il y a la question suivante : quel est le vin qui va avec ça ?

ChatGPT comprend le contexte, comme dans une vraie conversation.

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

Conclusion

Voilà, c'est fait ! Vous avez maintenant un chatbot Messenger fonctionnel alimenté par ChatGPT. À partir de là, vous pouvez ajouter la prise en charge d'autres canaux comme WhatsApp ou SMS en utilisant l'API Messages, ou vous connecter à l'API Voice API pour les agents audio. Vous pouvez même essayer de sauvegarder l'historique des conversations dans une base de données ou un autre service tiers.

Comme toujours, nous aimerions voir ce que vous construisez. Rejoignez-nous sur le Communauté des développeurs de Vonage Slack ou tagguez VonageDev sur X.