Criando um Chatbot com JavaScript e Gemini AI: criando o backend

Salve! \o

Dando continuidade a criação do nosso chatbot com Javascript e Gemini AI, vamos adicionar o "backend" do projeto. Da vez passada criamos o frontend, com HTML, CSS e Javascript, onde garantimos que a interface do usuário irá refletir uma conversa entre o usuário e o chatbot.

Agora precisamos criar um servidor, configurando uma rota com express.js para nos comunicar com a API do Gemini. Vamos lá!

Instalando as dependências do projeto

Bom, vamos precisar do express.js, o sdk do google gemini e para proteger nossa chave de API vou instalar o dotenv para trabalharmos com variáveis de ambiente.

npm install @google/generative-ai express dotenv

Agora estamos prontos para criar nosso servidor adotando melhores práticas como usar variáveis de ambiente locais para proteger dados particulares.

Para isso, vamos criar um arquivo na pasta raiz do projeto chamado de server.js. Neste arquivo vamos começar importando as dependências e configurando os recursos necessários.

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

Este código configura o express para servir arquivos estáticos da pasta "public" e aceita requisições com payload em JSON. Por isso colocamos os arquivos index.html, styles.css e script.js nesta pasta. Também configuramos a aplicação para rodar na porta 3000.

Utilizamos a biblioteca @google/generative-ai para integrar a API do Gemini, autenticando-a com uma chave armazenada em uma variável de ambiente chamada GOOGLE_GEMINI_API_KEY.

Mas onde conseguimos essa API Key? É o que vamos descobrir agora.

Chave de API do Gemini

Obtendo a chave

Para conseguir uma chave de API do Gemini, recomendo que você esteja logado em uma conta "@gmail.com". Após isso, acesse este link e você verá uma tela como esta:

Clique no botão de "Criar chave de API", indique um projeto no qual você usará esta chave e prontinho. Logo abaixo aparecerá sua chave e você poderá visualizá-la e até copiá-la para fazer o próximo passo.

Protegendo sua chave de API

Agora no seu projeto, crie um arquivo com o nome .env.local ou só .env na pasta raiz do seu projeto. Neste arquivo coloque sua chave de API da seguinte maneira:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Agora salve o seu arquivo e pronto. Se você fez o passo anterior corretamente, sua chave de API estará funcionando.

PS: atente-se ao plano que aparece na sua chave de API. O gemini oferece um plano gratuito com uma quantidade limitada de tokens que sua chave pode retornar. Se quiser maior quantidade de tokens, avalie assinar um plano pago. Vamos utilizar o plano gratuito, que mesmo limitado vai nos permitir trocar algumas mensagens com o chatbot.

Criando a rota /chat

Agora com as dependências configuradas e chave de API em mãos, vamos abrir as portas de possibilidades do que podemos fazer com a inteligência artificial.

No arquivo server.js vamos criar a rota /chat:

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem não pode estar vazia." });
  }

  //...
});

Nossa rota é do tipo POST, pois irá receber uma mensagem no corpo, justamente a mensagem do usuário que irá interagir com o chat. Então, com essa mensagem nós utilizamos um pouco de programação defensiva (não faz mal pra ninguém um pouco de cuidado rs) e verificamos se não temos uma mensagem. Se não tivermos, um erro é devolvido como resposta e uma mensagem é lançada.

Se tivermos a mensagem, aí sim iremos enviar ela como prompt para o modelo que escolhermos, da seguinte forma:

try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }

Como essa comunicação é um processo assíncrono, vamos usar try/catch para lidar com a resposta. Primeiro eu defino o modelo do Gemini que será usado (você pode conferir uma lista de modelos neste link). Neste caso optei pelo gemini-1.5-flash.

O segundo passo é iniciar o chat. Então com o model.startChat() eu posso iniciar a comunicação com o Gemini, configurando a quantidade máxima de tokens que quero na resposta (neste caso 100 tokens por resposta).

Agora nós aguardamos esta resposta depois de enviar a mensagem para o modelo com chat.sendMessage(message). Quando tivermos a resposta, iremos devolver ela para quem fez a requisição, convertendo o formato de texto devolvido pelo modelo para JSON.

E por fim mas não menos importante, se tivermos um erro podemos usá-lo dentro do catch para lançar este erro no console, e também devolvendo um status 500, facilitando a vida do cliente que está consumindo esta "mini api". Beleza?

Agora só falta indicar onde a nossa "mini api" irá rodar com o trecho de código abaixo:

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Nossa api irá rodar na porta que especificamos lá no início. O código completo do server.js é mostrado abaixo:

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem não pode estar vazia." });
  }

  try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }
});

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Testando o chatbot

Agora chegou o momento mais aguardado, o de testar nosso chatbot. Para isso, vamos abrir um terminal e digitar o seguinte comando:

node server.js

Você deve receber a seguinte mensagem no terminal depois de rodar este comando:

Servidor rodando em http://localhost:3000

Agora acessando a url http://localhost:3000 e escrevendo uma mensagem no input e pressionando o botão de enviar, a IA responde sua mensagem e ela é mostrada na tela.

Muito legal, né?

Conclusão

Com isso a gente finaliza a criação de um chatbot usando JavaScript e a API do Google Gemini. Vimos como criar o frontend do zero, aplicar estilos, fazer manipulação do DOM. Criamos um servidor com express.js, usamos a api do gemini, configuramos uma rota POST para nos comunicarmos com o cliente da aplicação e conseguimos conversar com a IA de uma interface própria, desenvolvida por nós mesmos.

---

Mas não é só isso que dá para fazer. Podemos personalizar e configurar este chatbot para diversas tarefas, desde ser um assistente de idiomas, até um professor virtual que tira suas dúvidas sobre matemática ou programação, vai depender de sua criatividade.

Transformar uma IA em um assistente personalizado envolve treinamento do modelo, mais sobre como a forma que você quer que ele responda e se comporte do que sobre código propriamente dito.

Vamos explorar um pouco disso em um próximo artigo.

Até lá!