Démarrer avec Gemini Fullstack LangGraph

Si vous souhaitez tirer le meilleur parti du modèle Gemini, la meilleure approche consiste à utiliser l'API Google Gen AI avec l'application de chat Gemini Fullstack LangGraph. Cette configuration fournit un assistant de recherche en IA complet, avec un frontend React et un backend LangGraph.

Dans ce tutoriel, vous apprendrez à configurer l'application à partir de zéro : vous installerez le frontend et le backend, les exécuterez ensemble à l'aide d'une seule commande, et testerez l'application pour vous assurer que tout fonctionne correctement. 

Ensuite, nous verrons comment déployer l'application à l'aide de Docker, ce qui est une façon beaucoup plus conviviale pour les débutants d'accéder à l'application et d'expérimenter les capacités de génération de réponses très précises et détaillées du modèle Gemini.

Si vous cherchez d'autres projets basés sur Gemini ou LangGraph, n'oubliez pas de lire nos tutoriels Gemini 2.5 Pro API : Un guide avec un projet de démonstration et LangGraph Tutorial : Qu'est-ce que LangGraph et comment l'utiliser ?. 

1. Mise en place

Si vous utilisez Windows, il est fortement recommandé d'utiliser le sous-système Windows pour Linux (WSL) pour une expérience de développement plus fluide. WSL vous permet d'exécuter un environnement Linux complet directement sous Windows, ce qui facilite l'utilisation des outils Linux.

1. Ouvrez PowerShell en tant qu'administrateur et exécutez la commande wsl --install. Cela installera Ubuntu par défaut et peut nécessiter un redémarrage du système.

2. Après le redémarrage, lancez Ubuntu à partir du menu Démarrer ou en tapant wsl dans PowerShell.

3. Installez Node.js 18 en utilisant 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. Vérifiez la version de Node.js que vous avez installée et assurez-vous qu'elle est 18 ou supérieure.

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

2. Installation du Frontend et du Backend

1. Clonez le dépôt Gemini Fullstack LangGraph Quickstart et naviguez dans le répertoire du projet :

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

Votre structure de répertoire devrait maintenant ressembler à ceci :

2. Accédez à Google AI Studio et générez une clé API Gemini. 

Source : Obtenir la clé API de Google AI Studio

3. Naviguez vers le répertoire backend et créez le fichier .env avec la clé API Gemini. Remplacez "YOUR_ACTUAL_API_KEY" par la clé que vous avez générée.

4. Installez tous les paquets Python à l'aide de la commande PIP. 

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

5. Retournez à la racine du projet et naviguez jusqu'au répertoire frontend. Installez les dépendances frontales à l'aide de npm.

cd ..
cd frontend                               
npm install  

3. Exécution de l'application 

Une fois que vous avez installé toutes les dépendances, vous pouvez démarrer les serveurs frontend et backend en mode développement à partir de la racine du projet.

1. Depuis le répertoire racine de votre projet, exécutez :

make dev

Cette commande lancera à la fois le frontend (utilisant Vite) et le backend (utilisant LangGraph/FastAPI) en mode développement.

2. Le frontend est propulsé par Vite, un outil de construction moderne qui offre une expérience de développement rapide et efficace pour les projets 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. Le serveur dorsal démarre et affiche des informations telles que :

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 base : http://127.0.0.1:2024
• Documentation API : http://127.0.0.1:2024/docsYoupeut utiliser cette documentation OpenAPI pour tester les points de terminaison du backend directement à partir de votre navigateur.
• LangGraph Studio UI : https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Thistableau de bord vous permet de visualiser et de tester vos flux de travail LangGraph.

4. Vous pouvez tester le flux de travail LangGraph en accédant à l'interface utilisateur LangGraph Studio. 

Source : smith.langchain.com

L'API du backend se trouve à l'adresse suivante : http://127.0.0.1:2024. La documentation de l'API est disponible à l'adresse suivante : http://127.0.0.1:2024/docs. Vous pouvez tester chaque point de terminaison du backend à l'aide de la documentation OpenAPI.

Ouvrez http://localhost:5173/app/ dans votre navigateur pour accéder à l'interface de l'application de chat. L'application de chat est similaire au ChatGPT. Il vous suffit d'écrire la question et le logiciel commencera à opérer sa magie. 

Fonctionnement de l'application de chat en arrière-plan :

1. Sur la base des données fournies par l'utilisateur, il génère un ensemble de requêtes de recherche initiales à l'aide d'un modèle Gemini.
2. Pour chaque requête, il utilise le modèle Gemini avec l'API de recherche Google pour trouver les pages web pertinentes.
3. L'agent analyse les résultats de la recherche pour identifier les lacunes en matière de connaissances, en utilisant le modèle de réflexion Gemini.
4. Si des lacunes sont constatées, il génère des requêtes de suivi et répète les étapes de recherche et de réflexion (jusqu'à une certaine limite).
5. Une fois qu'il a recueilli suffisamment d'informations, l'agent synthétise une réponse cohérente avec des citations.

Cette application n'en étant qu'à ses débuts, il se peut que vous rencontriez quelques bogues et incohérences, en particulier dans l'interface frontale. L'un des problèmes les plus fréquents est l'incohérence du rendu de la page d'accueil.

Pour résoudre ce problème, mettez à jour la ligne 57 dans frontend/src/App.tsx comme suit :

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

4. Déploiement de l'application à l'aide de Docker

Le déploiement de votre application avec Docker est simple et efficace. Docker vous permet de regrouper votre application et ses dépendances dans un seul conteneur.

1. Téléchargez et installez Docker Desktop pour votre système d'exploitation (Windows, macOS ou Linux). Vous trouverez le programme d'installation et les instructions détaillées sur le site officiel de Docker. Une fois installé, lancez Docker Desktop pour vous assurer qu'il fonctionne correctement.

2. Naviguez jusqu'au répertoire racine du projet et exécutez la commande suivante dans votre terminal pour construire l'image Docker :

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

3. Pour exécuter l'application, vous aurez besoin de deux clés API :

• Clé API Gemini: Obtenez-le à partir du Google AI Studio.
• Clé API LangSmith: Visitez le site officiel de LangSmith, créez un compte gratuit et générez votre clé API.

Source : LangSmith

4. Démarrez l'application à l'aide de Docker Compose, en remplaçant les espaces réservés par vos clés d'API réelles :

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

5. Accédez à l'application :

• Frontal : http://localhost:8123/app/
• Documentation API : http://localhost:8123/docs

5. Test de l'application 

Naviguez vers http://localhost:8123/app/ dans votre navigateur web. Tapez une question dans le champ de saisie : "Citez les 5 principaux titres de l'actualité".

Une fois que vous aurez soumis votre question, l'application commencera son processus de recherche. Vous verrez, étape par étape, comment l'agent recueille et analyse les informations pour répondre à votre demande.

L'application fournira une réponse détaillée, y compris des liens directs vers les publications pertinentes. La qualité et la profondeur des réponses dépassent souvent celles des autres outils de recherche approfondie, offrant plus de transparence et de contexte dans les résultats.

Pour en savoir plus, consultez votre tableau de bord LangSmith. Ici, vous pouvez consulter un journal complet de toutes les étapes que l'agent a suivies pour générer votre réponse. Cette trace détaillée vous aide à comprendre le processus de raisonnement de l'agent et garantit la transparence de la construction des réponses.

Source : LangSmith

Conclusion

En moins de 10 minutes, vous pouvez créer l'image Docker et lancer localement votre propre application d'IA de recherche approfondie, en utilisant les API gratuites fournies par Google Gemini et LangSmith. 

Ce guide vous a guidé à travers une mise en œuvre simple, démontrant comment le modèle Gemini progresse dans sa capacité à identifier les bons outils, à générer des réponses de recherche très détaillées, précises et actualisées.

Vous avez appris à configurer l'application, à installer le backend et le frontend, et à tout exécuter localement. En outre, nous avons abordé une méthode de déploiement alternative utilisant Docker, ce qui rend encore plus facile le démarrage et l'expérience de la puissance de l'IA de recherche approfondie.

Si vous êtes à la recherche de votre prochain projet, consultez notre guide sur Gemini Diffusion : Un guide avec 8 exemples pratiques.