Aan de slag met Gemini Fullstack LangGraph

Als je het meeste uit het Gemini-model wilt halen, is de beste aanpak om de Google Gen AI API te gebruiken samen met de Gemini Fullstack LangGraph-chatapplicatie. Deze setup biedt een full‑stack AI-onderzoeksassistent, met een React-frontend en een LangGraph-backend.

In deze tutorial leer je hoe je de applicatie vanaf nul opzet: je installeert zowel de frontend als de backend, draait ze samen met één commando en test de applicatie om te zorgen dat alles soepel werkt. 

Daarna lopen we door het deployen van de applicatie met Docker, een veel toegankelijkere manier voor beginners om de app te gebruiken en de zeer nauwkeurige, gedetailleerde antwoordgeneratie van het Gemini-model te ervaren.

Ben je op zoek naar andere projecten op basis van Gemini of LangGraph? Lees dan zeker onze tutorials Gemini 2.5 Pro API: A Guide With Demo Project en LangGraph Tutorial: What Is LangGraph and How to Use It?. 

1. De setup

Als je Windows gebruikt, raden we sterk aan om Windows Subsystem for Linux (WSL) te gebruiken voor een soepelere ontwikkelervaring. Met WSL kun je een volledige Linux-omgeving rechtstreeks op Windows draaien, waardoor je eenvoudig Linux-tools kunt gebruiken.

1. Open PowerShell als Administrator en voer het commando wsl --install. Hiermee wordt standaard Ubuntu geïnstalleerd en mogelijk is een herstart nodig. 

2. Start na het opnieuw opstarten Ubuntu via het Startmenu of door wsl te typen in PowerShell.

3. Installeer Node.js 18 met 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. Controleer je geïnstalleerde Node.js-versie en zorg dat deze 18 of hoger is.

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

2. Frontend en backend installeren

1. Clone de Gemini Fullstack LangGraph Quickstart-repository en ga naar de projectmap:

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

Je mapstructuur zou er nu zo uit moeten zien:

2. Ga naar de Google AI Studio en genereer een Gemini API-sleutel. 

Bron: Get API key | Google AI Studio

3. Ga naar de backendmap en maak het .env-bestand met de Gemini API-sleutel. Vervang “YOUR_ACTUAL_API_KEY” door de sleutel die je hebt gegenereerd.

4. Installeer alle Python-pakketten met het PIP-commando. 

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

5. Ga terug naar de projectroot en navigeer naar de frontendmap. Installeer frontend-dependencies met npm.

cd ..
cd frontend                               
npm install  

3. De applicatie draaien 

Zodra je alle dependencies hebt geïnstalleerd, kun je zowel de frontend- als backendservers in developmentmodus starten vanuit de projectroot.

1. Voer vanuit de hoofdmap van je project uit:

make dev

Dit commando start zowel de frontend (met Vite) als de backend (met LangGraph/FastAPI) in developmentmodus.

2. De frontend draait op Vite, een moderne buildtool die een snelle en efficiënte ontwikkelervaring voor webprojecten biedt. 

> 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. De backendserver start en toont informatie zoals:

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.

• Backend-API: http://127.0.0.1:2024
• API-documentatie: http://127.0.0.1:2024/docsJe kunt deze OpenAPI-documentatie gebruiken om backend-endpoints direct vanuit je browser te testen.
• LangGraph Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Met dit dashboard kun je je LangGraph-workflows visualiseren en testen.

4. Je kunt de LangGraph-workflow testen door naar de LangGraph Studio UI te gaan. 

Bron: smith.langchain.com

De backend-API is te vinden op: http://127.0.0.1:2024. API-documentatie staat op: http://127.0.0.1:2024/docs. Je kunt elk backend-endpoint testen via de OpenAPI-documentatie.

Open http://localhost:5173/app/ in je browser om de chatinterface te openen. De chatapplicatie lijkt op ChatGPT. Stel gewoon je vraag en hij gaat voor je aan de slag. 

Zo werkt de chatapplicatie aan de backend:

1. Op basis van de invoer van de gebruiker genereert het met een Gemini-model een set eerste zoekopdrachten.
2. Voor elke query gebruikt het het Gemini-model met de Google Search API om relevante webpagina's te vinden.
3. De agent analyseert zoekresultaten om kennishiaten te identificeren, waarbij het Gemini-model voor reflectie wordt gebruikt.
4. Als er hiaten zijn, genereert het vervolgqueries en herhaalt het de onderzoeks- en reflectiestappen (tot een ingestelde limiet).
5. Zodra voldoende informatie is verzameld, synthesizeert de agent een samenhangend antwoord met bronvermeldingen.

Omdat deze applicatie nog in een vroeg stadium is, kun je wat bugs en inconsistenties tegenkomen, vooral in de frontendinterface. Een veelvoorkomend probleem is inconsistente frontend-weergave.

Om dit op te lossen, werk je regel 57 in frontend/src/App.tsx bij als volgt:

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

4. De applicatie deployen met Docker

Je applicatie deployen met Docker is eenvoudig en efficiënt. Met Docker kun je je app en zijn dependencies in één container bundelen.

1. Download en installeer Docker Desktop voor je besturingssysteem (Windows, macOS of Linux). Je vindt de installer en gedetailleerde instructies op de officiële Docker-website. Start na installatie Docker Desktop om te controleren of het goed draait.

2. Ga naar de projectroot en voer het volgende commando uit in je terminal om de Docker-image te bouwen:

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

3. Om de applicatie te draaien, heb je twee API-sleutels nodig:

• Gemini API-sleutel: Verkrijg deze via de Google AI Studio .
• LangSmith API-sleutel: Bezoek de officiële LangSmith-website, maak een gratis account aan en genereer je API-sleutel.

Bron: LangSmith

4. Start de applicatie met Docker Compose en vervang de placeholders door je eigen API-sleutels:

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

5. Toegang tot de applicatie:

• Frontend: http://localhost:8123/app/
• API-documentatie: http://localhost:8123/docs

5. De applicatie testen 

Ga in je webbrowser naar http://localhost:8123/app/. Typ een vraag in het invoerveld: “Som de top 5 nieuwsheadlines op.”

Zodra je je vraag verstuurt, begint de applicatie met het onderzoeksproces. Je ziet stap voor stap hoe de agent informatie verzamelt en analyseert om je vraag te beantwoorden.

De applicatie geeft een gedetailleerd antwoord, inclusief directe links naar de relevante publicaties. De kwaliteit en diepgang van de antwoorden overtreffen vaak die van andere deep-researchtools en bieden meer transparantie en context in de resultaten.

Voor nog meer inzicht ga je naar je LangSmith-dashboard. Hier kun je een uitgebreid logboek bekijken van elke stap die de agent heeft gezet om je antwoord te genereren. Deze gedetailleerde trace helpt je het redeneerproces van de agent te begrijpen en zorgt voor transparantie in hoe antwoorden tot stand komen.

Bron: LangSmith

Conclusie

In minder dan 10 minuten kun je de Docker-image bouwen en je eigen deep‑research AI-applicatie lokaal starten, met de gratis API's van Google Gemini en LangSmith. 

Deze gids heeft je door een rechttoe-rechtaan implementatie geleid en laten zien hoe het Gemini-model vooruitgaat in het herkennen van de juiste tools en het genereren van zeer gedetailleerde, nauwkeurige en actuele onderzoeksantwoorden.

Je hebt geleerd hoe je de applicatie opzet, zowel de backend als de frontend installeert en alles lokaal draait. Daarnaast hebben we een alternatieve deploymethode met Docker besproken, zodat je nog makkelijker aan de slag kunt en de kracht van deep‑research AI kunt ervaren.

Ben je op zoek naar je volgende project? Bekijk dan onze gids Gemini Diffusion: A Guide With 8 Practical Examples.