LangGraph.js Generative UI Examples

To run the generative UI examples locally, follow these steps:

1. Clone the repository:

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

2. Install dependencies using pnpm:

   pnpm install

3. Configure environment variables: Copy the example file to .env:

   cp .env.example .env

   Set the following keys in your .env file:

   • OPENAI_API_KEY (Required)
   • GOOGLE_API_KEY (Required)
   • ANTHROPIC_API_KEY (Optional, used for the pizza ordering agent)
   • FINANCIAL_DATASETS_API_KEY (Optional, used for the stockbroker graph)
   • LANGSMITH_API_KEY, LANGSMITH_PROJECT, LANGSMITH_TRACING_V2 (Optional, for observability)

4. Start the LangGraph server:

   pnpm agent

   The server will typically start at http://localhost:2024.

When a user clicks the "Book" button in the SelectedAccommodation view, the component uses the thread.submit method from the LangGraph SDK to update the conversation state. It sends a tool message containing the booking details and a human message confirming the action, then instructs the graph to move to the generalInput node.

Message Structure:

• Type: tool
• tool_call_id: The original toolCallId.
• id: A new ID prefixed with DO_NOT_RENDER_ID_PREFIX and a uuidv4().
• name: book-accommodation
• content: A JSON string containing accommodation and tripDetails.
• Type: human
• content: A string confirming the booking (e.g., "Booked [Name] for [Guests].")
• goto: "generalInput"

thread.submit(
  {},
  {
    command: {
      update: {
        messages: [
          {
            type: "tool",
            tool_call_id: toolCallId,
            id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
            name: "book-accommodation",
            content: JSON.stringify(orderDetails),
          },
          {
            type: "human",
            content: `Booked ${accommodation.name} for ${tripDetails.numberOfGuests}.`,
          },
        ],
      },
      goto: "generalInput",
    },
  },
);

When implementing Generative UI components that perform actions (like BuyStock), use thread.submit to update the conversation state and navigate the graph.

To successfully complete a tool execution, the command.update.messages array should include:

1. A message of type: "tool" containing the tool_call_id and a JSON-stringified content object representing the tool's result.
2. A message of type: "human" providing a natural language confirmation of the user's action.

You can also use the goto key in the command object to transition the graph to a specific node (e.g., generalInput) after the tool response is processed.

thread.submit(
  {},
  {
    command: {
      update: {
        messages: [
          {
            type: "tool",
            tool_call_id: toolCallId,
            id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
            name: "buy-stock",
            content: JSON.stringify(orderDetails),
          },
          {
            type: "human",
            content: `Purchased ${quantity} shares of ${snapshot.ticker} at ${snapshot.price} per share`,
          },
        ],
      },
      goto: "generalInput",
    },
  },
);

The SupervisorZodConfiguration schema defines the available parameters for configuring a Supervisor Agent. It is used to control the model selection, generation randomness, and token limits.

Available configuration keys:

• model: (string, optional) The model ID in provider/model_name format. Defaults to anthropic/claude-3-7-sonnet-latest. Supported options include various Claude and OpenAI models.
• temperature: (number, optional) Controls randomness from 0 (deterministic) to 2 (creative). Defaults to 0.7.
• maxTokens: (number, optional) The maximum number of tokens to generate. Defaults to 1000.
• systemPrompt: (string, optional) A custom system prompt to be used in all generations.

import { SupervisorZodConfiguration } from './path-to-types';

const config = {
  model: 'openai/gpt-4o',
  temperature: 0.5,
  maxTokens: 2000,
  systemPrompt: 'You are a helpful supervisor agent.'
};