Gemini Fullstack LangGraph ile Başlarken

Gemini modelinden en iyi şekilde yararlanmak istiyorsanız, en iyi yaklaşım Google Gen AI API’yi Gemini Fullstack LangGraph sohbet uygulamasıyla birlikte kullanmaktır. Bu kurulum, React tabanlı bir frontend ve LangGraph tabanlı bir backend ile uçtan uca bir AI araştırma asistanı sunar.

Bu eğitimde uygulamayı sıfırdan nasıl kuracağınızı öğreneceksiniz: hem frontend’i hem de backend’i kuracak, tek bir komutla birlikte çalıştıracak ve her şeyin sorunsuz çalıştığını doğrulamak için uygulamayı test edeceksiniz. 

Ardından, uygulamayı Docker kullanarak dağıtma adımlarını birlikte inceleyeceğiz. Bu yöntem, uygulamaya erişmek ve Gemini modelinin son derece doğru ve ayrıntılı yanıt üretme yeteneklerini deneyimlemek için yeni başlayanlar açısından çok daha elverişlidir.

Gemini veya LangGraph tabanlı başka projeler arıyorsanız, Gemini 2.5 Pro API: Demo Projeyle Rehber ve LangGraph Eğitimi: LangGraph Nedir ve Nasıl Kullanılır? yazılarımıza mutlaka göz atın. 

1. Kurulum

Windows kullanıyorsanız, daha sorunsuz bir geliştirme deneyimi için Windows için Linux Alt Sistemi’ni (WSL) kullanmanız şiddetle tavsiye edilir. WSL, Windows üzerinde doğrudan tam bir Linux ortamı çalıştırmanıza olanak tanır ve Linux araçlarını kullanmayı kolaylaştırır.

1. PowerShell’i Yönetici olarak açın ve wsl --install komutunu çalıştırın. Bu işlem varsayılan olarak Ubuntu’yu yükler ve sistemin yeniden başlatılmasını gerektirebilir. 

2. Yeniden başlattıktan sonra, Başlat menüsünden Ubuntu’yu başlatın veya PowerShell’de wsl yazarak çalıştırın.

3. NVM (Node Version Manager) kullanarak Node.js 18’i kurun.

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

4. Kurulu Node.js sürümünüzü kontrol edin ve 18 veya üzeri olduğundan emin olun.

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

2. Frontend ve Backend’in Kurulması

1. Gemini Fullstack LangGraph Quickstart deposunu klonlayın ve proje dizinine gidin:

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

Dizin yapınız şimdi şu şekilde görünmelidir:

2. Google AI Studio’ya gidin ve bir Gemini API anahtarı oluşturun. 

Kaynak: API anahtarı alın | Google AI Studio

3. Backend dizinine gidin ve Gemini API anahtarını içeren .env dosyasını oluşturun. “YOUR_ACTUAL_API_KEY” yerine oluşturduğunuz anahtarı yazın.

4. Tüm Python paketlerini PIP komutuyla yükleyin. 

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

5. Proje kök dizinine dönün ve frontend dizinine gidin. Frontend bağımlılıklarını npm ile yükleyin.

cd ..
cd frontend                               
npm install  

3. Uygulamayı Çalıştırma 

Tüm bağımlılıkları yükledikten sonra, proje kökünden hem frontend hem de backend sunucularını geliştirme modunda başlatabilirsiniz.

1. Projenizin kök dizininden şu komutu çalıştırın:

make dev

Bu komut, geliştirme modunda frontend’i (Vite kullanarak) ve backend’i (LangGraph/FastAPI kullanarak) başlatır.

2. Frontend, web projeleri için hızlı ve verimli bir geliştirme deneyimi sunan modern bir derleme aracı olan Vite tarafından çalıştırılır. 

> 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. Backend sunucusu başlar ve aşağıdakine benzer bilgiler görüntüler:

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 Dokümantasyonu: http://127.0.0.1:2024/docsBu OpenAPI dokümantasyonunu, backend uç noktalarını doğrudan tarayıcınızdan test etmek için kullanabilirsiniz.
• LangGraph Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Bu gösterge paneli, LangGraph iş akışlarınızı görselleştirmenize ve test etmenize olanak tanır.

4. LangGraph iş akışını, LangGraph Studio UI’a giderek test edebilirsiniz. 

Kaynak: smith.langchain.com

Backend API şu adreste bulunur: http://127.0.0.1:2024. API dokümantasyonu ise: http://127.0.0.1:2024/docs. Her bir backend uç noktasını OpenAPI dokümantasyonu üzerinden test edebilirsiniz.

Sohbet uygulamasının arayüzüne erişmek için tarayıcınızda http://localhost:5173/app/ adresini açın. Sohbet uygulaması, ChatGPT’ye benzer. Sorunuzu yazın ve sihrini göstermeye başlayacaktır. 

Sohbet uygulamasının arka planda nasıl çalıştığı:

1. Kullanıcı girdisine göre, bir Gemini modeli kullanılarak başlangıç arama sorguları üretilir.
2. Her sorgu için, ilgili web sayfalarını bulmak üzere Google Arama API’siyle birlikte Gemini modeli kullanılır.
3. Aracı, yansıtma için Gemini modelini kullanarak bilgi boşluklarını belirlemek üzere arama sonuçlarını analiz eder.
4. Boşluklar bulunursa, takip sorguları üretir ve araştırma ile yansıtma adımlarını (belirli bir sınıra kadar) tekrarlar.
5. Yeterli bilgi toplandığında, aracı atıflarla tutarlı bir yanıt sentezler.

Bu uygulama hâlâ erken aşamalarında olduğundan, özellikle frontend arayüzünde bazı hatalar ve tutarsızlıklarla karşılaşabilirsiniz. Sık karşılaşılan sorunlardan biri Tutarsız frontend işleme davranışıdır.

Bunu çözmek için, frontend/src/App.tsx dosyasındaki 57. satırı aşağıdaki gibi güncelleyin:

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

4. Uygulamayı Docker ile Dağıtma

Uygulamanızı Docker ile dağıtmak basit ve etkilidir. Docker, uygulamanızı ve bağımlılıklarını tek bir konteynerde paketlemenize olanak tanır.

1. İşletim sisteminiz için (Windows, macOS veya Linux) Docker Desktop’ı indirin ve kurun. Yükleyiciyi ve ayrıntılı talimatları resmi Docker web sitesinde bulabilirsiniz. Kurulumdan sonra, Docker Desktop’ı başlatın ve düzgün çalıştığını doğrulayın.

2. Proje kök dizinine gidin ve Docker imajını oluşturmak için terminalinizde aşağıdaki komutu çalıştırın:

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

3. Uygulamayı çalıştırmak için iki API anahtarına ihtiyacınız olacak:

• Gemini API Anahtarı: Bunu Google AI Studio’dan edinin.
• LangSmith API Anahtarı: Resmi LangSmith web sitesini ziyaret edin, ücretsiz bir hesaba kaydolun ve API anahtarınızı oluşturun.

Kaynak: LangSmith

4. Yer tutucuları kendi gerçek API anahtarlarınızla değiştirerek Docker Compose ile uygulamayı başlatın:

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

5. Uygulamaya erişin:

• Frontend: http://localhost:8123/app/
• API Dokümantasyonu: http://localhost:8123/docs

5. Uygulamayı Test Etme 

Web tarayıcınızda http://localhost:8123/app/ adresine gidin. Girdi kutusuna şu soruyu yazın: “En iyi 5 haber başlığını listeleyin.”

Sorunuzu gönderdikten sonra, uygulama araştırma sürecine başlayacaktır. Ajanın, sorunuza yanıt vermek için bilgileri nasıl topladığını ve analiz ettiğini adım adım göreceksiniz.

Uygulama, ilgili yayınlara doğrudan bağlantılar da dahil olmak üzere ayrıntılı bir yanıt sağlayacaktır. Yanıtların kalitesi ve derinliği, sonuçlarda daha fazla şeffaflık ve bağlam sunarak çoğu derin araştırma aracını geride bırakır.

Daha da derin bir içgörü için LangSmith Pano’nuzu ziyaret edin. Burada, ajanın yanıtınızı üretmek için attığı her adımın kapsamlı bir kaydını inceleyebilirsiniz. Bu ayrıntılı izlek, ajanın muhakeme sürecini anlamanıza yardımcı olur ve yanıtların nasıl oluşturulduğuna dair şeffaflık sağlar.

Kaynak: LangSmith

Sonuç

10 dakikadan kısa bir sürede Docker imajını oluşturup, Google Gemini ve LangSmith’in sunduğu ücretsiz API’ları kullanarak kendi yerel derin araştırma AI uygulamanızı başlatabilirsiniz. 

Bu rehber, Gemini modelinin doğru araçları belirleme ve son derece ayrıntılı, doğru ve güncel araştırma yanıtları üretme becerisindeki ilerleyişini gösteren, doğrudan bir uygulamayı adım adım ele aldı.

Uygulamayı nasıl kuracağınızı, hem backend hem de frontend’i nasıl yükleyip her şeyi yerelde nasıl çalıştıracağınızı öğrendiniz. Ayrıca, Docker kullanarak alternatif bir dağıtım yöntemini de ele aldık; böylece başlamanız ve derin araştırma AI gücünü deneyimlemeniz daha da kolaylaştı.

Bir sonraki projenizi arıyorsanız, Gemini Diffusion: 8 Pratik Örnekle Rehber başlıklı yazımıza göz atın.