Integra ChatGPT con Meta (Facebook) Messenger a través de Messages API

Este artículo ha sido escrito en colaboración con Benjamin Aronov y actualizado en julio de 2025

Introducción

La IA conversacional se ha convertido en un elemento fundamental para mejorar la experiencia del usuario en diversas plataformas. Uno de los canales más populares para interactuar con los usuarios es Meta Messengerantes conocido como Facebook Messenger. Con miles de millones de usuarios activos, los desarrolladores tienen la oportunidad de crear chatbots inteligentes que pueden ayudar con la atención al cliente, responder preguntas y hacer que la experiencia sea más personal.

En este post, aprenderás a conectar ChatGPT a Meta Messenger utilizando la Mensajes API de Vonage para que puedas construir tu propio chatbot inteligente y receptivo.

>> tl;dr Encuentra el código completamente funcional en este repositorio de GitHub.

Requisitos previos

• Cuenta API de Vonage

• Cuenta API OpenAI

• Nodo JavaScript versión 20 o superior

• ngrok para túneles

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.

Crear una aplicación de Vonage

Antes de crear tu aplicación de Vonage, abre un túnel con ngrok en tu terminal, que utilizarás para configurar los webhooks:

ngrok http 3000

Para obtener más ayuda, consulte Pruebas con ngrok.

Ahora tienes tu URL ngrok que se parece a:

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

¡Ahora estás listo para crear una aplicación de Vonage!

Habilite las capacidades de Mensajes y añada su URL ngrok para los webhooks:

• Para Inbound: https://YOUR_NGROK_URL/inbound

• Por el estado: https://YOUR_NGROK_URL/status

Haga clic en "Generar clave pública y privada". Esto descargará automáticamente un archivo llamado "private.key". Más tarde, moveremos este archivo a nuestro proyecto. Por último, haz clic en "Generar nueva aplicación".

Vincula tu Account de Facebook a Vonage

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

1. En el panel para desarrolladores de Vonage haz clic en Cuentas externas

2. Haz clic en Conectar páginas de Facebook

3. Accede a tu Account de Facebook

4. Selecciona la página de Facebook a la que deseas conectarte

   • Si la página no aparece, asegúrate de que la Vonage API Platform esté habilitada en Integraciones comerciales

5. Haga clic en "Completar configuración".

6. Vuelve a tu aplicación de Vonage y haz clic en la pestaña Vincular canales sociales

7. Haz clic en "Vincular" junto a la página de Facebook a la que deseas asociarte

Vonage dashboard showing Facebook Messenger application details and linked page

Crear una aplicación de nodo

Abra una nueva pestaña de terminal, separada de su pestaña ngrok, y cree un nuevo directorio:

mkdir chatgpt-fb_messenger
cd chatgpt-fb_messenger

Mueve tu archivo private.key de antes a tu nuevo proyecto. A continuación, inicialice su proyecto:

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

Nuestro proyecto utiliza algunos paquetes. La biblioteca biblioteca OpenAI nos proporciona nuestras capacidades de IA generativa. El Vonage Node SDK nos permite acceder a Messages API y conectarnos con Facebook.

Instala tus dependencias de Node:

npm install express openai @vonage/server-sdk dotenv

Crea el archivo app.js:

touch app.js

Añade la siguiente plantilla a 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}`)
})

Ejecute su aplicación en un terminal separado de su ngrok:

node app.js

Puedes comprobar que todo funciona enviando un mensaje a tu página de Facebook. Verás en tu pestaña ngrok que el endpoint /inbound es alcanzado y debería recibir un estado 200. ¡Pero eso no es muy divertido! ¡Vamos a manejar nuestro mensaje de entrada de una mejor manera!

Cómo recibir un mensaje en Messenger

Vamos a añadir lógica para recibir y registrar los mensajes entrantes. Reemplaza la línea para manejar las peticiones POST al endpoint /inbound punto final:

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

Ahora, reinicia tu servidor Node y prueba enviando un mensaje a tu página de Facebook. Esta vez, en tu pestaña Node, verás tu mensaje mostrado junto con tu ID de Facebook:

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

Recibir mensajes es divertido, ¡pero ahora hagamos que ChatGPT responda a los mensajes de nuestros usuarios!

Añadir nuestras variables de entorno e inicializar nuestras bibliotecas

Apaga tu servidor node y crea un archivo .env en la raíz de tu proyecto:

touch .env

Ahora rellena tu archivo .env con tus credenciales de Vonage y OpenAI:

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

Añade el siguiente código de inicialización en la parte superior de app.jsjusto debajo de la sentencia 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 })

Cómo consultar ChatGPT

Ahora que hemos inicializado las instancias de Vonage y ChatGPT, la cosa se pone más emocionante. Ahora podemos enviar nuestros mensajes a ChatGPT.

Actualicemos nuestro /inbound y añadamos la función queryChatGPT función. Añade esta nueva función justo antes del endpoint:

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
}

Y ahora actualiza el endpoint para que devuelva la respuesta 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);
  });

Este pequeño fragmento de código envía el mensaje que recibimos a ChatGPT.

En este paso, utilizamos nuestra instancia de openai ChatGPT y el método openai.chat.completions.create para enviar el mensaje a la API. Pasamos dos piezas de información adicional: la matriz de mensajes, que actúa como contexto para la conversación, y el modelo, que le dice a OpenAI qué modelo de IA utilizar.

Para aquellos de ustedes con ojos de águila, pueden ver que enviamos un objeto de opción negro llamado chatCompletion. Dentro de chatCompletion, podemos recuperar la respuesta de la IA a nuestro texto, dentro del método choices.

Vamos a probar nuestro código de nuevo. Reinicia tu aplicación ejecutando:

node app.js

Ya puedes enviar un mensaje a la página. ¡Y ahora verás la respuesta de ChatGPT en el terminal! Algo como esto:

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.

Eso es genial.

Cómo enviar respuestas de ChatGPT como respuesta en Messenger

Ahora que tenemos a ChatGPT respondiendo en la terminal, es hora de enviar esa respuesta al usuario directamente en Messenger.

Para ello, utilizaremos la clase MessengerText proporcionada por Vonage, que simplifica el envío de un mensaje de texto sin formato a través del canal Messenger.

En la parte superior de su archivo app.js importe MessengerText junto con las demás importaciones:

import { MessengerText } from '@vonage/messages'

Ahora vamos a actualizar nuestro /entrada para extraer el mensaje del usuario, enviarlo a ChatGPT, y enviar la respuesta de la IA de vuelta a 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)
  }
})

Vamos a desglosarlo:

• from: debería ser req.body.to - eso es ustedel destinatario del mensaje original.

• to: debe ser req.body.from - es el usuario que envió el mensaje a tu página.

• text: es el mensaje que recibiremos de ChatGPT.

Si ejecutas esto y lo pruebas, ¡deberías obtener una respuesta directamente en Messenger! Pero hay una pega...

Facebook Messenger limita la longitud de los mensajes a 640 caracteres. Si ChatGPT se excede, tu mensaje podría fallar silenciosamente.

Por supuesto, puedes trocear manualmente los mensajes o modificar tu código, pero hay una forma mejor: simplemente dile a GPT que sea breve. Hagámoslo ahora.

Cómo hacer que nuestro bot sea consciente del contexto

Hagamos dos mejoras:

1. Dé a ChatGPT una instrucción del sistema para mantener las respuestas por debajo de 640 caracteres.

2. Empieza a seguir el historial de conversaciones para que las respuestas puedan basarse en mensajes anteriores.

Para ello, crearemos una matriz compartida para mantener la conversación en curso:

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

Ahora actualicemos nuestra función queryChatGPT a:

• Empuje cada nuevo mensaje de usuario a la conversación.

• Llama a la API de OpenAI utilizando el historial de conversaciones completo.

• Trunca las respuestas si son demasiado largas.

• Añade también la respuesta de ChatGPT al historial de conversación.

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

Ahora, cada vez que un usuario envía un mensaje, guardamos todo el intercambio. Así, cuando alguien pregunte ¿cuál es el queso más oloroso?

Y luego sigue con: ¿qué vino va con eso?

ChatGPT entiende el contexto, igual que en una conversación real.

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

Conclusión

Ya está. Ya tienes un chatbot de Messenger que funciona con ChatGPT. A partir de aquí, puedes añadir soporte para otros canales como WhatsApp o SMS utilizando la Messages API, o conectarte a la Voice API para agentes de audio. Incluso puedes probar a guardar el historial de conversaciones en una base de datos o en otro servicio de terceros.

Como siempre, nos encantaría ver lo que construyes. Únete a nosotros en Slack de la comunidad de desarrolladores de Vonage o etiqueta VonageDev en X.