================
CODE SNIPPETS
================
TITLE: Start LangGraph Server
DESCRIPTION: Command to start the LangGraph server, which provides API endpoints and integrates with the Studio UI.

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

LANGUAGE: bash
CODE:
```
pnpm agent
```

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

TITLE: Clone and Install Dependencies
DESCRIPTION: Instructions for cloning the repository and installing project dependencies using pnpm.

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

LANGUAGE: bash
CODE:
```
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
```

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

TITLE: Environment Variable Setup
DESCRIPTION: Guidance on setting up environment variables, including required API keys for OpenAI and Google GenAI, and optional keys for LangSmith, Anthropic, and Financial Datasets.

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

LANGUAGE: bash
CODE:
```
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=""
```

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

TITLE: Navigate to Project Directory
DESCRIPTION: 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.

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

LANGUAGE: bash
CODE:
```
cd todo-app
```

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

TITLE: Create React App with TypeScript
DESCRIPTION: 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.

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

LANGUAGE: bash
CODE:
```
npx create-react-app todo-app --template typescript
```

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

TITLE: Create Project Directories
DESCRIPTION: 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.

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

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

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

TITLE: Example Agent Prompts and Graph IDs
DESCRIPTION: 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.

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

LANGUAGE: javascript
CODE:
```
// 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>"
```

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

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

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

LANGUAGE: APIDOC
CODE:
```
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
```

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

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

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

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

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

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

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

LANGUAGE: APIDOC
CODE:
```
Write a React TODO app for me
```

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

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

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

LANGUAGE: APIDOC
CODE:
```
Access via the `chat` graph ID.
```

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

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

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

LANGUAGE: APIDOC
CODE:
```
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.
```

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

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

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

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

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

TITLE: Email Agent with Human-in-the-Loop
DESCRIPTION: 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.

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

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

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

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

TITLE: Local Storage Todo Management (TypeScript)
DESCRIPTION: 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.

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

LANGUAGE: typescript
CODE:
```
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) : [];
};
```

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

TITLE: Supervisor Agent Functionality
DESCRIPTION: 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.

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

LANGUAGE: APIDOC
CODE:
```
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.
```

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

TITLE: Todo Context and Provider
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>;
};
```

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

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

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

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

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

TITLE: Todo Filters Component (React/TypeScript)
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
);
```

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

TITLE: TodoItem Component (React/TSX)
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
);
```

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

TITLE: AddTodo Component (React/TypeScript)
DESCRIPTION: 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.

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

LANGUAGE: tsx
CODE:
```
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>
  );
};
```