Integre o ChatGPT ao Meta (Facebook) Messenger por meio da Messages API

Este artigo foi escrito em colaboração com Benjamin Aronov e atualizado em julho de 2025

Introdução

A IA conversacional tornou-se fundamental para aprimorar a experiência do usuário em diversas plataformas. Um dos canais mais populares para interagir com os usuários é o Meta Messenger, anteriormente conhecido como Facebook Messenger. Com bilhões de usuários ativos, os desenvolvedores têm a oportunidade de criar chatbots inteligentes que podem ajudar no atendimento ao cliente, responder a perguntas e tornar a experiência mais personalizada.

Nesta postagem, você aprenderá a conectar o ChatGPT ao Meta Messenger usando a Messages API for Vonage para que você possa criar seu próprio chatbot inteligente e responsivo.

>> Resumo Encontre o código totalmente funcional neste repositório do GitHub.

Pré-requisitos

• Account da API da Vonage

• Account da API da OpenAI

• JavaScript Node versão 20 ou superior

• ngrok o ngrok para tunelamento

Criar uma aplicação da Vonage

Antes de criar seu aplicativo Vonage, abra um túnel com o ngrok no seu terminal, que você usará para configurar os webhooks:

ngrok http 3000

Para obter mais ajuda, consulte Testando com o ngrok.

Agora você tem sua URL do ngrok, que deve ser algo como:

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

Agora você está pronto para criar uma aplicação da Vonage!

Ative os recursos do Messages e adicione sua URL do ngrok para os webhooks:

• Para o Inbound: https://YOUR_NGROK_URL/inbound

• Para o status: https://YOUR_NGROK_URL/status

Clique em “Gerar chave pública e privada”. Isso fará com que um arquivo chamado “private.key” seja baixado automaticamente. Mais tarde, vamos mover esse arquivo para o nosso projeto. Por fim, clique em “gerar novo aplicativo”.

Vincule seu Account do Facebook ao Vonage

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

1. No Painel do Desenvolvedor da Vonage, clique em “Contas externas”

2. Clique em Conectar páginas do Facebook

3. Faça login no seu Account do Facebook

4. Selecione a página do Facebook que você deseja conectar

   • Se a página não for exibida, verifique se a Plataforma de API da Vonage está ativada na seção “Integrações Empresariais”

5. Clique em “Concluir a configuração”

6. Volte à sua aplicação da Vonage e clique na guia “Vincular canais sociais”

7. Clique em “Vincular” ao lado da página do Facebook que você deseja associar

Vonage dashboard showing Facebook Messenger application details and linked page

Criar um aplicativo Node

Abra uma nova aba do terminal, separada da aba do ngrok, e crie um novo diretório:

mkdir chatgpt-fb_messenger
cd chatgpt-fb_messenger

Mova o arquivo `private.key` que você tinha anteriormente para o seu novo projeto. Em seguida, inicialize o projeto:

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

Nosso projeto utiliza alguns pacotes. A biblioteca OpenAI nos fornece nossos recursos de IA generativa. O SDK do Vonage para Node nos permite acessar a Messages API e conectar-nos ao Facebook.

Instale as dependências do Node:

npm install express openai @vonage/server-sdk dotenv

Crie o arquivo app.js:

touch app.js

Adicione o seguinte código padrão ao arquivo 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}`)
})

Execute seu aplicativo em um terminal diferente do ngrok:

node app.js

Você pode testar se tudo está funcionando enviando uma mensagem para a sua Página do Facebook. Você verá na aba do ngrok que o /inbound endpoint foi acessado e deve receber um status 200. Mas isso não é muito divertido! Vamos lidar com nossa mensagem recebida de uma maneira melhor!

Como receber uma mensagem no Messenger

Vamos adicionar uma lógica para receber e registrar as mensagens recebidas. Substitua a linha responsável pelo tratamento das solicitações POST para o /inbound ponto de extremidade:

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

Agora, reinicie seu servidor Node e faça um teste enviando uma mensagem para sua página do Facebook. Desta vez, na aba do Node, você verá sua mensagem exibida junto com seu ID do Facebook:

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

Receber mensagens é divertido, mas agora vamos fazer com que o ChatGPT responda às mensagens dos nossos usuários!

Adicionar nossas variáveis de ambiente e inicializar nossas bibliotecas

Encerre o servidor Node e crie um arquivo .env na raiz do seu projeto:

touch .env

Agora preencha seu arquivo .env com suas credenciais da Vonage e OpenAI:

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

Adicione o seguinte código de inicialização no início do arquivo app.js, logo abaixo da instrução `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 })

Como fazer consultas ao ChatGPT

Agora que inicializamos as instâncias do Vonage e do ChatGPT, as coisas estão ficando mais empolgantes. Agora podemos enviar nossas mensagens para o ChatGPT.

Vamos atualizar nosso /inbound ponto de extremidade e adicionar a queryChatGPT função. Adicione essa nova função logo antes do 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
}

E agora atualize o endpoint para retornar a resposta do 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 pequeno trecho de código envia a mensagem que recebemos para o ChatGPT.

Nesta etapa, utilizamos nossa instância do ChatGPT da OpenAI e o método `openai.chat.completions.create` para enviar a mensagem à API. Passamos duas informações adicionais: o array de mensagens, que serve como contexto para a conversa, e o modelo, que indica à OpenAI qual modelo de IA deve ser utilizado.

Para aqueles de vocês com olhos de águia, dá para perceber que passamos um objeto da classe `option` chamado `chatCompletion`. Dentro do `chatCompletion`, podemos recuperar a resposta da IA ao nosso texto, no método `choices`.

Vamos testar nosso código novamente. Reinicie seu aplicativo executando:

node app.js

Agora você pode enviar uma mensagem para a página. E agora você verá a resposta do ChatGPT no terminal! Algo assim:

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.

Isso é tão legal~~

Como enviar respostas do ChatGPT como resposta no Messenger

Agora que conseguimos que o ChatGPT responda no terminal, é hora de enviar essa resposta de volta ao usuário diretamente no Messenger.

Para isso, vamos usar a MessengerText classe fornecida pela Vonage, que simplifica o envio de uma mensagem em texto simples de volta pelo canal do Messenger.

No início do seu app.js arquivo, importe MessengerText junto com suas outras importações:

import { MessengerText } from '@vonage/messages'

Agora vamos atualizar nosso /inbound para extrair a mensagem do usuário, enviá-la ao ChatGPT e enviar a resposta da IA de volta ao 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 analisar isso:

• from: deveria ser req.body.to — isso é você, o destinatário da mensagem original.

• to: deveria ser req.body.from — esse é o usuário que enviou uma mensagem para a sua Página.

• text: é a mensagem que receberemos do ChatGPT.

Se você executar isso e testar, deve receber uma resposta diretamente no Messenger! Mas tem um porém...

O Facebook Messenger limita o comprimento das mensagens a 640 caracteres. Se o ChatGPT ultrapassar esse limite, sua mensagem poderá não ser enviada sem aviso prévio.

Claro, você poderia dividir as mensagens manualmente ou ajustar seu código, mas há uma maneira melhor: basta pedir ao GPT para ser breve. Vamos fazer isso a seguir.

Como tornar nosso bot sensível ao contexto

Vamos fazer duas melhorias:

1. Dê ao ChatGPT uma instrução de sistema para manter as respostas com menos de 640 caracteres.

2. Comece a acompanhar o histórico das conversas para que as respostas possam dar continuidade às mensagens anteriores.

Para isso, vamos criar um array compartilhado para armazenar a conversa em andamento:

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

Agora vamos atualizar nossa queryChatGPT função para:

• Envie cada mensagem de novo usuário para a conversa.

• Chame a API da OpenAI usando o histórico completo da conversa.

• Trunque as respostas se elas forem muito longas.

• Adicione também a resposta do ChatGPT ao histórico da conversa.

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

Agora, toda vez que um usuário envia uma mensagem, salvamos toda a conversa. Assim, quando alguém perguntar: qual é o queijo mais fedorento?

E depois continua: que vinho combina com isso?

O ChatGPT entende o contexto, assim como em uma conversa de verdade.

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

Conclusão

É isso aí! Agora você tem um chatbot do Messenger em funcionamento, desenvolvido com o ChatGPT. A partir daqui, você pode adicionar suporte a outros canais, como o WhatsApp ou SMS, usando a Messages API, ou conectar-se à Voice API para agentes de áudio. Você pode até tentar salvar o histórico de conversas em um banco de dados ou em outro serviço de terceiros.

Como sempre, adoraríamos ver o que vocês criam. Juntem-se a nós no Slack da Comunidade de Desenvolvedores da Vonage ou marque VonageDev no X.