Bắt đầu với Gemini Fullstack LangGraph

Nếu bạn muốn khai thác tối đa mô hình Gemini, cách tốt nhất là dùng Google Gen AI API cùng với ứng dụng chat Gemini Fullstack LangGraph. Thiết lập này mang đến một trợ lý nghiên cứu AI full-stack, gồm frontend React và backend LangGraph.

Trong hướng dẫn này, bạn sẽ học cách thiết lập ứng dụng từ đầu: cài đặt cả frontend và backend, chạy chúng cùng nhau bằng một lệnh duy nhất, và kiểm thử ứng dụng để đảm bảo mọi thứ vận hành trơn tru. 

Sau đó, chúng ta sẽ triển khai ứng dụng bằng Docker, một cách tiếp cận thân thiện với người mới để truy cập ứng dụng và trải nghiệm khả năng tạo phản hồi chi tiết, chính xác cao của mô hình Gemini.

Nếu bạn đang tìm các dự án khác dựa trên Gemini hoặc LangGraph, hãy đọc các hướng dẫn của chúng tôi Gemini 2.5 Pro API: Hướng Dẫn Kèm Dự Án Demo và Hướng Dẫn LangGraph: LangGraph là gì và cách sử dụng?. 

1. Thiết lập

Nếu bạn dùng Windows, nên sử dụng Windows Subsystem for Linux (WSL) để có trải nghiệm phát triển mượt mà hơn. WSL cho phép bạn chạy môi trường Linux đầy đủ ngay trên Windows, dễ dàng dùng các công cụ Linux.

1. Mở PowerShell với quyền Quản trị viên và chạy lệnh wsl --install. Lệnh này sẽ cài Ubuntu theo mặc định và có thể yêu cầu khởi động lại hệ thống. 

2. Sau khi khởi động lại, mở Ubuntu từ Start menu hoặc gõ wsl trong PowerShell.

3. Cài Node.js 18 bằng 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. Kiểm tra phiên bản Node.js đã cài và đảm bảo là 18 trở lên.

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

2. Cài đặt Frontend và Backend

1. Clone repository Gemini Fullstack LangGraph Quickstart và chuyển vào thư mục dự án:

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

Cấu trúc thư mục của bạn giờ sẽ như sau:

2. Truy cập Google AI Studio và tạo một khóa API Gemini. 

Nguồn: Get API key | Google AI Studio

3. Chuyển đến thư mục backend và tạo tệp .env với khóa API Gemini. Thay “YOUR_ACTUAL_API_KEY” bằng khóa bạn đã tạo.

4. Cài tất cả gói Python bằng lệnh PIP. 

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

5. Quay lại thư mục gốc dự án và chuyển sang thư mục frontend. Cài đặt phụ thuộc cho frontend bằng npm.

cd ..
cd frontend                               
npm install  

3. Chạy ứng dụng 

Sau khi cài đặt mọi phụ thuộc, bạn có thể khởi chạy cả máy chủ frontend và backend ở chế độ phát triển từ thư mục gốc dự án.

1. Từ thư mục gốc dự án, chạy:

make dev

Lệnh này sẽ khởi chạy cả frontend (dùng Vite) và backend (dùng LangGraph/FastAPI) ở chế độ phát triển.

2. Frontend sử dụng Vite, một công cụ build hiện đại mang lại trải nghiệm phát triển nhanh và hiệu quả cho các dự án 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. Máy chủ backend sẽ khởi động và hiển thị thông tin như sau:

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
• Tài liệu API: http://127.0.0.1:2024/docsBạn có thể dùng tài liệu OpenAPI này để kiểm thử các endpoint backend trực tiếp từ trình duyệt.
• Giao diện LangGraph Studio: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024Bảng điều khiển này cho phép bạn trực quan hóa và kiểm thử các workflow LangGraph.

4. Bạn có thể kiểm thử workflow LangGraph bằng cách mở LangGraph Studio UI. 

Nguồn: smith.langchain.com

Backend API nằm tại: http://127.0.0.1:2024. Tài liệu API tại: http://127.0.0.1:2024/docs. Bạn có thể kiểm thử từng endpoint backend bằng tài liệu OpenAPI.

Mở http://localhost:5173/app/ trong trình duyệt để truy cập giao diện ứng dụng chat. Ứng dụng chat tương tự ChatGPT. Chỉ cần nhập câu hỏi là nó sẽ bắt đầu hoạt động. 

Cách ứng dụng chat hoạt động ở backend:

1. Dựa trên đầu vào của người dùng, nó tạo một tập truy vấn tìm kiếm ban đầu bằng mô hình Gemini.
2. Với mỗi truy vấn, nó dùng mô hình Gemini cùng Google Search API để tìm các trang web liên quan.
3. Agent phân tích kết quả tìm kiếm để xác định khoảng trống kiến thức, sử dụng mô hình Gemini để phản tư.
4. Nếu phát hiện khoảng trống, nó tạo truy vấn tiếp theo và lặp lại bước nghiên cứu và phản tư (tối đa theo giới hạn đặt trước).
5. Khi đã thu thập đủ thông tin, agent tổng hợp một câu trả lời mạch lạc kèm trích dẫn.

Vì ứng dụng này vẫn đang ở giai đoạn đầu, bạn có thể gặp một số lỗi và không nhất quán, đặc biệt ở giao diện frontend. Một vấn đề thường gặp là Frontend hiển thị không nhất quán.

Để khắc phục, hãy cập nhật dòng 57 trong frontend/src/App.tsx như sau:

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

4. Triển khai ứng dụng bằng Docker

Triển khai ứng dụng với Docker rất đơn giản và hiệu quả. Docker cho phép bạn đóng gói ứng dụng và các phụ thuộc vào một container duy nhất.

1. Tải và cài đặt Docker Desktop cho hệ điều hành của bạn (Windows, macOS hoặc Linux). Bạn có thể tìm bộ cài và hướng dẫn chi tiết trên trang Docker chính thức. Sau khi cài, mở Docker Desktop để đảm bảo nó chạy đúng.

2. Chuyển đến thư mục gốc dự án và chạy lệnh sau trong terminal để build Docker image:

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

3. Để chạy ứng dụng, bạn sẽ cần hai khóa API:

• Khóa API Gemini: Lấy từ Google AI Studio .
• Khóa API LangSmith: Truy cập trang LangSmith chính thức, đăng ký tài khoản miễn phí và tạo khóa API.

Nguồn: LangSmith

4. Khởi động ứng dụng bằng Docker Compose, thay các placeholder bằng khóa API thực của bạn:

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

5. Truy cập ứng dụng:

• Frontend: http://localhost:8123/app/
• Tài liệu API: http://localhost:8123/docs

5. Kiểm thử ứng dụng 

Truy cập http://localhost:8123/app/ trong trình duyệt. Nhập câu hỏi vào ô “List the top 5 news headlines.”

Sau khi gửi câu hỏi, ứng dụng sẽ bắt đầu quy trình nghiên cứu. Bạn sẽ thấy từng bước agent thu thập và phân tích thông tin để trả lời truy vấn của bạn.

Ứng dụng sẽ cung cấp câu trả lời chi tiết, bao gồm các liên kết trực tiếp tới các ấn phẩm liên quan. Chất lượng và chiều sâu câu trả lời thường vượt trội so với các công cụ nghiên cứu chuyên sâu khác, mang lại nhiều minh bạch và ngữ cảnh hơn trong kết quả.

Để hiểu sâu hơn nữa, hãy truy cập Bảng điều khiển LangSmith của bạn. Tại đây, bạn có thể xem nhật ký chi tiết mọi bước agent đã thực hiện để tạo câu trả lời. Dấu vết chi tiết này giúp bạn hiểu quy trình suy luận của agent và đảm bảo tính minh bạch trong cách câu trả lời được hình thành.

Nguồn: LangSmith

Kết luận

Chỉ trong chưa đầy 10 phút, bạn có thể build Docker image và khởi chạy ứng dụng AI nghiên cứu chuyên sâu của riêng mình trên máy local, sử dụng các API miễn phí do Google Gemini và LangSmith cung cấp. 

Hướng dẫn này đã đưa bạn qua một triển khai đơn giản, minh họa cách mô hình Gemini đang tiến bộ trong việc xác định đúng công cụ, tạo các phản hồi nghiên cứu rất chi tiết, chính xác và cập nhật.

Bạn đã học cách thiết lập ứng dụng, cài đặt cả backend và frontend, và chạy mọi thứ trên máy cục bộ. Ngoài ra, chúng tôi đã trình bày phương pháp triển khai thay thế bằng Docker, giúp bạn bắt đầu dễ dàng hơn và trải nghiệm sức mạnh của AI nghiên cứu chuyên sâu.

Nếu bạn đang tìm dự án tiếp theo, hãy xem hướng dẫn của chúng tôi về Gemini Diffusion: Hướng Dẫn Với 8 Ví Dụ Thực Tiễn.