Picture of Por: Claudio Andrade
Por: Claudio Andrade

Full Stack Developer

 

Aqui tá o passo a passo de como chamar o GPT da OpenAI direto de uma função Firebase.


1. 🔐 Pegue sua API Key da OpenAI


2. 📁 Estrutura básica do projeto

				
					functions/
  ├── index.js
  ├── package.json

				
			

3. package.json

				
					{
  "name": "functions",
  "dependencies": {
    "axios": "^1.6.0",
    "firebase-functions": "^4.0.0",
    "firebase-admin": "^11.0.0"
  }
}

				
			

4. index.js – Chamada ao GPT-4 via OpenAI

				
					const functions = require('firebase-functions');
const axios = require('axios');

const OPENAI_API_KEY = "SUA_CHAVE_SECRETA"; // Substitua aqui

exports.gerarRoteiro = functions.https.onRequest(async (req, res) => {
  const { destino, perfil } = req.body;

  try {
    const resposta = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: "gpt-4",
      messages: [
        { role: "system", content: "Você é um especialista em viagens." },
        { role: "user", content: `Crie um roteiro de 3 dias para um turista com perfil ${perfil} visitando ${destino}.` }
      ],
      temperature: 0.8
    }, {
      headers: {
        'Authorization': `Bearer ${OPENAI_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });

    const roteiro = resposta.data.choices[0].message.content;
    res.status(200).send({ roteiro });

  } catch (error) {
    console.error("Erro:", error.response?.data || error.message);
    res.status(500).send({ erro: "Erro ao gerar roteiro com OpenAI" });
  }
});

				
			

5. 🚀 Deploy no Firebase

				
					firebase deploy --only functions

				
			

6. 🧪 Teste com curl ou Postman

				
					curl -X POST https://SUA-URL-FIREBASE.cloudfunctions.net/gerarRoteiro \
  -H "Content-Type: application/json" \
  -d '{"destino": "Recife", "perfil": "histórico e gastronômico"}'

				
			

Exemplo:

Uma agencia de viagem chamada Vaitour com uma tela bonita que:

  1. Pede o destino e o perfil do turista,

  2. Chama tua função Firebase com OpenAI por trás,

  3. Mostra o roteiro gerado como se fosse um guia de luxo. Codigo completo

🖼️ Tela bonitinha pro Vaitour (HTML + JS)

Aqui tá um exemplo de página bem clean:

👨🏻‍🏫 Resultado

Ele vai te cuspir um roteiro lindão, dia por dia, com dicas personalizadas. Tipo um agente de viagens com QI de 200.

				
					<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Vaitour - Roteiro Personalizado</title>
  <style>
    body { font-family: sans-serif; background: #f2f2f2; padding: 20px; }
    h1 { color: #333; }
    input, select, button {
      padding: 10px;
      margin: 10px 0;
      width: 100%;
      max-width: 400px;
      font-size: 16px;
    }
    #roteiro { white-space: pre-wrap; background: #fff; padding: 20px; border-radius: 8px; margin-top: 20px; box-shadow: 0 0 10px #ccc; }
  </style>
</head>
<body data-rsssl=1>

  <h1>Monte seu roteiro com o Vaitour 🧳</h1>

  <input type="text" id="destino" placeholder="Digite o destino (ex: Recife)" />
  <select id="perfil">
    <option value="">Escolha o perfil do viajante</option>
    <option>gastronômico</option>
    <option>histórico</option>
    <option>praieiro</option>
    <option>natureza</option>
    <option>cultural</option>
    <option>romântico</option>
  </select>

  <button onclick="gerarRoteiro()">Gerar roteiro ✈️</button>

  <div id="roteiro"></div>

  <script>
    async function gerarRoteiro() {
      const destino = document.getElementById("destino").value;
      const perfil = document.getElementById("perfil").value;
      const roteiroDiv = document.getElementById("roteiro");
      roteiroDiv.innerHTML = "Gerando roteiro... Aguarde ⏳";

      try {
        const resposta = await fetch("https://SUA-URL-FIREBASE.cloudfunctions.net/gerarRoteiro", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ destino, perfil })
        });

        const dados = await resposta.json();
        roteiroDiv.innerHTML = `<h2>Seu Roteiro:</h2><p>${dados.roteiro}</p>`;
      } catch (err) {
        roteiroDiv.innerHTML = "Erro ao gerar roteiro 😥";
        console.error(err);
      }
    }
  </script>

</body>
</html>

				
			

Veja como ficaria no seu site usando o código acima.

Vaitour - Roteiro Personalizado

Monte seu roteiro com o Vaitour 🧳

Gostou! Se de tudo certo, deixe o seu comentários abaixo. Ou se precisar de ajuda, pode postar abaixo tambem.  

Quer que eu te ajude integre isso direto com o Google Sites?

Se caso queria, poste abaixo ou visite o meu canal em video no classeline.

Você quer subir o exemplo da Vaitour, num servidor próprio?

Sim! Quero usar no meu servidor 

Ou você quer usar um servidor de teste da Cobrasi NetWork