Gemini Fullstack Langgraph Quickstart

Gemini Fullstack LangGraph Quickstart

This project demonstrates a fullstack application using a React frontend and a LangGraph-powered backend agent. The agent is designed to perform comprehensive research on a user's query by dynamically generating search terms, querying the web using Google Search, reflecting on the results to identify knowledge gaps, and iteratively refining its search until it can provide a well-supported answer with citations. This application serves as an example of building research-augmented conversational AI using LangGraph and Google's Gemini models.

Features

• 💬 Fullstack application with a React frontend and LangGraph backend.
• 🧠 Powered by a LangGraph agent for advanced research and conversational AI.
• 🔍 Dynamic search query generation using Google Gemini models.
• 🌐 Integrated web research via Google Search API.
• 🤔 Reflective reasoning to identify knowledge gaps and refine searches.
• 📄 Generates answers with citations from gathered sources.
• 🔄 Hot-reloading for both frontend and backend during development.

Project Structure

The project is divided into two main directories:

• frontend/: Contains the React application built with Vite.
• backend/: Contains the LangGraph/FastAPI application, including the research agent logic.

Getting Started: Development and Local Testing

Follow these steps to get the application running locally for development and testing.

**1. Prerequisites:**

• Node.js and npm (or yarn/pnpm)
• Python 3.11+
• GEMINI_API_KEY: The backend agent requires a Google Gemini API key.
  1. Navigate to the backend/ directory.
  2. Create a file named .env by copying the backend/.env.example file.
  3. Open the .env file and add your Gemini API key: GEMINI_API_KEY="YOUR_ACTUAL_API_KEY"

**2. Install Dependencies:**

**Backend:**

cd backend
pip install .

**Frontend:**

cd frontend
npm install

**3. Run Development Servers:**

**Backend & Frontend:**

make dev

This will run the backend and frontend development servers. Open your browser and navigate to the frontend development server URL (e.g., `http://localhost:5173/app`).

_Alternatively, you can run the backend and frontend development servers separately. For the backend, open a terminal in the `backend/` directory and run `langgraph dev`. The backend API will be available at `http://127.0.0.1:2024`. It will also open a browser window to the LangGraph UI. For the frontend, open a terminal in the `frontend/` directory and run `npm run dev`. The frontend will be available at `http://localhost:5173`._

How the Backend Agent Works (High-Level)

The core of the backend is a LangGraph agent defined in `backend/src/agent/graph.py`. It follows these steps:

1. **Generate Initial Q