Memulai dengan Gemini Fullstack LangGraph

Jika Anda ingin memaksimalkan model Gemini, pendekatan terbaik adalah menggunakan Google Gen AI API bersama aplikasi chat Gemini Fullstack LangGraph. Setup ini menyediakan asisten riset AI full-stack, dengan frontend React dan backend LangGraph.

Dalam tutorial ini, Anda akan mempelajari cara menyiapkan aplikasi dari nol: Anda akan memasang frontend dan backend, menjalankannya bersama dengan satu perintah, serta menguji aplikasi untuk memastikan semuanya berjalan lancar. 

Setelah itu, kita akan membahas proses deployment aplikasi menggunakan Docker, yang jauh lebih ramah pemula untuk mengakses aplikasi dan merasakan kemampuan generasi respons model Gemini yang sangat akurat dan mendetail.

Jika Anda mencari proyek lain berbasis Gemini atau LangGraph, pastikan membaca tutorial kami Gemini 2.5 Pro API: Panduan dengan Proyek Demo dan Tutorial LangGraph: Apa itu LangGraph dan Cara Menggunakannya?. 

1. Penyiapan

Jika Anda menggunakan Windows, sangat disarankan menggunakan Windows Subsystem for Linux (WSL) untuk pengalaman pengembangan yang lebih mulus. WSL memungkinkan Anda menjalankan lingkungan Linux penuh langsung di Windows, sehingga mudah menggunakan tool Linux.

1. Buka PowerShell sebagai Administrator dan jalankan perintah wsl --install. Ini akan memasang Ubuntu secara default dan mungkin memerlukan restart sistem. 

2. Setelah restart, jalankan Ubuntu dari Start menu atau dengan mengetik wsl di PowerShell.

3. Pasang Node.js 18 menggunakan 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. Periksa versi Node.js yang terpasang dan pastikan 18 atau lebih tinggi.

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

2. Memasang Frontend dan Backend

1. Clone repositori Gemini Fullstack LangGraph Quickstart dan masuk ke direktori proyek:

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

Struktur direktori Anda sekarang seharusnya terlihat seperti ini:

2. Buka Google AI Studio dan buat kunci API Gemini. 

Sumber: Dapatkan kunci API | Google AI Studio

3. Masuk ke direktori backend dan buat file .env berisi kunci API Gemini. Ganti “YOUR_ACTUAL_API_KEY” dengan kunci yang Anda buat.

4. Pasang semua paket Python menggunakan perintah PIP. 

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

5. Kembali ke root proyek lalu masuk ke direktori frontend. Pasang dependensi frontend menggunakan npm.

cd ..
cd frontend                               
npm install  

3. Menjalankan Aplikasi 

Setelah semua dependensi terpasang, Anda dapat menjalankan server frontend dan backend dalam mode pengembangan dari root proyek.

1. Dari direktori root proyek Anda, jalankan:

make dev

Perintah ini akan meluncurkan frontend (menggunakan Vite) dan backend (menggunakan LangGraph/FastAPI) dalam mode pengembangan.

2. Frontend didukung oleh Vite, tool build modern yang memberikan pengalaman pengembangan cepat dan efisien untuk proyek 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. Server backend akan mulai dan menampilkan informasi seperti:

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
• Dokumentasi API: http://127.0.0.1:2024/docsAnda dapat menggunakan dokumentasi OpenAPI ini untuk menguji endpoint backend langsung dari browser.
• LangGraph Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Dasbor ini memungkinkan Anda memvisualisasikan dan menguji workflow LangGraph Anda.

4. Anda dapat menguji workflow LangGraph dengan membuka LangGraph Studio UI. 

Sumber: smith.langchain.com

Backend API berada di: http://127.0.0.1:2024. Dokumentasi API dapat ditemukan di: http://127.0.0.1:2024/docs. Anda dapat menguji setiap endpoint backend menggunakan dokumentasi OpenAPI.

Buka http://localhost:5173/app/ di browser Anda untuk mengakses antarmuka aplikasi chat. Aplikasi chat ini mirip dengan ChatGPT. Cukup tulis pertanyaan dan biarkan ia bekerja. 

Cara kerja aplikasi chat di backend:

1. Berdasarkan masukan pengguna, aplikasi menghasilkan serangkaian kueri penelusuran awal menggunakan model Gemini.
2. Untuk setiap kueri, aplikasi menggunakan model Gemini dengan Google Search API untuk menemukan halaman web yang relevan.
3. Agen menganalisis hasil penelusuran untuk mengidentifikasi celah pengetahuan, menggunakan model Gemini untuk refleksi.
4. Jika ditemukan celah, agen membuat kueri lanjutan dan mengulangi langkah riset dan refleksi (hingga batas yang ditetapkan).
5. Setelah informasi dirasa cukup, agen menyintesis jawaban yang koheren dengan sitasi.

Karena aplikasi ini masih pada tahap awal, Anda mungkin menemukan beberapa bug dan inkonsistensi, khususnya di antarmuka frontend. Salah satu masalah yang sering muncul adalah rendering frontend yang tidak konsisten.

Untuk mengatasinya, perbarui baris 57 di frontend/src/App.tsx menjadi sebagai berikut:

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

4. Mendeploy Aplikasi Menggunakan Docker

Mendeploy aplikasi Anda dengan Docker itu mudah dan efisien. Docker memungkinkan Anda mengemas aplikasi dan dependensinya ke dalam satu container.

1. Unduh dan pasang Docker Desktop untuk sistem operasi Anda (Windows, macOS, atau Linux). Anda dapat menemukan installer dan instruksi terperinci di situs resmi Docker. Setelah terpasang, jalankan Docker Desktop untuk memastikan berjalan dengan baik.

2. Masuk ke direktori root proyek dan jalankan perintah berikut di terminal untuk membangun image Docker:

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

3. Untuk menjalankan aplikasi, Anda memerlukan dua kunci API:

• Kunci API Gemini: Dapatkan dari Google AI Studio .
• Kunci API LangSmith: Kunjungi situs resmi LangSmith, daftar akun gratis, dan buat kunci API Anda.

Sumber: LangSmith

4. Jalankan aplikasi menggunakan Docker Compose, ganti placeholder dengan kunci API Anda yang sebenarnya:

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

5. Akses aplikasi:

• Frontend: http://localhost:8123/app/
• Dokumentasi API: http://localhost:8123/docs

5. Menguji Aplikasi 

Buka http://localhost:8123/app/ di browser web Anda. Ketik pertanyaan ke kotak input “Daftarkan 5 headline berita teratas.”

Setelah Anda mengirim pertanyaan, aplikasi akan memulai proses risetnya. Anda akan melihat rincian langkah demi langkah bagaimana agen mengumpulkan dan menganalisis informasi untuk menjawab pertanyaan Anda.

Aplikasi akan memberikan respons terperinci, termasuk tautan langsung ke publikasi yang relevan. Kualitas dan kedalaman jawabannya seringkali melampaui alat riset mendalam lainnya, menawarkan transparansi dan konteks yang lebih baik dalam hasil.

Untuk wawasan yang lebih mendalam, kunjungi Dashboard LangSmith Anda. Di sini, Anda dapat meninjau log komprehensif setiap langkah yang diambil agen untuk menghasilkan respons. Jejak detail ini membantu Anda memahami proses penalaran agen dan memastikan transparansi dalam cara jawaban dibangun.

Sumber: LangSmith

Kesimpulan

Dalam waktu kurang dari 10 menit, Anda dapat membangun image Docker dan meluncurkan aplikasi AI riset mendalam Anda sendiri secara lokal, menggunakan API gratis yang disediakan oleh Google Gemini dan LangSmith. 

Panduan ini telah memandu Anda melalui implementasi yang sederhana, menunjukkan bagaimana model Gemini semakin maju dalam mengidentifikasi tool yang tepat, serta menghasilkan respons riset yang sangat mendetail, akurat, dan terbaru.

Anda telah mempelajari cara menyiapkan aplikasi, memasang backend dan frontend, serta menjalankan semuanya secara lokal. Selain itu, kami membahas metode deployment alternatif menggunakan Docker, sehingga makin mudah untuk memulai dan merasakan kekuatan AI riset mendalam.

Jika Anda mencari proyek berikutnya, lihat panduan kami tentang Gemini Diffusion: Panduan dengan 8 Contoh Praktis.