Gemini e Node.js: desenvolva um Chatbot com a IA do Google

Conversando com o Chatbot - Apresentação

Olá! Sou Jacqueline Oliveira, engenheira de software e instrutora na Alura.

Audiodescrição: Jacqueline se identifica como uma mulher branca. Possui cabelos loiros e longos. Veste uma blusa rosa-escuro de mangas curtas. Ao fundo, os estúdios da Alura, com uma iluminação em tons de azul e roxo.

Neste curso, vamos dar continuidade à jornada de desenvolvimento do Jornada Viagens, site que vai realizar vendas de passagens aéreas, hospedagens e pacotes de viagem. No entanto, desta vez, o foco será criar o chatbot para a conversa entre a API do Gemini e as pessoas clientes.

O que Aprenderemos no Curso?

Para desenvolver esse chatbot, vamos usar chamadas de função (function callings), onde teremos funções personalizadas da aplicação interagindo com a API.

Teremos também a parte de envio de documentos dentro da aplicação, como os documentos da política da empresa e do valor dos pacotes, para que a IA devolva precisamente as informações necessárias para as pessoas que utilizarem o chatbot. Essa parte de envio dos documentos é o que chamamos de embedding.

Vamos concluir vendo todo o poder de processamento do Gemini 1.5, que é o processamento multimodal (de vídeo, de imagem, de arquivos e de áudio).

Pré-requisitos

Para melhor aproveitamento, é fundamental ter feito o curso anterior sobre Gemini e Node.js.

Esperamos você no próximo vídeo!

Conversando com o Chatbot - Conhecendo a aplicação

Chegou o momento de começar. Vamos continuar no mesmo projeto, Jornada Viagens, o site de venda de pacotes de viagens, passagens aéreas, entre outros.

Dessa vez, foco é construir um chatbot. No curso anterior, vimos algumas interações de uma única vez, onde enviávamos algo e recebíamos uma resposta. Nesse momento, objetivo é conversar com a IA e manter essa conversa dentro de um histórico.

Entre as atividades desta aula, disponibilizaremos um link com o projeto inicial, que também está disponível abaixo.

• Baixe o projeto inicial Jornada Viagens.]

Conhecendo o Chatbot

Vamos começar do mesmo ponto e mostrar como está funcionando esse chatbot. Acessando esse projeto no VS Code, veremos no explorador lateral as pastas "static" e "templates", além do arquivo package.json. No interior desse último, teremos o Nodemon e as dependências do Express e do Google.

package.json:

{
  "name": "3752-gemini-com-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@google/generative-ai": "^0.6.0",
    "express": "^4.19.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

Para iniciar o projeto, precisamos abrir um terminal com "Ctrl+Shift+'" e fazer o npm install para criar a pasta "NodeModules" e começarmos a executar.

npm install

Após a instalação das dependências necessárias, já que temos o Nodemom instalado como dependência, vamos executar npm start para executar o projeto.

npm start

Após a execução, ele informará que o servidor já está escutando na porta 3000.

Server listening on port 3000

Vamos voltar para o navegador e mostrar o projeto, acessando o localhost:3000.

localhost:3000

Na página, veremos o chatbot do Jornada Viagens com a logo da aplicação no canto superior direito, o botão "Limpar Conversa" no canto superior direito, um balão de fala no canto inferior esquerdo e um campo de digitação abaixo dele, que ocupa a largura da página. O balão de fala do chatbot nos disse: "Olá! Eu sou assistente virtual do Jornada Viagens. Como posso te ajudar?"

Atualmente, se enviarmos um "oi" ou qualquer outra mensagem no campo de digitação, ele replicará essa mensagem. Portanto, precisaremos ajustar essa comunicação e resposta.

No código, ele está programado para retornar a mesma mensagem que estamos enviando. Voltando ao explorador lateral do VS Code, temos um arquivo dentro do caminho de pastas "static > js", chamado app.js. Em seu interior, há a função enviarMensagem, que está devolvendo a mesma mensagem.

A seguir, teremos que criar uma comunicação com o chat, que ainda não existe. Teremos que fazer algumas alterações e mexer em alguns arquivos.

Conversando com o Chatbot - Iniciando o chat

Interrompemos a aplicação para retornar ao Playground e ver como faremos essa interação. Precisamos interagir com o chat, portanto, faremos uma simulação.

Criando a Comunicação com o Chat

Queremos saber sobre algum lugar para viajar. Acessando a página do Google AI Studio no computador, vamos selecionar o modelo Gemini 1.5 Pro e enviar a seguinte mensagem:

Oi, adoro viagens e quero conhecer o Canadá

Ele vai responder e guardar esse histórico à medida que perguntamos.

Ah, o Canadá é um ótimo destino! CA Com paisagens deslumbrantes, cidades vibrantes e pessoas amigáveis, tem algo para todos. O que mais te interessa: natureza, cidades grandes ou cultura?

Ele respondeu adequadamente, e se fizermos uma pergunta que não tem direcionamento, porém, for uma continuação, ele vai continuar conversando. Por exemplo, vamos dizer enviar o seguinte:

Nenhum desses.

Ele vai entender e continuar conversando.

Opa! Então me diga, o que te atrai no Canadá?

Observaremos que houve um histórico dessa conversa.

Para pegar esse código, sempre temos a possibilidade de clicar no "Get code", no canto superior direito da tela. Ao clicar nele, temos uma janela que exibe guias com várias linguagens de programação. Vamos selecionar a guia "JavaScript", que nos dá a possibilidade de copiar o código com todas as configurações padrões.

Essas configurações são as que mencionamos no curso anterior, com a temperatura, o topK, o topP, o máximo de tokens de saída, as configurações de segurança e tudo o que testamos no Playground.

Podemos copiar por essa janela o chat inteiro, inclusive, com o histórico. Temos essa opção, mas vamos optar por copiar pela documentação, porque, para o que vamos fazer nesse curso, não precisamos configurar essas respostas e o que estamos fazendo nesse momento.

Para pegar pela documentação, vamos fechar essa janela pop-up, acessar o explorador lateral esquerdo e clicar na opção "Documentation". Ela exibirá uma nova guia no navegador, com o título "Começar a usar a API Gemini".

Em seu interior, vamos rolar a tela para baixo até a opção "Começar a usar o Node". Ao clicar nela, ele exibirá uma tela com várias opções, como "Gerar texto com base em apenas uma entrada de texto", "Gerar texto com base na entrada de texto e imagem (multimodal)", e "Criar conversas com vários turnos (chat)".

Vamos clicar nessa opção de criar o chat. Isso nos levará a uma nova seção com um código padrão, disponível abaixo.

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

// Access your API key as an environment variable (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(process.env.API_KEY);

async function run() {
  // For text-only input, use the gemini-pro model
  const model = genAI.getGenerativeModel({ model: "gemini-pro"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Vamos copiar esse código para colar na aplicação e voltar à aplicação Node no VS Code.

No explorador lateral, vamos criar um novo arquivo na pasta raiz do projeto, chamado chat.js para simular essa conversa. Depois, se for preciso, podemos renomeá-lo ou movê-lo.

Em seu interior, vamos colar o que copiamos na documentação do Gemini. Repararemos que há dois trechos de código comentados. Vamos remover esses comentários, porque já conhecemos esses trechos — o primeiro trata da chave que possuímos na variável de ambiente e o segundo trata do modelo utilizado (1.1.0).

Após excluir os comentários, vamos ajustar a chave e o modelo. Na linha const genAI = new GoogleGenerativeAI(process.env.API_KEY), vamos colocar a chave após o env, que está GEMINI_API_KEY.

No modelo, podemos tentar fazer o teste com a versão 1.5. Portanto, na linha const model = genAI.getGenerativeModel({ model: "gemini-pro"}), vamos alterar a versão para gemini-1.0-pro-latest. Vamos fazer o teste com o latest e, se necessário, alteramos depois.

Dica: É normal pessoas desenvolvedoras trabalharem com ferramentas em suas versões mais recentes, até mesmo antes do lançamento. No momento da gravação deste vídeo, o Gemini possuía uma versão pré-lançamento da versão 1.5 Pro, que ainda não estava liberada para uso no chat.

No curso anterior, chegamos a fazer o uso do Gemini 1.5 na API para perguntas livres, portanto, é possível que essa versão já esteja totalmente liberada quando você estiver neste curso, permitindo a você utilizá-la no lugar da 1.0.

Por fim, o require apontará um erro, porque estamos usando um import em seu lugar, desde o curso anterior. Para corrigir, vamos substituir a linha const { GoogleGenerativeAI } = require("@google/generative-ai") por import { GoogleGenerativeAI } from "@google/generative-ai".

import { GoogleGenerativeAI } from "@google/generative-ai";

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

async function run() {
  const model = genAI.getGenerativeModel({ model: "gemini-1.0-pro"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Observaremos que, diferente do código que vimos anteriormente, que usava muito a expressão generateContent, ele está usando startChat, portanto, é uma inicialização do chat. Dentro do bloco history dessa inicialização, há uma sugestão do que a pessoa usuária perguntou e o que o modelo perguntou.

Vamos alterar esse trecho de perguntas e respostas em inglês para falar sobre viagem e ilustrar melhor. Iniciaremos com "Oi, adoro viajar!", a para qual a resposta seria "Ah, que legal. Para onde deseja viajar?".

Para visualizar essa conexão, vamos até a linha da const msg e colocar a pergunta fixa nela. Vamos substituir a pergunta em inglês relativa a animais por "Quero ir para o Canadá", para ver a resposta dele.

import { GoogleGenerativeAI } from "@google/generative-ai";

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

async function run() {
  const model = genAI.getGenerativeModel({ model: "gemini-1.0-pro"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Oi, adoro viajar!" }],
      },
      {
        role: "model",
        parts: [{ text: "Ah, que legal. Para onde deseja viajar?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "Quero ir para o Canadá";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Apesar de utilizar um run no final de tudo, ainda não estamos conectando com o front. Portanto, vamos executar esse arquivo individualmente para testar se a conexão com a API, a pergunta e a resposta já estão acontecendo. Posteriormente, nos preocuparemos com a conexão com o front.

Vamos abrir um novo terminal com o atalho "Ctrl+Shift+'". Em seu interior, como queremos executar esse arquivo chat.js, vamos usar aquele comando conhecido:

node chat.js

Após a execução, ele vai exibir a mensagem:

Excelente escolha! O Canadá é um país lindo, com muito a oferecer. Que tipo de atividades ou experiências você está procurando em sua viagem?

Com isso, a conexão está pronta. A chave foi confirmada, o chat já entendeu a pergunta, o histórico, e nos respondeu.

Entretanto, isso ainda está desconectado do front. Em sequência, vamos ver como conectar todas essas pontas, ou seja, pegar o que fizemos no terminal e passar para o chatbot, permitindo a continuidade na conversa.

Te esperamos no próximo vídeo!

Sobre o curso Gemini e Node.js: desenvolva um Chatbot com a IA do Google

O curso Gemini e Node.js: desenvolva um Chatbot com a IA do Google possui 119 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conversando com o Chatbot
• Conectando com o Frontend
• Function Calling
• Embeddings
• Recursos extras do Gemini