### Install Backend Dependencies

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Navigate to the backend directory and install Python dependencies using pip.

```bash
cd backend
pip install .
```

--------------------------------

### Install Frontend Dependencies

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Navigate to the frontend directory and install Node.js dependencies using npm.

```bash
cd frontend
npm install
```

--------------------------------

### Run Backend Development Server Separately

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Start the LangGraph backend development server from the backend directory. The API will be available at http://127.0.0.1:2024.

```bash
langgraph dev
```

--------------------------------

### Run Frontend Development Server Separately

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Start the Vite frontend development server from the frontend directory. The application will be available at http://localhost:5173.

```bash
npm run dev
```

--------------------------------

### Run Production Server with Docker Compose

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Starts the production server using docker-compose. Requires Gemini and LangSmith API keys to be set as environment variables. The application will be accessible at http://localhost:8123.

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

--------------------------------

### CLI Research Example

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Execute the LangGraph agent from the command line for one-off research questions. This script runs the agent and prints the final answer.

```bash
cd backend
python examples/cli_research.py "What are the latest trends in renewable energy?"
```

--------------------------------

### Run Development Servers

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Execute the make dev command to simultaneously run both the backend and frontend development servers.

```bash
make dev
```

--------------------------------

### Build Docker Image for Production

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/README.md

Builds a Docker image tagged 'gemini-fullstack-langgraph' from the Dockerfile in the project root. This image includes the optimized frontend build and the backend server for production deployment.

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

--------------------------------

### Display Markdown Output

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/backend/test-agent.ipynb

Use this to render the content of the last message in Markdown format. Ensure the state object is correctly populated.

```python
from IPython.display import Markdown

Markdown(state["messages"][-1].content)
```

--------------------------------

### Invoke LangGraph Agent

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/backend/test-agent.ipynb

Invoke the graph agent with a user message and specific parameters for research loops and initial search query count. This sets up the agent's execution context.

```python
from agent import graph

state = graph.invoke({"messages": [{"role": "user", "content": "Who won the euro 2024"}], "max_research_loops": 3, "initial_search_query_count": 3})
```

--------------------------------

### Display Markdown Output After Invocation

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/backend/test-agent.ipynb

Render the content of the last message after invoking the graph. This is typically used to display the AI's response.

```python
Markdown(state["messages"][-1].content)
```

--------------------------------

### Invoke LangGraph with User Message

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/backend/test-agent.ipynb

Invoke the graph with a new user message appended to the existing message history. The state object will be updated with the response.

```python
state = graph.invoke({"messages": state["messages"] + [{"role": "user", "content": "How has the most titles? List the top 5"}]})
```

--------------------------------

### Display Agent State

Source: https://github.com/google-gemini/gemini-fullstack-langgraph-quickstart/blob/main/backend/test-agent.ipynb

Display the final state of the invoked agent. This state typically includes the conversation history and any other relevant information generated during the agent's execution.

```python
state
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.