Erste Schritte mit Gemini Fullstack LangGraph

Wenn du das Beste aus dem Gemini-Modell herausholen willst, ist es am besten, die Google Gen AI API zusammen mit der Gemini Fullstack LangGraph Chat-Anwendung zu verwenden. Dieses Setup bietet einen vollwertigen KI-Forschungsassistenten mit einem React-Frontend und einem LangGraph-Backend.

In diesem Lernprogramm lernst du, wie du die Anwendung von Grund auf einrichtest: Du installierst sowohl das Frontend als auch das Backend, führst sie mit einem einzigen Befehl aus und testest die Anwendung, um sicherzustellen, dass alles reibungslos funktioniert. 

Danach werden wir die Anwendung mit Docker implementieren. Das ist ein sehr viel einsteigerfreundlicherer Weg, um auf die Anwendung zuzugreifen und die hochpräzisen, detaillierten Antwortmöglichkeiten des Gemini-Modells zu erleben.

Wenn du auf der Suche nach anderen Gemini- oder LangGraph-basierten Projekten bist, solltest du unsere Tutorials lesen Gemini 2.5 Pro API: Ein Leitfaden mit Demo-Projekt und LangGraph Tutorial: Was ist LangGraph und wie benutzt man es?. 

1. Einrichten

Wenn du Windows verwendest, empfehlen wir dir, das Windows Subsystem für Linux (WSL) zu verwenden, um eine reibungslose Entwicklung zu ermöglichen. WSL ermöglicht es dir, eine vollständige Linux-Umgebung direkt unter Windows auszuführen, sodass du Linux-Tools ganz einfach nutzen kannst.

1. Öffne die PowerShell als Administrator und führe den Befehl wsl --install. Dadurch wird Ubuntu standardmäßig installiert und erfordert möglicherweise einen Neustart des Systems.

2. Starte Ubuntu nach dem Neustart über das Startmenü oder indem du wsl in der PowerShell eingibst.

3. Installiere Node.js 18 mit 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. Überprüfe deine installierte Node.js-Version und stelle sicher, dass sie 18 oder höher ist.

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

2. Installation von Frontend und Backend

1. Klone das Gemini Fullstack LangGraph Quickstart Repository und navigiere in das Projektverzeichnis:

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

Deine Verzeichnisstruktur sollte jetzt wie folgt aussehen:

2. Gehe zum Google AI Studio und generiere einen Gemini-API-Schlüssel. 

Quelle: API-Schlüssel erhalten | Google AI Studio

3. Navigiere zum Backend-Verzeichnis und erstelle die Datei .env mit dem Gemini-API-Schlüssel. Ersetze "YOUR_ACTUAL_API_KEY" durch den Schlüssel, den du erzeugt hast.

4. Installiere alle Python-Pakete mit dem Befehl PIP. 

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

5. Kehre zum Stammverzeichnis des Projekts zurück und navigiere zum Frontend-Verzeichnis. Installiere die Frontend-Abhängigkeiten mit npm.

cd ..
cd frontend                               
npm install  

3. Ausführen der Anwendung 

Sobald du alle Abhängigkeiten installiert hast, kannst du sowohl den Frontend- als auch den Backend-Server im Entwicklungsmodus vom Projektstamm aus starten.

1. Führe im Stammverzeichnis deines Projekts aus:

make dev

Dieser Befehl startet sowohl das Frontend (mit Vite) als auch das Backend (mit LangGraph/FastAPI) im Entwicklungsmodus.

2. Das Frontend wird von Vite unterstützt, einem modernen Build-Tool, das eine schnelle und effiziente Entwicklung von Webprojekten ermöglicht. 

> 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. Der Backend-Server wird gestartet und zeigt Informationen wie:

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-Dokumentation: http://127.0.0.1:2024/docsYoukann diese OpenAPI-Dokumentation nutzen, um Backend-Endpunkte direkt von deinem Browser aus zu testen.
• LangGraph Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024ThisDashboard ermöglicht es dir, deine LangGraph-Workflows zu visualisieren und zu testen.

4. Du kannst den LangGraph-Workflow testen, indem du die LangGraph Studio-Benutzeroberfläche aufrufst. 

Quelle: smith.langchain.com

Die Backend-API findest du unter: http://127.0.0.1:2024. Die API-Dokumentation findest du unter: http://127.0.0.1:2024/docs. Du kannst jeden Backend-Endpunkt mithilfe der OpenAPI-Dokumentation testen.

Öffne http://localhost:5173/app/ in deinem Browser, um auf die Oberfläche der Chat-Anwendung zuzugreifen. Die Chat-Anwendung ist ähnlich wie das ChatGPT. Schreibe einfach die Frage auf und es wird seine Arbeit tun. 

Wie die Chat-Anwendung im Backend funktioniert:

1. Ausgehend von den Eingaben des Nutzers werden mithilfe eines Gemini-Modells eine Reihe von Suchanfragen erstellt.
2. Für jede Anfrage verwendet es das Gemini-Modell mit der Google Search API, um relevante Webseiten zu finden.
3. Der Agent analysiert die Suchergebnisse, um Wissenslücken zu identifizieren, indem er das Gemini-Modell zur Reflexion nutzt.
4. Wenn Lücken gefunden werden, generiert es Folgeabfragen und wiederholt die Recherche- und Reflexionsschritte (bis zu einer bestimmten Grenze).
5. Sobald genügend Informationen gesammelt wurden, stellt der Agent eine kohärente Antwort mit Zitaten zusammen.

Da sich die Anwendung noch in der Anfangsphase befindet, kann es sein, dass du auf einige Fehler und Unstimmigkeiten stößt, vor allem in der Benutzeroberfläche des Frontends. Ein häufiges Problem ist die inkonsistente Darstellung des Frontends.

Um dies zu beheben, aktualisiere Zeile 57 in frontend/src/App.tsx wie folgt:

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

4. Die Anwendung mit Docker bereitstellen

Das Deployment deiner Anwendung mit Docker ist einfach und effizient. Mit Docker kannst du deine Anwendung und ihre Abhängigkeiten in einen einzigen Container packen.

1. Lade Docker Desktop für dein Betriebssystem (Windows, macOS oder Linux) herunter und installiere es. Das Installationsprogramm und eine ausführliche Anleitung findest du auf der offiziellen Docker-Website. Wenn du Docker Desktop installiert hast, starte es, um sicherzustellen, dass es richtig läuft.

2. Navigiere zum Stammverzeichnis des Projekts und führe den folgenden Befehl in deinem Terminal aus, um das Docker-Image zu erstellen:

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

3. Um die Anwendung auszuführen, brauchst du zwei API-Schlüssel:

• Gemini API Key: Diese erhältst du über das Google AI Studio.
• LangSmith API Key: Besuche die offizielle LangSmith-Website, melde dich für ein kostenloses Konto an und generiere deinen API-Schlüssel.

Quelle: LangSmith

4. Starte die Anwendung mit Docker Compose und ersetze die Platzhalter durch deine tatsächlichen API-Schlüssel:

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

5. Greife auf die Anwendung zu:

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

5. Testen der Anwendung 

Navigiere in deinem Webbrowser zu http://localhost:8123/app/. Gib eine Frage in das Eingabefeld "Nenne die 5 wichtigsten Schlagzeilen" ein.

Sobald du deine Frage einreichst, beginnt die Anwendung mit ihrer Recherche. Du siehst eine schrittweise Aufschlüsselung, wie der Agent Informationen sammelt und analysiert, um deine Anfrage zu beantworten.

Der Antrag enthält eine ausführliche Antwort, einschließlich direkter Links zu den relevanten Veröffentlichungen. Die Qualität und Tiefe der Antworten übertrifft oft die anderer Deep Research Tools und bietet mehr Transparenz und Kontext in den Ergebnissen.

Einen noch tieferen Einblick erhältst du in deinem LangSmith Dashboard. Hier kannst du ein umfassendes Protokoll über jeden Schritt einsehen, den der Agent unternommen hat, um deine Antwort zu erstellen. Diese detaillierte Nachverfolgung hilft dir, den Denkprozess des Agenten zu verstehen und sorgt für Transparenz bei der Erstellung der Antworten.

Quelle: LangSmith

Fazit

In weniger als 10 Minuten kannst du das Docker-Image erstellen und deine eigene KI-Anwendung für die Tiefenforschung lokal starten, indem du die kostenlosen APIs von Google Gemini und LangSmith nutzt. 

Dieser Leitfaden führt dich durch eine unkomplizierte Umsetzung und zeigt, wie das Gemini-Modell die richtigen Instrumente identifiziert und sehr detaillierte, genaue und aktuelle Forschungsantworten erzeugt.

Du hast gelernt, wie du die Anwendung einrichtest, sowohl das Backend als auch das Frontend installierst und alles lokal ausführst. Außerdem haben wir uns mit einer alternativen Bereitstellungsmethode mit Docker beschäftigt, die den Einstieg in die KI-Forschung noch einfacher macht.

Wenn du auf der Suche nach deinem nächsten Projekt bist, sieh dir unseren Leitfaden auf Gemini Diffusion an: Ein Leitfaden mit 8 praktischen Beispielen.