### Start LangGraph Server

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Command to start the LangGraph server, which provides API endpoints and integrates with the Studio UI.

```bash
pnpm agent
```

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

### Clone and Install Dependencies

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Instructions for cloning the repository and installing project dependencies using pnpm.

```bash
git clone https://github.com/langchain-ai/langgraphjs-gen-ui-examples.git

cd langgraphjs-gen-ui-examples

# pnpm is the default package manager in this project
pnpm install
```

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

### Environment Variable Setup

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Guidance on setting up environment variables, including required API keys for OpenAI and Google GenAI, and optional keys for LangSmith, Anthropic, and Financial Datasets.

```bash
cp .env.example .env

# Required
OPENAI_API_KEY=""
GOOGLE_API_KEY=""

# Optional, but recommended for best in class tracing and observability.
# LANGSMITH_PROJECT="default"
# LANGSMITH_API_KEY=""
# LANGSMITH_TRACING_V2=true

# Optional
# ANTHROPIC_API_KEY=""
# FINANCIAL_DATASETS_API_KEY=""
```

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

### Navigate to Project Directory

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-1.txt

Changes the current directory to the newly created 'todo-app' project folder. This is a standard step to ensure subsequent commands are executed within the project's root.

```bash
cd todo-app
```

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

### Create React App with TypeScript

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-1.txt

Initializes a new React project using Create React App with the TypeScript template. This command sets up the basic project structure and necessary dependencies for a TypeScript-based React application.

```bash
npx create-react-app todo-app --template typescript
```

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

### Create Project Directories

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-1.txt

Creates essential subdirectories within the 'src' folder: 'components', 'styles', and 'utils'. This organizational structure helps in maintaining a clean and modular codebase for the Todo application.

```bash
mkdir -p src/{components,styles,utils}
```

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

### Example Agent Prompts and Graph IDs

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Demonstrates various prompts and their corresponding graph IDs for interacting with different agents, including the 'agent', 'chat', and 'email_agent'. It highlights functionalities like tool usage, generative UI rendering, and human-in-the-loop interactions.

```javascript
// Example usage for 'agent' graph ID:
// "What can you do?"
// "Show me places to stay in <insert location here>"
// "Recommend some restaurants for me in <insert location here>"
// "What's the current price of <insert company/stock ticker here>"
// "I want to buy <insert quantity here> shares of <insert company/stock ticker here>."
// "Show me my portfolio"
// "Write a React TODO app for me"
// "Order me a pizza <include optional topping instructions> in <include location here>"

// Example usage for 'chat' graph ID:
// This is a plain chat agent, which simply passes the conversation to an LLM and generates a text response.

// Example usage for 'email_agent' graph ID:
// "Write me an email to <insert email here> about <insert email description here>"
```

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

### Stockbroker Agent Prompts

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Prompts to interact with the Stockbroker agent, triggering generative UI for stock prices, purchases, and portfolio views.

```APIDOC
What's the current price of <insert company/stock ticker here>
I want to buy <insert quantity here> shares of <insert company/stock ticker here>.
Show me my portfolio
```

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

### Order Pizza Agent Prompt

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Prompt to trigger the Order Pizza agent, which demonstrates tool call rendering in the UI for ordering pizza with specified toppings and location.

```APIDOC
Order me a pizza <include optional topping instructions> in <include location here>
```

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

### Open Code Agent Prompt

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Prompt to trigger the Open Code agent, which demonstrates generative UI for code writing by creating a React TODO app.

```APIDOC
Write a React TODO app for me
```

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

### Chat Agent Access

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

How to access the basic Chat agent, which performs a single LLM call without tools or generative UI.

```APIDOC
Access via the `chat` graph ID.
```

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

### Trip Planner Agent Prompts and Parameters

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Prompts and data extraction details for the Trip Planner agent, which generates UIs for travel planning. It extracts location, dates, and guest count.

```APIDOC
Show me places to stay in <insert location here>
Recommend some restaurants for me in <insert location here>

Extracted Information:
- location: Required. City, state, or other location.
- startDate: Optional. Defaults to 4 weeks from now.
- endDate: Optional. Defaults to 5 weeks from now.
- numberOfGuests: Optional. Defaults to 2.
```

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

### Email Agent Actions

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Defines the possible actions a user can take when interacting with the Email Agent. These actions control how the email is processed or modified.

```typescript
enum EmailAction {
  Accept = "accept",
  Edit = "edit",
  Respond = "respond",
  Ignore = "ignore",
  MarkAsResolved = "mark as resolved"
}
```

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

### Email Agent with Human-in-the-Loop

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Details the Email Agent's functionality, specifically how it triggers a Human-in-the-Loop (HITL) UI in the Agent Chat UI by throwing an interrupt with the HumanInterrupt schema.

```python
# Example of triggering HumanInterrupt in email_agent
from langgraph.prebuilt import HumanInterrupt

# ... inside the email_agent logic ...
raise HumanInterrupt(schema=HumanInterrupt.schema)
```

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

### Local Storage Todo Management (TypeScript)

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-6.txt

Saves and loads todo items to and from the browser's local storage. Uses JSON stringification for storage and parsing for retrieval. Assumes a 'Todo' type is defined elsewhere.

```typescript
const STORAGE_KEY = 'todos';

export const saveTodos = (todos: Todo[]) => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
};

export const loadTodos = (): Todo[] => {
  const stored = localStorage.getItem(STORAGE_KEY);
  return stored ? JSON.parse(stored) : [];
};
```

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

### Supervisor Agent Functionality

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Describes the Supervisor agent's role in routing conversations to various subgraphs like Stockbroker, Trip Planner, Open Code, and Order Pizza. It explains the routing mechanism using Gemini 2.0 Flash and a router node.

```APIDOC
Supervisor Agent:
  Description: The default agent that routes conversations to subgraphs based on context.
  Subgraphs:
    - Stockbroker
    - Trip Planner
    - Open Code
    - Order Pizza
  Routing Mechanism:
    - Input: Takes user input and chat history.
    - Router Node: Passes input and history to Gemini 2.0 Flash.
    - Tool Call: Forces Gemini to call a tool to determine the next subgraph.
    - General Input Node: Used when no clear subgraph is identified, containing a single LLM call to respond to the user.
```

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

### Todo Context and Provider

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-3.txt

Defines the TypeScript types for Todo items and actions, and creates a React Context to manage the todo state. The TodoProvider component wraps its children, providing the state and dispatch function through the context.

```tsx
import React, { createContext, useContext, useReducer } from 'react';

type Todo = { id: string; text: string; completed: boolean; };

type TodoState = { todos: Todo[]; };
type TodoAction = 
  | { type: 'ADD_TODO'; payload: string }
  | { type: 'TOGGLE_TODO'; payload: string }
  | { type: 'DELETE_TODO'; payload: string };

const TodoContext = createContext<{ state: TodoState; dispatch: React.Dispatch<TodoAction>; } | undefined>(undefined);

export const TodoProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, { todos: [] });
  return <TodoContext.Provider value={{ state, dispatch }}>{children}</TodoContext.Provider>;
};
```

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

### Email Agent Interrupt Schema

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/README.md

Represents the schema for interrupting the Email Agent graph. This schema is used to pass structured data back to the UI for user interaction.

```typescript
interface EmailInterrupt {
  type: "HumanInterrupt";
  data: {
    action: EmailAction;
    content?: string;
    fields?: Record<string, string>;
  };
}
```

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

### Todo Filters Component (React/TypeScript)

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-5.txt

A React component written in TypeScript for filtering and sorting todo items. It includes a dropdown for selecting filter states (all, active, completed) and buttons for sorting alphabetically.

```tsx
import React from 'react';

type FilterType = 'all' | 'active' | 'completed';

export const TodoFilters: React.FC<{
  currentFilter: FilterType;
  onFilterChange: (filter: FilterType) => void;
  onSortChange: (ascending: boolean) => void;
}> = ({ currentFilter, onFilterChange, onSortChange }) => (
  <div>
    <select value={currentFilter} onChange={(e) => onFilterChange(e.target.value as FilterType)}>
      <option value='all'>All</option>
      <option value='active'>Active</option>
      <option value='completed'>Completed</option>
    </select>
    <button onClick={() => onSortChange(true)}>Sort A-Z</button>
    <button onClick={() => onSortChange(false)}>Sort Z-A</button>
  </div>
);
```

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

### TodoItem Component (React/TSX)

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-2.txt

A React component written in TypeScriptX for displaying a single todo item. It includes a checkbox for completion status, the todo text, and a delete button. It handles toggling and deletion by calling provided callback functions.

```tsx
import React from 'react';
import styles from '../styles/TodoItem.module.css';

interface TodoItemProps {
  id: string;
  text: string;
  completed: boolean;
  onToggle: (id: string) => void;
  onDelete: (id: string) => void;
}

export const TodoItem: React.FC<TodoItemProps> = ({ id, text, completed, onToggle, onDelete }) => (
  <div className={styles.todoItem}>
    <input type='checkbox' checked={completed} onChange={() => onToggle(id)} />
    <span className={completed ? styles.completed : ''}>{text}</span>
    <button onClick={() => onDelete(id)}>Delete</button>
  </div>
);
```

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

### AddTodo Component (React/TypeScript)

Source: https://github.com/langchain-ai/langgraphjs-gen-ui-examples/blob/main/src/agent/open-code/nodes/plan-code/step-4.txt

A React component written in TypeScript for adding new todo items. It includes state management for the input text and error messages, and handles form submission with basic validation to ensure the todo text is not empty. It calls an `onAdd` prop function when a new todo is successfully added.

```tsx
import React, { useState } from 'react';
import styles from '../styles/AddTodo.module.css';

export const AddTodo: React.FC<{ onAdd: (text: string) => void }> = ({ onAdd }) => {
  const [text, setText] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text.trim()) {
      setError('Todo text cannot be empty');
      return;
    }
    onAdd(text.trim());
    setText('');
    setError('');
  };

  return (
    <form onSubmit={handleSubmit} className={styles.form}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder='Add a new todo'
      />
      {error && <div className={styles.error}>{error}</div>}
      <button type='submit'>Add Todo</button>
    </form>
  );
};
```

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