Primeiros passos com o Gemini Fullstack LangGraph

Se você quiser aproveitar ao máximo o modelo Gemini, a melhor abordagem é usar a API Gen AI do Google junto com o aplicativo de bate-papo Gemini Fullstack LangGraph. Essa configuração fornece um assistente de pesquisa de IA de pilha completa, com um front-end React e um back-end LangGraph.

Neste tutorial, você aprenderá a configurar o aplicativo do zero: você instalará o front-end e o back-end, executará os dois com um único comando e testará o aplicativo para garantir que tudo funcione sem problemas. 

Em seguida, faremos a implantação do aplicativo usando o Docker, que é uma maneira muito mais amigável para iniciantes acessarem o aplicativo e experimentarem os recursos de geração de resposta altamente precisos e detalhados do modelo Gemini.

Se você estiver procurando outros projetos baseados em Gemini ou LangGraph, não deixe de ler nossos tutoriais Gemini 2.5 Pro API: Um guia com projeto de demonstração e LangGraph Tutorial: O que é o LangGraph e como usá-lo?. 

1. Configuração

Se você estiver usando o Windows, é altamente recomendável usar o Windows Subsystem for Linux (WSL) para ter uma experiência de desenvolvimento mais tranquila. A WSL permite que você execute um ambiente Linux completo diretamente no Windows, facilitando o uso de ferramentas Linux.

1. Abra o PowerShell como administrador e execute o comando wsl --install. Isso instalará o Ubuntu por padrão e poderá exigir a reinicialização do sistema.

2. Após a reinicialização, inicie o Ubuntu no menu Iniciar ou digitando wsl no PowerShell.

3. Instale o Node.js 18 usando o NVM (Node Version Manager).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

4. Verifique a versão do Node.js instalada e certifique-se de que ela seja 18 ou superior.

node --version
npm --version
v18.20.8
10.8.2

2. Instalação do front-end e do back-end

1. Clone o repositório Gemini Fullstack LangGraph Quickstart e navegue até o diretório do projeto:

git clone https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart.git
cd gemini-fullstack-langgraph-quickstart

Sua estrutura de diretórios deve ter a seguinte aparência:

2. Acesse o Google AI Studio e gere uma chave de API Gemini. 

Fonte: Obter chave de API | Google AI Studio

3. Navegue até o diretório backend e crie o arquivo .env com a chave da API do Gemini. Substitua "YOUR_ACTUAL_API_KEY" pela chave que você gerou.

4. Instale todos os pacotes Python usando o comando PIP. 

cd backend                                
echo 'GEMINI_API_KEY="YOUR_ACTUAL_API_KEY"' > .env
pip install .

5. Retorne à raiz do projeto e navegue até o diretório de front-end. Instale as dependências do front-end usando npm.

cd ..
cd frontend                               
npm install  

3. Executar o aplicativo 

Depois de instalar todas as dependências, você pode iniciar os servidores front-end e back-end no modo de desenvolvimento a partir da raiz do projeto.

1. No diretório raiz do seu projeto, execute:

make dev

Esse comando iniciará o front-end (usando o Vite) e o back-end (usando o LangGraph/FastAPI) no modo de desenvolvimento.

2. O front-end é alimentado pelo Vite, uma ferramenta de criação moderna que oferece uma experiência de desenvolvimento rápida e eficiente para projetos da Web. 

> frontend@0.0.0 dev
> vite


  VITE v6.3.4  ready in 392 ms

  ➜  Local:   http://localhost:5173/app/
  ➜  Network: use --host to expose

3. O servidor backend será iniciado e exibirá informações como:

INFO:langgraph_api.cli:

        Welcome to

╦  ┌─┐┌┐┌┌─┐╔═╗┬─┐┌─┐┌─┐┬ ┬
║  ├─┤││││ ┬║ ╦├┬┘├─┤├─┘├─┤
╩═╝┴ ┴┘└┘└─┘╚═╝┴└─┴ ┴┴  ┴ ┴

- 🚀 API: http://127.0.0.1:2024
- 🎨 Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024
- 📚 API Docs: http://127.0.0.1:2024/docs

This in-memory server is designed for development and testing.
For production use, please use LangGraph Cloud.

• API de back-end: http://127.0.0.1:2024
• Documentação da API: http://127.0.0.1:2024/docsYoupode usar esta documentação da OpenAPI para testar os pontos de extremidade de back-end diretamente do navegador.
• LangGraph Studio UI :o painel https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Thispermite que você visualize e teste seus fluxos de trabalho LangGraph.

4. Você pode testar o fluxo de trabalho do LangGraph acessando a interface do usuário do LangGraph Studio. 

Fonte: smith.langchain.com

A API de back-end está localizada em: http://127.0.0.1:2024. A documentação da API pode ser encontrada em: http://127.0.0.1:2024/docs. Você pode testar cada endpoint de backend usando a documentação da OpenAPI.

Abra http://localhost:5173/app/ no seu navegador para acessar a interface do aplicativo de bate-papo. O aplicativo de bate-papo é semelhante ao ChatGPT. Basta escrever a pergunta e ele começará a fazer sua mágica. 

Como o aplicativo de bate-papo funciona no back-end:

1. Com base na entrada do usuário, ele gera um conjunto de consultas de pesquisa iniciais usando um modelo Gemini.
2. Para cada consulta, ele usa o modelo Gemini com a API de pesquisa do Google para encontrar páginas da Web relevantes.
3. O agente analisa os resultados da pesquisa para identificar lacunas de conhecimento, usando o modelo Gemini para reflexão.
4. Se forem encontradas lacunas, ele gera consultas de acompanhamento e repete as etapas de pesquisa e reflexão (até um limite definido).
5. Depois que informações suficientes são coletadas, o agente sintetiza uma resposta coerente com citações.

Como este aplicativo ainda está em seus estágios iniciais, você poderá encontrar alguns erros e inconsistências, principalmente na interface de front-end. Um problema frequente é a renderização inconsistente do front-end.

Para resolver isso, atualize a linha 57 em frontend/src/App.tsx da seguinte forma:

-           : `Need more information, searching for ${event.reflection.follow_up_queries.join(
+           : `Need more information, searching for ${(event.reflection.follow_up_queries || []).join(

4. Implantação do aplicativo usando o Docker

A implantação do seu aplicativo com o Docker é simples e eficiente. O Docker permite que você empacote seu aplicativo e suas dependências em um único contêiner.

1. Baixe e instale o Docker Desktop para seu sistema operacional (Windows, macOS ou Linux). Você pode encontrar o instalador e as instruções detalhadas no site oficial do Docker. Depois de instalado, inicie o Docker Desktop para garantir que ele esteja funcionando corretamente.

2. Navegue até o diretório raiz do projeto e execute o seguinte comando em seu terminal para criar a imagem do Docker:

docker build -t gemini-fullstack-langgraph -f Dockerfile .

3. Para executar o aplicativo, você precisará de duas chaves de API:

• Chave de API da Gemini: Você pode obter isso no Google AI Studio.
• LangSmith API Key: Visite o site oficial do LangSmith, inscreva-se em uma conta gratuita e gere sua chave de API.

Fonte: LangSmith

4. Inicie o aplicativo usando o Docker Compose, substituindo os espaços reservados por suas chaves de API reais:

GEMINI_API_KEY=<your_gemini_api_key> LANGSMITH_API_KEY=<your_langsmith_api_key> docker-compose up

5. Acesse o aplicativo:

• Frontend: http://localhost:8123/app/
• Documentação da API: http://localhost:8123/docs

5. Testando o aplicativo 

Navegue até http://localhost:8123/app/ em seu navegador da Web. Digite uma pergunta na caixa de entrada "Listar as 5 principais manchetes de notícias".

Depois que você enviar sua pergunta, o aplicativo iniciará o processo de pesquisa. Você verá um detalhamento passo a passo de como o agente está coletando e analisando informações para responder à sua consulta.

O aplicativo fornecerá uma resposta detalhada, incluindo links diretos para as publicações relevantes. A qualidade e a profundidade das respostas geralmente superam as de outras ferramentas de pesquisa profunda, oferecendo mais transparência e contexto nos resultados.

Para obter informações ainda mais detalhadas, visite seu LangSmith Dashboard. Aqui, você pode analisar um registro abrangente de cada etapa que o agente realizou para gerar sua resposta. Esse rastreamento detalhado ajuda você a entender o processo de raciocínio do agente e garante a transparência na forma como as respostas são construídas.

Fonte: LangSmith

Conclusão

Em menos de 10 minutos, você pode criar a imagem do Docker e iniciar seu próprio aplicativo de IA de pesquisa profunda localmente, usando as APIs gratuitas fornecidas pelo Google Gemini e LangSmith. 

Este guia conduziu você por uma implementação simples, demonstrando como o modelo Gemini está avançando em sua capacidade de identificar as ferramentas certas e gerar respostas de pesquisa altamente detalhadas, precisas e atualizadas.

Você aprendeu a configurar o aplicativo, instalar o backend e o frontend e executar tudo localmente. Além disso, abordamos um método alternativo de implantação usando o Docker, facilitando ainda mais a introdução e a experiência do poder da IA de pesquisa profunda.

Se você está procurando seu próximo projeto, consulte nosso guia sobre Gemini Diffusion: Um guia com 8 exemplos práticos.