prebuilt: release 0.1.3 (#3830)

This PR fixes the type of `foo` in the `State` class in Persistence
documentation. The type was previously defined as `int`, but the code
uses it as a `str`.

Updated the type of `foo` in the documentation to `str` to match its
actual usage in the code.

No changes to the functionality or codebase, only a documentation fix.

.github/workflows/deploy_docs.yml

@@ -127,6 +127,7 @@ jobs:
               --check-links-ignore "https://openai\.com/.*" \
               --check-links-ignore "https://www\.uber\.com/.*" \
               --check-links-ignore "https://pepy\.tech/.*" \
+              --check-links-ignore "docs/docs/static/wordmark_*" \
               --check-links $(find site -name "index.html" | grep -v 'storm/index.html')
               
           else
@@ -147,6 +148,7 @@ jobs:
                 --check-links-ignore "https://twitter.com/.*" \
                 --check-links-ignore "https://github\.com/.*" \
                 --check-links-ignore "/.*\.(ipynb|html)$" \
+                --check-links-ignore "docs/docs/static/wordmark_*" \
                 --check-links ${CHANGED_FILES} \
                 || ([ $? = 5 ] && exit 0 || exit $?)
             else

README.md

@@ -1,339 +1,87 @@
-# 🦜🕸️LangGraph
+<picture class="github-only">
+  <source media="(prefers-color-scheme: light)" srcset="docs/docs/static/wordmark_dark.svg">
+  <source media="(prefers-color-scheme: dark)" srcset="docs/docs/static/wordmark_light.svg">
+  <img alt="LangGraph Logo" src="docs/docs/static/wordmark_dark.svg" width="80%">
+</picture>
+
+<div>
+<br>
+</div>
 
 [![Version](https://img.shields.io/pypi/v/langgraph.svg)](https://pypi.org/project/langgraph/)
 [![Downloads](https://static.pepy.tech/badge/langgraph/month)](https://pepy.tech/project/langgraph)
 [![Open Issues](https://img.shields.io/github/issues-raw/langchain-ai/langgraph)](https://github.com/langchain-ai/langgraph/issues)
 [![Docs](https://img.shields.io/badge/docs-latest-blue)](https://langchain-ai.github.io/langgraph/)
 
-⚡ Building language agents as graphs ⚡
-
 > [!NOTE]
 > Looking for the JS version? See the [JS repo](https://github.com/langchain-ai/langgraphjs) and the [JS docs](https://langchain-ai.github.io/langgraphjs/).
 
-## Overview
+LangGraph — used by Replit, Uber, LinkedIn, GitLab and more — is a low-level orchestration framework for building controllable agents. While langchain provides integrations and composable components to streamline LLM application development, the LangGraph library enables agent orchestration — offering customizable architectures, long-term memory, and human-in-the-loop to reliably handle complex tasks.
 
-[LangGraph](https://langchain-ai.github.io/langgraph/) is a library for building
-stateful, multi-actor applications with LLMs, used to create agent and multi-agent
-workflows. Check out an introductory tutorial [here](https://langchain-ai.github.io/langgraph/tutorials/introduction/).
-
-
-LangGraph is inspired by [Pregel](https://research.google/pubs/pub37252/) and [Apache Beam](https://beam.apache.org/). The public interface draws inspiration from [NetworkX](https://networkx.org/documentation/latest/). LangGraph is built by LangChain Inc, the creators of LangChain, but can be used without LangChain.
-
-### Why use LangGraph?
-
-LangGraph powers [production-grade agents](https://www.langchain.com/built-with-langgraph), trusted by Linkedin, Uber, Klarna, GitLab, and many more. LangGraph provides fine-grained control over both the flow and state of your agent applications. It implements a central [persistence layer](https://langchain-ai.github.io/langgraph/concepts/persistence/), enabling features that are common to most agent architectures:
-
-- **Memory**: LangGraph persists arbitrary aspects of your application's state,
-supporting memory of conversations and other updates within and across user
-interactions;
-- **Human-in-the-loop**: Because state is checkpointed, execution can be interrupted
-and resumed, allowing for decisions, validation, and corrections at key stages via
-human input.
-
-Standardizing these components allows individuals and teams to focus on the behavior
-of their agent, instead of its supporting infrastructure.
-
-Through [LangGraph Platform](#langgraph-platform), LangGraph also provides tooling for
-the development, deployment, debugging, and monitoring of your applications.
-
-LangGraph integrates seamlessly with
-[LangChain](https://python.langchain.com/docs/introduction/) and
-[LangSmith](https://docs.smith.langchain.com/) (but does not require them).
-
-To learn more about LangGraph, check out our first LangChain Academy
-course, *Introduction to LangGraph*, available for free
-[here](https://academy.langchain.com/courses/intro-to-langgraph).
-
-### LangGraph Platform
-
-[LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/langgraph_platform) is infrastructure for deploying LangGraph agents. It is a commercial solution for deploying agentic applications to production, built on the open-source LangGraph framework. The LangGraph Platform consists of several components that work together to support the development, deployment, debugging, and monitoring of LangGraph applications: [LangGraph Server](https://langchain-ai.github.io/langgraph/concepts/langgraph_server) (APIs), [LangGraph SDKs](https://langchain-ai.github.io/langgraph/concepts/sdk) (clients for the APIs), [LangGraph CLI](https://langchain-ai.github.io/langgraph/concepts/langgraph_cli) (command line tool for building the server), and [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio) (UI/debugger).
-
-See deployment options [here](https://langchain-ai.github.io/langgraph/concepts/deployment_options/)
-(includes a free tier).
-
-Here are some common issues that arise in complex deployments, which LangGraph Platform addresses:
-
-- **Streaming support**: LangGraph Server provides [multiple streaming modes](https://langchain-ai.github.io/langgraph/concepts/streaming) optimized for various application needs
-- **Background runs**: Runs agents asynchronously in the background
-- **Support for long running agents**: Infrastructure that can handle long running processes
-- **[Double texting](https://langchain-ai.github.io/langgraph/concepts/double_texting)**: Handle the case where you get two messages from the user before the agent can respond
-- **Handle burstiness**: Task queue for ensuring requests are handled consistently without loss, even under heavy loads
-
-## Installation
-
-```shell
+```bash
 pip install -U langgraph
 ```
 
-## Example
-
-Let's build a tool-calling [ReAct-style](https://langchain-ai.github.io/langgraph/concepts/agentic_concepts/#react-implementation) agent that uses a search tool!
-
-```shell
-pip install langchain-anthropic
-```
-
-```shell
-export ANTHROPIC_API_KEY=sk-...
-```
-
-Optionally, we can set up [LangSmith](https://docs.smith.langchain.com/) for best-in-class observability.
-
-```shell
-export LANGSMITH_TRACING=true
-export LANGSMITH_API_KEY=lsv2_sk_...
-```
-
-The simplest way to create a tool-calling agent in LangGraph is to use `create_react_agent`:
-
-<details open>
-  <summary>High-level implementation</summary>
+To learn more about how to use LangGraph, check out [the docs](https://langchain-ai.github.io/langgraph/). We show a simple example below of how to create a ReAct agent.
 
 ```python
+# This code depends on pip install langchain[anthropic]
 from langgraph.prebuilt import create_react_agent
-from langgraph.checkpoint.memory import MemorySaver
-from langchain_anthropic import ChatAnthropic
-from langchain_core.tools import tool
 
-# Define the tools for the agent to use
-@tool
 def search(query: str):
     """Call to surf the web."""
-    # This is a placeholder, but don't tell the LLM that...
     if "sf" in query.lower() or "san francisco" in query.lower():
         return "It's 60 degrees and foggy."
     return "It's 90 degrees and sunny."
 
-
-tools = [search]
-model = ChatAnthropic(model="claude-3-5-sonnet-latest", temperature=0)
-
-# Initialize memory to persist state between graph runs
-checkpointer = MemorySaver()
-
-app = create_react_agent(model, tools, checkpointer=checkpointer)
-
-# Use the agent
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what is the weather in sf"}]},
-    config={"configurable": {"thread_id": 42}}
+agent = create_react_agent("anthropic:claude-3-7-sonnet-latest", tools=[search])
+agent.invoke(
+    {"messages": [{"role": "user", "content": "what is the weather in sf"}]}
 )
-final_state["messages"][-1].content
-```
-```
-"Based on the search results, I can tell you that the current weather in San Francisco is:\n\nTemperature: 60 degrees Fahrenheit\nConditions: Foggy\n\nSan Francisco is known for its microclimates and frequent fog, especially during the summer months. The temperature of 60°F (about 15.5°C) is quite typical for the city, which tends to have mild temperatures year-round. The fog, often referred to as "Karl the Fog" by locals, is a characteristic feature of San Francisco\'s weather, particularly in the mornings and evenings.\n\nIs there anything else you\'d like to know about the weather in San Francisco or any other location?"
 ```
 
-Now when we pass the same <code>"thread_id"</code>, the conversation context is retained via the saved state (i.e. stored list of messages)
+## Why use LangGraph?
 
-```python
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what about ny"}]},
-    config={"configurable": {"thread_id": 42}}
-)
-final_state["messages"][-1].content
-```
+LangGraph is built for developers who want to build powerful, adaptable AI agents. Developers choose LangGraph for:
 
-```
-"Based on the search results, I can tell you that the current weather in New York City is:\n\nTemperature: 90 degrees Fahrenheit (approximately 32.2 degrees Celsius)\nConditions: Sunny\n\nThis weather is quite different from what we just saw in San Francisco. New York is experiencing much warmer temperatures right now. Here are a few points to note:\n\n1. The temperature of 90°F is quite hot, typical of summer weather in New York City.\n2. The sunny conditions suggest clear skies, which is great for outdoor activities but also means it might feel even hotter due to direct sunlight.\n3. This kind of weather in New York often comes with high humidity, which can make it feel even warmer than the actual temperature suggests.\n\nIt's interesting to see the stark contrast between San Francisco's mild, foggy weather and New York's hot, sunny conditions. This difference illustrates how varied weather can be across different parts of the United States, even on the same day.\n\nIs there anything else you'd like to know about the weather in New York or any other location?"
-```
-</details>
+- **Reliability and controllability.** Steer agent actions with moderation checks and human-in-the-loop approvals. LangGraph persists context for long-running workflows, keeping your agents on course.
+- **Low-level and extensible.** Build custom agents with fully descriptive, low-level primitives – free from rigid abstractions that limit customization. Design scalable multi-agent systems, with each agent serving a specific role tailored to your use case.
+- **First-class streaming support.** With token-by-token streaming and streaming of intermediate steps, LangGraph gives users clear visibility into agent reasoning and actions as they unfold in real time.
 
-> [!TIP]
-> LangGraph is a **low-level** framework that allows you to implement any custom agent
-architectures. Click on the low-level implementation below to see how to implement a
-tool-calling agent from scratch.
+LangGraph is trusted in production and powering agents for companies like:
 
-<details>
-<summary>Low-level implementation</summary>
+- [Klarna](https://blog.langchain.dev/customers-klarna/): Customer support bot for 85 million active users
+- [Elastic](https://www.elastic.co/blog/elastic-security-generative-ai-features): Security AI assistant for threat detection
+- [Uber](https://dpe.org/sessions/ty-smith-adam-huda/this-year-in-ubers-ai-driven-developer-productivity-revolution/): Automated unit test generation
+- [Replit](https://www.langchain.com/breakoutagents/replit): Code generation
+- And many more ([see list here](https://www.langchain.com/built-with-langgraph))
 
-```python
-from typing import Literal
+## LangGraph’s ecosystem
 
-from langchain_anthropic import ChatAnthropic
-from langchain_core.tools import tool
-from langgraph.checkpoint.memory import MemorySaver
-from langgraph.graph import END, START, StateGraph, MessagesState
-from langgraph.prebuilt import ToolNode
+While LangGraph can be used standalone, it also integrates seamlessly with any LangChain product, giving developers a full suite of tools for building agents. To improve your LLM application development, pair LangGraph with:
 
+- [LangSmith](http://www.langchain.com/langsmith) — Helpful for agent evals and observability. Debug poor-performing LLM app runs, evaluate agent trajectories, gain visibility in production, and improve performance over time.
+- [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/#langgraph-platform) — Deploy and scale agents effortlessly with a purpose-built deployment platform for long running, stateful workflows. Discover, reuse, configure, and share agents across teams — and iterate quickly with visual prototyping in [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio/).
 
-# Define the tools for the agent to use
-@tool
-def search(query: str):
-    """Call to surf the web."""
-    # This is a placeholder, but don't tell the LLM that...
-    if "sf" in query.lower() or "san francisco" in query.lower():
-        return "It's 60 degrees and foggy."
-    return "It's 90 degrees and sunny."
+## Pairing with LangGraph Platform
 
+While LangGraph is our open-source agent orchestration framework, enterprises that need scalable agent deployment can benefit from [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/langgraph_platform/).
 
-tools = [search]
+LangGraph Platform can help engineering teams:
 
-tool_node = ToolNode(tools)
+- **Accelerate agent development**: Quickly create agent UXs with configurable templates and [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio/) for visualizing and debugging agent interactions.
+- **Deploy seamlessly**: We handle the complexity of deploying your agent. LangGraph Platform includes robust APIs for memory, threads, and cron jobs plus auto-scaling task queues & servers.
+- **Centralize agent management & reusability**: Discover, reuse, and manage agents across the organization. Business users can also modify agents without coding.
 
-model = ChatAnthropic(model="claude-3-5-sonnet-latest", temperature=0).bind_tools(tools)
+## Additional resources
 
-# Define the function that determines whether to continue or not
-def should_continue(state: MessagesState) -> Literal["tools", END]:
-    messages = state['messages']
-    last_message = messages[-1]
-    # If the LLM makes a tool call, then we route to the "tools" node
-    if last_message.tool_calls:
-        return "tools"
-    # Otherwise, we stop (reply to the user)
-    return END
+- [LangChain Academy](https://academy.langchain.com/courses/intro-to-langgraph): Learn the basics of LangGraph in our free, structured course.
+- [Tutorials](https://langchain-ai.github.io/langgraph/tutorials/): Simple walkthroughs with guided examples on getting started with LangGraph.
+- [Templates](https://langchain-ai.github.io/langgraph/concepts/template_applications/): Pre-built reference apps for common agentic workflows (e.g. ReAct agent, memory, retrieval etc.) that can be cloned and adapted.
+- [How-to Guides](https://langchain-ai.github.io/langgraph/how-tos/): Quick, actionable code snippets for topics such as streaming, adding memory & persistence, and design patterns (e.g. branching, subgraphs, etc.).
+- [API Reference](https://langchain-ai.github.io/langgraph/reference/graphs/): Detailed reference on core classes, methods, how to use the graph and checkpointing APIs, and higher-level prebuilt components.
+- [Built with LangGraph](https://www.langchain.com/built-with-langgraph): Hear how industry leaders use LangGraph to ship powerful, production-ready AI applications.
 
+## Acknowledgements
 
-# Define the function that calls the model
-def call_model(state: MessagesState):
-    messages = state['messages']
-    response = model.invoke(messages)
-    # We return a list, because this will get added to the existing list
-    return {"messages": [response]}
-
-
-# Define a new graph
-workflow = StateGraph(MessagesState)
-
-# Define the two nodes we will cycle between
-workflow.add_node("agent", call_model)
-workflow.add_node("tools", tool_node)
-
-# Set the entrypoint as `agent`
-# This means that this node is the first one called
-workflow.add_edge(START, "agent")
-
-# We now add a conditional edge
-workflow.add_conditional_edges(
-    # First, we define the start node. We use `agent`.
-    # This means these are the edges taken after the `agent` node is called.
-    "agent",
-    # Next, we pass in the function that will determine which node is called next.
-    should_continue,
-)
-
-# We now add a normal edge from `tools` to `agent`.
-# This means that after `tools` is called, `agent` node is called next.
-workflow.add_edge("tools", 'agent')
-
-# Initialize memory to persist state between graph runs
-checkpointer = MemorySaver()
-
-# Finally, we compile it!
-# This compiles it into a LangChain Runnable,
-# meaning you can use it as you would any other runnable.
-# Note that we're (optionally) passing the memory when compiling the graph
-app = workflow.compile(checkpointer=checkpointer)
-
-# Use the agent
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what is the weather in sf"}]},
-    config={"configurable": {"thread_id": 42}}
-)
-final_state["messages"][-1].content
-```
-
-<b>Step-by-step Breakdown</b>:
-
-<details>
-<summary>Initialize the model and tools.</summary>
-<ul>
-  <li>
-    We use <code>ChatAnthropic</code> as our LLM. <strong>NOTE:</strong> we need to make sure the model knows that it has these tools available to call. We can do this by converting the LangChain tools into the format for OpenAI tool calling using the <code>.bind_tools()</code> method.
-  </li>
-  <li>
-    We define the tools we want to use - a search tool in our case. It is really easy to create your own tools - see documentation here on how to do that <a href="https://python.langchain.com/docs/how_to/custom_tools/">here</a>.
-  </li>
-</ul>
-</details>
-
-<details>
-<summary>Initialize graph with state.</summary>
-
-<ul>
-    <li>We initialize graph (<code>StateGraph</code>) by passing state schema (in our case <code>MessagesState</code>)</li>
-    <li><code>MessagesState</code> is a prebuilt state schema that has one attribute -- a list of LangChain <code>Message</code> objects, as well as logic for merging the updates from each node into the state.</li>
-</ul>
-</details>
-
-<details>
-<summary>Define graph nodes.</summary>
-
-There are two main nodes we need:
-
-<ul>
-    <li>The <code>agent</code> node: responsible for deciding what (if any) actions to take.</li>
-    <li>The <code>tools</code> node that invokes tools: if the agent decides to take an action, this node will then execute that action.</li>
-</ul>
-</details>
-
-<details>
-<summary>Define entry point and graph edges.</summary>
-
-First, we need to set the entry point for graph execution - <code>agent</code> node.
-
-Then we define one normal and one conditional edge. Conditional edge means that the destination depends on the contents of the graph's state (<code>MessagesState</code>). In our case, the destination is not known until the agent (LLM) decides.
-
-<ul>
-  <li>Conditional edge: after the agent is called, we should either:
-    <ul>
-      <li>a. Run tools if the agent said to take an action, OR</li>
-      <li>b. Finish (respond to the user) if the agent did not ask to run tools</li>
-    </ul>
-  </li>
-  <li>Normal edge: after the tools are invoked, the graph should always return to the agent to decide what to do next</li>
-</ul>
-</details>
-
-<details>
-<summary>Compile the graph.</summary>
-
-<ul>
-  <li>
-    When we compile the graph, we turn it into a LangChain 
-    <a href="https://python.langchain.com/docs/concepts/runnables/">Runnable</a>, 
-    which automatically enables calling <code>.invoke()</code>, <code>.stream()</code> and <code>.batch()</code> 
-    with your inputs
-  </li>
-  <li>
-    We can also optionally pass checkpointer object for persisting state between graph runs, and enabling memory, 
-    human-in-the-loop workflows, time travel and more. In our case we use <code>MemorySaver</code> - 
-    a simple in-memory checkpointer
-  </li>
-</ul>
-</details>
-
-<details>
-<summary>Execute the graph.</summary>
-
-<ol>
-  <li>LangGraph adds the input message to the internal state, then passes the state to the entrypoint node, <code>"agent"</code>.</li>
-  <li>The <code>"agent"</code> node executes, invoking the chat model.</li>
-  <li>The chat model returns an <code>AIMessage</code>. LangGraph adds this to the state.</li>
-  <li>Graph cycles the following steps until there are no more <code>tool_calls</code> on <code>AIMessage</code>:
-    <ul>
-      <li>If <code>AIMessage</code> has <code>tool_calls</code>, <code>"tools"</code> node executes</li>
-      <li>The <code>"agent"</code> node executes again and returns <code>AIMessage</code></li>
-    </ul>
-  </li>
-  <li>Execution progresses to the special <code>END</code> value and outputs the final state. And as a result, we get a list of all our chat messages as output.</li>
-</ol>
-</details>
-
-</details>
-
-## Documentation
-
-* [Tutorials](https://langchain-ai.github.io/langgraph/tutorials/): Learn to build with LangGraph through guided examples.
-* [How-to Guides](https://langchain-ai.github.io/langgraph/how-tos/): Accomplish specific things within LangGraph, from streaming, to adding memory & persistence, to common design patterns (branching, subgraphs, etc.), these are the place to go if you want to copy and run a specific code snippet.
-* [Conceptual Guides](https://langchain-ai.github.io/langgraph/concepts/high_level/): In-depth explanations of the key concepts and principles behind LangGraph, such as nodes, edges, state and more.
-* [API Reference](https://langchain-ai.github.io/langgraph/reference/graphs/): Review important classes and methods, simple examples of how to use the graph and checkpointing APIs, higher-level prebuilt components and more.
-* [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/#langgraph-platform): LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework.
-
-## Resources
-
-* [Built with LangGraph](https://www.langchain.com/built-with-langgraph): Hear how industry leaders use LangGraph to ship powerful, production-ready AI applications.
-
-## Contributing
-
-For more information on how to contribute, see [here](https://github.com/langchain-ai/langgraph/blob/main/CONTRIBUTING.md).
+LangGraph is inspired by [Pregel](https://research.google/pubs/pub37252/) and [Apache Beam](https://beam.apache.org/). The public interface draws inspiration from [NetworkX](https://networkx.org/documentation/latest/). LangGraph is built by LangChain Inc, the creators of LangChain, but can be used without LangChain.

docs/_scripts/third_party_page/packages.yml

@@ -30,3 +30,6 @@ packages:
   - name: "langgraph-bigtool"
     repo: "langchain-ai/langgraph-bigtool"
     description: "Build LangGraph agents with large numbers of tools."
+  - name: "langgraph-reflection"
+    repo: "langchain-ai/langgraph-reflection"
+    description: "LangGraph agent that runs a reflection step."

docs/docs/cloud/how-tos/generative_ui_react.md

@@ -0,0 +1,305 @@
+# How to implement Generative User Interfaces with LangGraph
+
+!!! info "Prerequisites"
+
+    - [LangGraph Platform](../../concepts/langgraph_platform.md)
+    - [LangGraph Server](../../concepts/langgraph_server.md)
+    - [`useStream()` React Hook](./use_stream_react.md)
+
+Generative user interfaces (Generative UI) allows agents to go beyond text and generate rich user interfaces. This enables creating more interactive and context-aware applications where the UI adapts based on the conversation flow and AI responses.
+
+![Generative UI Sample](./img/generative_ui_sample.jpg)
+
+LangGraph Platform supports colocating your React components with your graph code. This allows you to focus on building specific UI components for your graph while easily plugging into existing chat interfaces such as [Agent Chat](https://agentchat.vercel.app) and loading the code only when actually needed.
+
+!!! warning "LangGraph.js only"
+
+    Currently only LangGraph.js supports Generative UI. Support for Python is coming soon.
+
+## Tutorial
+
+### 1. Define and configure UI components
+
+First, create your first UI component. For each component you need to provide an unique identifier that will be used to reference the component in your graph code.
+
+```tsx title="src/agent/ui.tsx"
+const WeatherComponent = (props: { city: string }) => {
+  return <div>Weather for {props.city}</div>;
+};
+
+export default {
+  weather: WeatherComponent,
+};
+```
+
+Next, define your UI components in your `langgraph.json` configuration:
+
+```json
+{
+  "node_version": "20",
+  "graphs": {
+    "agent": "./src/agent/index.ts:graph"
+  },
+  "ui": {
+    "agent": "./src/agent/ui.tsx"
+  }
+}
+```
+
+The `ui` section points to the UI components that will be used by graphs. By default, we recommend using the same key as the graph name, but you can split out the components however you like, see [Customise the namespace of UI components](#customise-the-namespace-of-ui-components) for more details.
+
+LangGraph Platform will automatically bundle your UI components code and styles and serve them as external assets that can be loaded by the `LoadExternalComponent` component. Some dependencies such as `react` and `react-dom` will be automatically excluded from the bundle.
+
+CSS and Tailwind 4.x is also supported out of the box, so you can freely use Tailwind classes as well as `shadcn/ui` in your UI components.
+
+=== "`src/agent/ui.tsx`"
+
+    ```tsx
+    import "./styles.css";
+
+    const WeatherComponent = (props: { city: string }) => {
+      return <div className="bg-red-500">Weather for {props.city}</div>;
+    };
+
+    export default {
+      weather: WeatherComponent,
+    };
+    ```
+
+=== "`src/agent/styles.css`"
+
+    ```css
+    @import "tailwindcss";
+    ```
+
+### 2. Send the UI components in your graph
+
+Use the `typedUi` utility to emit UI elements from your agent nodes:
+
+```typescript title="src/agent/index.ts"
+import {
+  typedUi,
+  uiMessageReducer,
+} from "@langchain/langgraph-sdk/react-ui/server";
+
+import { ChatOpenAI } from "@langchain/openai";
+import { v4 as uuidv4 } from "uuid";
+import { z } from "zod";
+
+import type ComponentMap from "./ui.js";
+
+import {
+  Annotation,
+  MessagesAnnotation,
+  StateGraph,
+  type LangGraphRunnableConfig,
+} from "@langchain/langgraph";
+
+const AgentState = Annotation.Root({
+  ...MessagesAnnotation.spec,
+  ui: Annotation({ reducer: uiMessageReducer, default: () => [] }),
+});
+
+export const graph = new StateGraph(AgentState)
+  .addNode("weather", async (state, config) => {
+    // Provide the type of the component map to ensure
+    // type safety of `ui.push()` calls.
+    const ui = typedUi<typeof ComponentMap>(config);
+
+    const weather = await new ChatOpenAI({ model: "gpt-4o-mini" })
+      .withStructuredOutput(z.object({ city: z.string() }))
+      .withConfig({ tags: ["langsmith:nostream"] })
+      .invoke(state.messages);
+
+    const response = {
+      id: uuidv4(),
+      type: "ai",
+      content: `Here's the weather for ${weather.city}`,
+    };
+
+    // Emit UI elements with associated AI message
+    ui.push({ name: "weather", props: weather }, { message: response });
+
+    return { messages: [response], ui: ui.items };
+  })
+  .addEdge("__start__", "weather")
+  .compile();
+```
+
+### 3. Handle UI elements in your React application
+
+On the client side, you can use `useStream()` and `LoadExternalComponent` to display the UI elements.
+
+```tsx title="src/app/page.tsx"
+"use client";
+
+import { useStream } from "@langchain/langgraph-sdk/react";
+import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
+
+export default function Page() {
+  const { thread, values } = useStream({
+    apiUrl: "http://localhost:2024",
+    assistantId: "agent",
+  });
+
+  return (
+    <div>
+      {thread.messages.map((message) => (
+        <div key={message.id}>
+          {message.content}
+          {values.ui
+            ?.filter((ui) => ui.metadata?.message_id === message.id)
+            .map((ui) => (
+              <LoadExternalComponent key={ui.id} stream={thread} message={ui} />
+            ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+Behind the scenes, `LoadExternalComponent` will fetch the JS and CSS for the UI components from LangGraph Platform and render them in a shadow DOM, thus ensuring style isolation from the rest of your application.
+
+## How-to guides
+
+### Show loading UI when components are loading
+
+You can provide a fallback UI to be rendered when the components are loading.
+
+```tsx
+<LoadExternalComponent
+  stream={thread}
+  message={ui}
+  fallback={<div>Loading...</div>}
+/>
+```
+
+### Provide custom components on the client side
+
+If you already have the components loaded in your client application, you can provide a map of such components to be rendered directly without fetching the UI code from LangGraph Platform.
+
+```tsx
+const clientComponents = {
+  weather: WeatherComponent,
+};
+
+<LoadExternalComponent
+  stream={thread}
+  message={ui}
+  components={clientComponents}
+/>;
+```
+
+### Customise the namespace of UI components.
+
+By default `LoadExternalComponent` will use the `assistantId` from `useStream()` hook to fetch the code for UI components. You can customise this by providing a `namespace` prop to the `LoadExternalComponent` component.
+
+=== "`src/app/page.tsx`"
+
+    ```tsx
+    <LoadExternalComponent
+      stream={thread}
+      message={ui}
+      namespace="custom-namespace"
+    />
+    ```
+
+=== "`langgraph.json`"
+
+    ```json
+    {
+      "ui": {
+        "custom-namespace": "./src/agent/ui.tsx"
+      }
+    }
+    ```
+
+### Access and interact with the thread state from the UI component
+
+You can access the thread state from the UI component by using the `useStreamContext` hook.
+
+```tsx
+import { useStreamContext } from "@langchain/langgraph-sdk/react-ui";
+
+const WeatherComponent = (props: { city: string }) => {
+  const { thread, submit } = useStreamContext();
+  return (
+    <>
+      <div>Weather for {props.city}</div>
+
+      <button
+        onClick={() => {
+          const newMessage = {
+            type: "human",
+            content: `What's the weather in ${props.city}?`,
+          };
+
+          submit({ messages: [newMessage] });
+        }}
+      >
+        Retry
+      </button>
+    </>
+  );
+};
+```
+
+### Pass additional context to the client components
+
+You can pass additional context to the client components by providing a `meta` prop to the `LoadExternalComponent` component.
+
+```tsx
+<LoadExternalComponent stream={thread} message={ui} meta={{ userId: "123" }} />
+```
+
+Then, you can access the `meta` prop in the UI component by using the `useStreamContext` hook.
+
+```tsx
+const WeatherComponent = (props: { city: string }) => {
+  const { meta } = useStreamContext();
+  return (
+    <div>
+      Weather for {props.city} (user: {meta?.userId})
+    </div>
+  );
+};
+```
+
+### Streaming UI updates before the node execution is finished
+
+You can stream UI updates before the node execution is finished by using the `onCustomEvent` callback of the `useStream()` hook.
+
+```tsx
+import { uiMessageReducer } from "@langchain/langgraph-sdk/react-ui";
+
+const { thread, submit } = useStream({
+  apiUrl: "http://localhost:2024",
+  assistantId: "agent",
+  onCustomEvent: (event, options) => {
+    options.mutate((prev) => {
+      const ui = uiMessageReducer(prev.ui ?? [], event);
+      return { ...prev, ui };
+    });
+  },
+});
+```
+
+### Remove UI messages from state
+
+Similar to how messages can be removed from the state by appending a RemoveMessage you can remove an UI message from the state by calling `ui.delete` with the ID of the UI message.
+
+```tsx
+// pushed message
+const message = ui.push({ name: "weather", props: { city: "London" } });
+
+// remove said message
+ui.delete(message.id);
+
+// return new state to persist changes
+return { ui: ui.items };
+```
+
+## Learn more
+
+- [JS/TS SDK Reference](../reference/sdk/js_ts_sdk_ref.md)

docs/docs/concepts/persistence.md

@@ -32,7 +32,7 @@ from typing_extensions import TypedDict
 from operator import add
 
 class State(TypedDict):
-    foo: int
+    foo: str
     bar: Annotated[list[str], add]
 
 def node_a(state: State):

docs/docs/how-tos/create-react-agent-memory.ipynb

@@ -220,7 +220,7 @@
    "id": "838a043f-90ad-4e69-9d1d-6e22db2c346c",
    "metadata": {},
    "source": [
-    "Notice that when we pass the same the same thread ID, the chat history is preserved"
+    "Notice that when we pass the same thread ID, the chat history is preserved."
    ]
   },
   {

docs/docs/how-tos/index.md

@@ -198,7 +198,6 @@ Learn how to set up your app for deployment to LangGraph Platform:
 - [How to test locally](../cloud/deployment/test_locally.md)
 - [How to rebuild graph at runtime](../cloud/deployment/graph_rebuild.md)
 - [How to use LangGraph Platform to deploy CrewAI, AutoGen, and other frameworks](autogen-langgraph-platform.ipynb)
-- [How to integrate LangGraph into your React application](../cloud/how-tos/use_stream_react.md)
 
 ### Deployment
 
@@ -257,6 +256,13 @@ Streaming the results of your LLM application is vital for ensuring a good user
 - [How to stream in debug mode](../cloud/how-tos/stream_debug.md)
 - [How to stream multiple modes](../cloud/how-tos/stream_multiple.md)
 
+### Frontend and Generative UI
+
+With LangGraph Platform you can integrate LangGraph agents into your React applications and colocate UI components with your agent code. 
+
+- [How to integrate LangGraph into your React application](../cloud/how-tos/use_stream_react.md)
+- [How to implement Generative User Interfaces with LangGraph](../cloud/how-tos/generative_ui_react.md)
+
 ### Human-in-the-loop
 
 When designing complex graphs, relying entirely on the LLM for decision-making can be risky, particularly when it involves tools that interact with files, APIs, or databases. These interactions may lead to unintended data access or modifications, depending on the use case. To mitigate these risks, LangGraph allows you to integrate human-in-the-loop behavior, ensuring your LLM applications operate as intended without undesirable outcomes.

docs/docs/index.md

@@ -3,4 +3,26 @@ hide_comments: true
 title: Home
 ---
 
+<script>
+  // This script only runs in MkDocs, not on GitHub
+  var hideGitHubVersion = function() {
+    document.querySelectorAll('.github-only').forEach(el => el.style.display = 'none');
+  };
+
+  // Handle both initial load and subsequent navigation
+  document.addEventListener('DOMContentLoaded', hideGitHubVersion);
+  document$.subscribe(hideGitHubVersion);
+</script>
+
+<p class="mkdocs-only">
+  <img class="logo-light" src="static/wordmark_dark.svg" alt="LangGraph Logo" width="80%">
+  <img class="logo-dark" src="static/wordmark_light.svg" alt="LangGraph Logo" width="80%">
+</p>
+
+<style>
+h1 {
+  display: none;
+}
+</style>
+
 {!../README.md!}

docs/mkdocs.yml

@@ -85,7 +85,7 @@ plugins:
 
 nav:
   - Home:
-    - Introduction: index.md
+    - index.md
     - Get started:
       - Learn the basics: tutorials/introduction.ipynb
       - Deployment:
@@ -231,6 +231,7 @@ nav:
                 - cloud/how-tos/stream_debug.md
                 - cloud/how-tos/stream_multiple.md
                 - cloud/how-tos/use_stream_react.md
+                - cloud/how-tos/generative_ui_react.md
             - Human-in-the-loop:
                 - Human-in-the-loop: how-tos#human-in-the-loop_1
                 - cloud/how-tos/human_in_the_loop_breakpoint.md

libs/langgraph/README.md

@@ -1,339 +1,87 @@
-# 🦜🕸️LangGraph
+<picture class="github-only">
+  <source media="(prefers-color-scheme: light)" srcset="docs/docs/static/wordmark_dark.svg">
+  <source media="(prefers-color-scheme: dark)" srcset="docs/docs/static/wordmark_light.svg">
+  <img alt="LangGraph Logo" src="docs/docs/static/wordmark_dark.svg" width="80%">
+</picture>
+
+<div>
+<br>
+</div>
 
 [![Version](https://img.shields.io/pypi/v/langgraph.svg)](https://pypi.org/project/langgraph/)
 [![Downloads](https://static.pepy.tech/badge/langgraph/month)](https://pepy.tech/project/langgraph)
 [![Open Issues](https://img.shields.io/github/issues-raw/langchain-ai/langgraph)](https://github.com/langchain-ai/langgraph/issues)
 [![Docs](https://img.shields.io/badge/docs-latest-blue)](https://langchain-ai.github.io/langgraph/)
 
-⚡ Building language agents as graphs ⚡
-
 > [!NOTE]
 > Looking for the JS version? See the [JS repo](https://github.com/langchain-ai/langgraphjs) and the [JS docs](https://langchain-ai.github.io/langgraphjs/).
 
-## Overview
+LangGraph — used by Replit, Uber, LinkedIn, GitLab and more — is a low-level orchestration framework for building controllable agents. While langchain provides integrations and composable components to streamline LLM application development, the LangGraph library enables agent orchestration — offering customizable architectures, long-term memory, and human-in-the-loop to reliably handle complex tasks.
 
-[LangGraph](https://langchain-ai.github.io/langgraph/) is a library for building
-stateful, multi-actor applications with LLMs, used to create agent and multi-agent
-workflows. Check out an introductory tutorial [here](https://langchain-ai.github.io/langgraph/tutorials/introduction/).
-
-
-LangGraph is inspired by [Pregel](https://research.google/pubs/pub37252/) and [Apache Beam](https://beam.apache.org/). The public interface draws inspiration from [NetworkX](https://networkx.org/documentation/latest/). LangGraph is built by LangChain Inc, the creators of LangChain, but can be used without LangChain.
-
-### Why use LangGraph?
-
-LangGraph powers [production-grade agents](https://www.langchain.com/built-with-langgraph), trusted by Linkedin, Uber, Klarna, GitLab, and many more. LangGraph provides fine-grained control over both the flow and state of your agent applications. It implements a central [persistence layer](https://langchain-ai.github.io/langgraph/concepts/persistence/), enabling features that are common to most agent architectures:
-
-- **Memory**: LangGraph persists arbitrary aspects of your application's state,
-supporting memory of conversations and other updates within and across user
-interactions;
-- **Human-in-the-loop**: Because state is checkpointed, execution can be interrupted
-and resumed, allowing for decisions, validation, and corrections at key stages via
-human input.
-
-Standardizing these components allows individuals and teams to focus on the behavior
-of their agent, instead of its supporting infrastructure.
-
-Through [LangGraph Platform](#langgraph-platform), LangGraph also provides tooling for
-the development, deployment, debugging, and monitoring of your applications.
-
-LangGraph integrates seamlessly with
-[LangChain](https://python.langchain.com/docs/introduction/) and
-[LangSmith](https://docs.smith.langchain.com/) (but does not require them).
-
-To learn more about LangGraph, check out our first LangChain Academy
-course, *Introduction to LangGraph*, available for free
-[here](https://academy.langchain.com/courses/intro-to-langgraph).
-
-### LangGraph Platform
-
-[LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/langgraph_platform) is infrastructure for deploying LangGraph agents. It is a commercial solution for deploying agentic applications to production, built on the open-source LangGraph framework. The LangGraph Platform consists of several components that work together to support the development, deployment, debugging, and monitoring of LangGraph applications: [LangGraph Server](https://langchain-ai.github.io/langgraph/concepts/langgraph_server) (APIs), [LangGraph SDKs](https://langchain-ai.github.io/langgraph/concepts/sdk) (clients for the APIs), [LangGraph CLI](https://langchain-ai.github.io/langgraph/concepts/langgraph_cli) (command line tool for building the server), and [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio) (UI/debugger).
-
-See deployment options [here](https://langchain-ai.github.io/langgraph/concepts/deployment_options/)
-(includes a free tier).
-
-Here are some common issues that arise in complex deployments, which LangGraph Platform addresses:
-
-- **Streaming support**: LangGraph Server provides [multiple streaming modes](https://langchain-ai.github.io/langgraph/concepts/streaming) optimized for various application needs
-- **Background runs**: Runs agents asynchronously in the background
-- **Support for long running agents**: Infrastructure that can handle long running processes
-- **[Double texting](https://langchain-ai.github.io/langgraph/concepts/double_texting)**: Handle the case where you get two messages from the user before the agent can respond
-- **Handle burstiness**: Task queue for ensuring requests are handled consistently without loss, even under heavy loads
-
-## Installation
-
-```shell
+```bash
 pip install -U langgraph
 ```
 
-## Example
-
-Let's build a tool-calling [ReAct-style](https://langchain-ai.github.io/langgraph/concepts/agentic_concepts/#react-implementation) agent that uses a search tool!
-
-```shell
-pip install langchain-anthropic
-```
-
-```shell
-export ANTHROPIC_API_KEY=sk-...
-```
-
-Optionally, we can set up [LangSmith](https://docs.smith.langchain.com/) for best-in-class observability.
-
-```shell
-export LANGSMITH_TRACING=true
-export LANGSMITH_API_KEY=lsv2_sk_...
-```
-
-The simplest way to create a tool-calling agent in LangGraph is to use `create_react_agent`:
-
-<details open>
-  <summary>High-level implementation</summary>
+To learn more about how to use LangGraph, check out [the docs](https://langchain-ai.github.io/langgraph/). We show a simple example below of how to create a ReAct agent.
 
 ```python
+# This code depends on pip install langchain[anthropic]
 from langgraph.prebuilt import create_react_agent
-from langgraph.checkpoint.memory import MemorySaver
-from langchain_anthropic import ChatAnthropic
-from langchain_core.tools import tool
 
-# Define the tools for the agent to use
-@tool
 def search(query: str):
     """Call to surf the web."""
-    # This is a placeholder, but don't tell the LLM that...
     if "sf" in query.lower() or "san francisco" in query.lower():
         return "It's 60 degrees and foggy."
     return "It's 90 degrees and sunny."
 
-
-tools = [search]
-model = ChatAnthropic(model="claude-3-5-sonnet-latest", temperature=0)
-
-# Initialize memory to persist state between graph runs
-checkpointer = MemorySaver()
-
-app = create_react_agent(model, tools, checkpointer=checkpointer)
-
-# Use the agent
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what is the weather in sf"}]},
-    config={"configurable": {"thread_id": 42}}
+agent = create_react_agent("anthropic:claude-3-7-sonnet-latest", tools=[search])
+agent.invoke(
+    {"messages": [{"role": "user", "content": "what is the weather in sf"}]}
 )
-final_state["messages"][-1].content
-```
-```
-"Based on the search results, I can tell you that the current weather in San Francisco is:\n\nTemperature: 60 degrees Fahrenheit\nConditions: Foggy\n\nSan Francisco is known for its microclimates and frequent fog, especially during the summer months. The temperature of 60°F (about 15.5°C) is quite typical for the city, which tends to have mild temperatures year-round. The fog, often referred to as "Karl the Fog" by locals, is a characteristic feature of San Francisco\'s weather, particularly in the mornings and evenings.\n\nIs there anything else you\'d like to know about the weather in San Francisco or any other location?"
 ```
 
-Now when we pass the same <code>"thread_id"</code>, the conversation context is retained via the saved state (i.e. stored list of messages)
+## Why use LangGraph?
 
-```python
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what about ny"}]},
-    config={"configurable": {"thread_id": 42}}
-)
-final_state["messages"][-1].content
-```
+LangGraph is built for developers who want to build powerful, adaptable AI agents. Developers choose LangGraph for:
 
-```
-"Based on the search results, I can tell you that the current weather in New York City is:\n\nTemperature: 90 degrees Fahrenheit (approximately 32.2 degrees Celsius)\nConditions: Sunny\n\nThis weather is quite different from what we just saw in San Francisco. New York is experiencing much warmer temperatures right now. Here are a few points to note:\n\n1. The temperature of 90°F is quite hot, typical of summer weather in New York City.\n2. The sunny conditions suggest clear skies, which is great for outdoor activities but also means it might feel even hotter due to direct sunlight.\n3. This kind of weather in New York often comes with high humidity, which can make it feel even warmer than the actual temperature suggests.\n\nIt's interesting to see the stark contrast between San Francisco's mild, foggy weather and New York's hot, sunny conditions. This difference illustrates how varied weather can be across different parts of the United States, even on the same day.\n\nIs there anything else you'd like to know about the weather in New York or any other location?"
-```
-</details>
+- **Reliability and controllability.** Steer agent actions with moderation checks and human-in-the-loop approvals. LangGraph persists context for long-running workflows, keeping your agents on course.
+- **Low-level and extensible.** Build custom agents with fully descriptive, low-level primitives – free from rigid abstractions that limit customization. Design scalable multi-agent systems, with each agent serving a specific role tailored to your use case.
+- **First-class streaming support.** With token-by-token streaming and streaming of intermediate steps, LangGraph gives users clear visibility into agent reasoning and actions as they unfold in real time.
 
-> [!TIP]
-> LangGraph is a **low-level** framework that allows you to implement any custom agent
-architectures. Click on the low-level implementation below to see how to implement a
-tool-calling agent from scratch.
+LangGraph is trusted in production and powering agents for companies like:
 
-<details>
-<summary>Low-level implementation</summary>
+- [Klarna](https://blog.langchain.dev/customers-klarna/): Customer support bot for 85 million active users
+- [Elastic](https://www.elastic.co/blog/elastic-security-generative-ai-features): Security AI assistant for threat detection
+- [Uber](https://dpe.org/sessions/ty-smith-adam-huda/this-year-in-ubers-ai-driven-developer-productivity-revolution/): Automated unit test generation
+- [Replit](https://www.langchain.com/breakoutagents/replit): Code generation
+- And many more ([see list here](https://www.langchain.com/built-with-langgraph))
 
-```python
-from typing import Literal
+## LangGraph’s ecosystem
 
-from langchain_anthropic import ChatAnthropic
-from langchain_core.tools import tool
-from langgraph.checkpoint.memory import MemorySaver
-from langgraph.graph import END, START, StateGraph, MessagesState
-from langgraph.prebuilt import ToolNode
+While LangGraph can be used standalone, it also integrates seamlessly with any LangChain product, giving developers a full suite of tools for building agents. To improve your LLM application development, pair LangGraph with:
 
+- [LangSmith](http://www.langchain.com/langsmith) — Helpful for agent evals and observability. Debug poor-performing LLM app runs, evaluate agent trajectories, gain visibility in production, and improve performance over time.
+- [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/#langgraph-platform) — Deploy and scale agents effortlessly with a purpose-built deployment platform for long running, stateful workflows. Discover, reuse, configure, and share agents across teams — and iterate quickly with visual prototyping in [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio/).
 
-# Define the tools for the agent to use
-@tool
-def search(query: str):
-    """Call to surf the web."""
-    # This is a placeholder, but don't tell the LLM that...
-    if "sf" in query.lower() or "san francisco" in query.lower():
-        return "It's 60 degrees and foggy."
-    return "It's 90 degrees and sunny."
+## Pairing with LangGraph Platform
 
+While LangGraph is our open-source agent orchestration framework, enterprises that need scalable agent deployment can benefit from [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/langgraph_platform/).
 
-tools = [search]
+LangGraph Platform can help engineering teams:
 
-tool_node = ToolNode(tools)
+- **Accelerate agent development**: Quickly create agent UXs with configurable templates and [LangGraph Studio](https://langchain-ai.github.io/langgraph/concepts/langgraph_studio/) for visualizing and debugging agent interactions.
+- **Deploy seamlessly**: We handle the complexity of deploying your agent. LangGraph Platform includes robust APIs for memory, threads, and cron jobs plus auto-scaling task queues & servers.
+- **Centralize agent management & reusability**: Discover, reuse, and manage agents across the organization. Business users can also modify agents without coding.
 
-model = ChatAnthropic(model="claude-3-5-sonnet-latest", temperature=0).bind_tools(tools)
+## Additional resources
 
-# Define the function that determines whether to continue or not
-def should_continue(state: MessagesState) -> Literal["tools", END]:
-    messages = state['messages']
-    last_message = messages[-1]
-    # If the LLM makes a tool call, then we route to the "tools" node
-    if last_message.tool_calls:
-        return "tools"
-    # Otherwise, we stop (reply to the user)
-    return END
+- [LangChain Academy](https://academy.langchain.com/courses/intro-to-langgraph): Learn the basics of LangGraph in our free, structured course.
+- [Tutorials](https://langchain-ai.github.io/langgraph/tutorials/): Simple walkthroughs with guided examples on getting started with LangGraph.
+- [Templates](https://langchain-ai.github.io/langgraph/concepts/template_applications/): Pre-built reference apps for common agentic workflows (e.g. ReAct agent, memory, retrieval etc.) that can be cloned and adapted.
+- [How-to Guides](https://langchain-ai.github.io/langgraph/how-tos/): Quick, actionable code snippets for topics such as streaming, adding memory & persistence, and design patterns (e.g. branching, subgraphs, etc.).
+- [API Reference](https://langchain-ai.github.io/langgraph/reference/graphs/): Detailed reference on core classes, methods, how to use the graph and checkpointing APIs, and higher-level prebuilt components.
+- [Built with LangGraph](https://www.langchain.com/built-with-langgraph): Hear how industry leaders use LangGraph to ship powerful, production-ready AI applications.
 
+## Acknowledgements
 
-# Define the function that calls the model
-def call_model(state: MessagesState):
-    messages = state['messages']
-    response = model.invoke(messages)
-    # We return a list, because this will get added to the existing list
-    return {"messages": [response]}
-
-
-# Define a new graph
-workflow = StateGraph(MessagesState)
-
-# Define the two nodes we will cycle between
-workflow.add_node("agent", call_model)
-workflow.add_node("tools", tool_node)
-
-# Set the entrypoint as `agent`
-# This means that this node is the first one called
-workflow.add_edge(START, "agent")
-
-# We now add a conditional edge
-workflow.add_conditional_edges(
-    # First, we define the start node. We use `agent`.
-    # This means these are the edges taken after the `agent` node is called.
-    "agent",
-    # Next, we pass in the function that will determine which node is called next.
-    should_continue,
-)
-
-# We now add a normal edge from `tools` to `agent`.
-# This means that after `tools` is called, `agent` node is called next.
-workflow.add_edge("tools", 'agent')
-
-# Initialize memory to persist state between graph runs
-checkpointer = MemorySaver()
-
-# Finally, we compile it!
-# This compiles it into a LangChain Runnable,
-# meaning you can use it as you would any other runnable.
-# Note that we're (optionally) passing the memory when compiling the graph
-app = workflow.compile(checkpointer=checkpointer)
-
-# Use the agent
-final_state = app.invoke(
-    {"messages": [{"role": "user", "content": "what is the weather in sf"}]},
-    config={"configurable": {"thread_id": 42}}
-)
-final_state["messages"][-1].content
-```
-
-<b>Step-by-step Breakdown</b>:
-
-<details>
-<summary>Initialize the model and tools.</summary>
-<ul>
-  <li>
-    We use <code>ChatAnthropic</code> as our LLM. <strong>NOTE:</strong> we need to make sure the model knows that it has these tools available to call. We can do this by converting the LangChain tools into the format for OpenAI tool calling using the <code>.bind_tools()</code> method.
-  </li>
-  <li>
-    We define the tools we want to use - a search tool in our case. It is really easy to create your own tools - see documentation here on how to do that <a href="https://python.langchain.com/docs/how_to/custom_tools/">here</a>.
-  </li>
-</ul>
-</details>
-
-<details>
-<summary>Initialize graph with state.</summary>
-
-<ul>
-    <li>We initialize graph (<code>StateGraph</code>) by passing state schema (in our case <code>MessagesState</code>)</li>
-    <li><code>MessagesState</code> is a prebuilt state schema that has one attribute -- a list of LangChain <code>Message</code> objects, as well as logic for merging the updates from each node into the state.</li>
-</ul>
-</details>
-
-<details>
-<summary>Define graph nodes.</summary>
-
-There are two main nodes we need:
-
-<ul>
-    <li>The <code>agent</code> node: responsible for deciding what (if any) actions to take.</li>
-    <li>The <code>tools</code> node that invokes tools: if the agent decides to take an action, this node will then execute that action.</li>
-</ul>
-</details>
-
-<details>
-<summary>Define entry point and graph edges.</summary>
-
-First, we need to set the entry point for graph execution - <code>agent</code> node.
-
-Then we define one normal and one conditional edge. Conditional edge means that the destination depends on the contents of the graph's state (<code>MessagesState</code>). In our case, the destination is not known until the agent (LLM) decides.
-
-<ul>
-  <li>Conditional edge: after the agent is called, we should either:
-    <ul>
-      <li>a. Run tools if the agent said to take an action, OR</li>
-      <li>b. Finish (respond to the user) if the agent did not ask to run tools</li>
-    </ul>
-  </li>
-  <li>Normal edge: after the tools are invoked, the graph should always return to the agent to decide what to do next</li>
-</ul>
-</details>
-
-<details>
-<summary>Compile the graph.</summary>
-
-<ul>
-  <li>
-    When we compile the graph, we turn it into a LangChain 
-    <a href="https://python.langchain.com/docs/concepts/runnables/">Runnable</a>, 
-    which automatically enables calling <code>.invoke()</code>, <code>.stream()</code> and <code>.batch()</code> 
-    with your inputs
-  </li>
-  <li>
-    We can also optionally pass checkpointer object for persisting state between graph runs, and enabling memory, 
-    human-in-the-loop workflows, time travel and more. In our case we use <code>MemorySaver</code> - 
-    a simple in-memory checkpointer
-  </li>
-</ul>
-</details>
-
-<details>
-<summary>Execute the graph.</summary>
-
-<ol>
-  <li>LangGraph adds the input message to the internal state, then passes the state to the entrypoint node, <code>"agent"</code>.</li>
-  <li>The <code>"agent"</code> node executes, invoking the chat model.</li>
-  <li>The chat model returns an <code>AIMessage</code>. LangGraph adds this to the state.</li>
-  <li>Graph cycles the following steps until there are no more <code>tool_calls</code> on <code>AIMessage</code>:
-    <ul>
-      <li>If <code>AIMessage</code> has <code>tool_calls</code>, <code>"tools"</code> node executes</li>
-      <li>The <code>"agent"</code> node executes again and returns <code>AIMessage</code></li>
-    </ul>
-  </li>
-  <li>Execution progresses to the special <code>END</code> value and outputs the final state. And as a result, we get a list of all our chat messages as output.</li>
-</ol>
-</details>
-
-</details>
-
-## Documentation
-
-* [Tutorials](https://langchain-ai.github.io/langgraph/tutorials/): Learn to build with LangGraph through guided examples.
-* [How-to Guides](https://langchain-ai.github.io/langgraph/how-tos/): Accomplish specific things within LangGraph, from streaming, to adding memory & persistence, to common design patterns (branching, subgraphs, etc.), these are the place to go if you want to copy and run a specific code snippet.
-* [Conceptual Guides](https://langchain-ai.github.io/langgraph/concepts/high_level/): In-depth explanations of the key concepts and principles behind LangGraph, such as nodes, edges, state and more.
-* [API Reference](https://langchain-ai.github.io/langgraph/reference/graphs/): Review important classes and methods, simple examples of how to use the graph and checkpointing APIs, higher-level prebuilt components and more.
-* [LangGraph Platform](https://langchain-ai.github.io/langgraph/concepts/#langgraph-platform): LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework.
-
-## Resources
-
-* [Built with LangGraph](https://www.langchain.com/built-with-langgraph): Hear how industry leaders use LangGraph to ship powerful, production-ready AI applications.
-
-## Contributing
-
-For more information on how to contribute, see [here](https://github.com/langchain-ai/langgraph/blob/main/CONTRIBUTING.md).
+LangGraph is inspired by [Pregel](https://research.google/pubs/pub37252/) and [Apache Beam](https://beam.apache.org/). The public interface draws inspiration from [NetworkX](https://networkx.org/documentation/latest/). LangGraph is built by LangChain Inc, the creators of LangChain, but can be used without LangChain.

libs/langgraph/langgraph/graph/state.py

@@ -760,23 +760,22 @@ class CompiledStateGraph(CompiledGraph):
                         updates.extend(_get_updates(i) or ())
                 return updates
             elif get_type_hints(type(input)):
-                # if input is a Pydantic model, only update values
-                # for the keys that have been explicitly set by the users
-                # (this is needed to avoid sending updates for fields with None defaults)
-                output_keys_ = output_keys
                 # Pydantic v2
-                if hasattr(input, "model_fields_set"):
-                    output_keys_ = [
-                        k for k in output_keys if k in input.model_fields_set
-                    ]
+                if hasattr(input, "model_fields"):
+                    defaults = {k: v.default for k, v in input.model_fields.items()}
                 # Pydantic v1
-                elif hasattr(input, "__fields_set__"):
-                    output_keys_ = [k for k in output_keys if k in input.__fields_set__]
+                elif hasattr(input, "__fields__"):
+                    defaults = {k: v.default for k, v in input.__fields__.items()}
+                else:
+                    defaults = {}
 
+                # if input is a Pydantic model, only update values
+                # that are different from the default values
                 return [
-                    (k, getattr(input, k))
-                    for k in output_keys_
-                    if getattr(input, k, MISSING) is not MISSING
+                    (k, value)
+                    for k in output_keys
+                    if (value := getattr(input, k, MISSING)) is not MISSING
+                    and value != defaults.get(k)
                 ]
             else:
                 msg = create_error_message(

libs/langgraph/langgraph/utils/config.py

@@ -1,4 +1,5 @@
 from collections import ChainMap
+from os import getenv
 from typing import Any, Optional, Sequence, cast
 
 from langchain_core.callbacks import (
@@ -11,7 +12,6 @@ from langchain_core.runnables import RunnableConfig
 from langchain_core.runnables.config import (
     CONFIG_KEYS,
     COPIABLE_KEYS,
-    DEFAULT_RECURSION_LIMIT,
     var_child_runnable_config,
 )
 
@@ -26,6 +26,8 @@ from langgraph.constants import (
     NS_SEP,
 )
 
+DEFAULT_RECURSION_LIMIT = int(getenv("LANGGRAPH_DEFAULT_RECURSION_LIMIT", "25"))
+
 
 def recast_checkpoint_ns(ns: str) -> str:
     """Remove task IDs from checkpoint namespace.

libs/langgraph/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langgraph"
-version = "0.3.7"
+version = "0.3.8"
 description = "Building stateful, multi-actor applications with LLMs"
 authors = []
 license = "MIT"

libs/langgraph/tests/test_pregel.py

@@ -6658,6 +6658,40 @@ def test_pydantic_none_state_update() -> None:
     assert graph.invoke({"foo": ""}) == {"foo": None}
 
 
+def test_pydantic_state_mutation() -> None:
+    from pydantic import BaseModel, Field
+
+    class Inner(BaseModel):
+        a: int = 0
+
+    class State(BaseModel):
+        inner: Inner = Inner()
+        outer: int = 0
+
+    def my_node(state: State) -> State:
+        state.inner.a = 5
+        state.outer = 10
+        return state
+
+    graph = StateGraph(State).add_node(my_node).add_edge(START, "my_node").compile()
+
+    assert graph.invoke({"outer": 1}) == {"outer": 10, "inner": Inner(a=5)}
+
+    # test w/ default_factory
+    class State(BaseModel):
+        inner: Inner = Field(default_factory=Inner)
+        outer: int = 0
+
+    def my_node(state: State) -> State:
+        state.inner.a = 5
+        state.outer = 10
+        return state
+
+    graph = StateGraph(State).add_node(my_node).add_edge(START, "my_node").compile()
+
+    assert graph.invoke({"outer": 1}) == {"outer": 10, "inner": Inner(a=5)}
+
+
 def test_get_stream_writer() -> None:
     class State(TypedDict):
         foo: str

libs/prebuilt/langgraph/prebuilt/chat_agent_executor.py

@@ -257,7 +257,7 @@ def _validate_chat_history(
 @_convert_modifier_to_prompt
 def create_react_agent(
     model: Union[str, LanguageModelLike],
-    tools: Union[Sequence[BaseTool], ToolNode],
+    tools: Union[Sequence[Union[BaseTool, Callable]], ToolNode],
     *,
     prompt: Optional[Prompt] = None,
     response_format: Optional[
@@ -859,4 +859,7 @@ __all__ = [
     "create_react_agent",
     "create_tool_calling_executor",
     "AgentState",
+    "AgentStatePydantic",
+    "AgentStateWithStructuredResponse",
+    "AgentStateWithStructuredResponsePydantic",
 ]

libs/prebuilt/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langgraph-prebuilt"
-version = "0.1.2"
+version = "0.1.3"
 description = "Library with high-level APIs for creating and executing LangGraph agents and tools."
 authors = []
 license = "MIT"

libs/sdk-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-sdk",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "Client library for interacting with the LangGraph API",
   "type": "module",
   "packageManager": "yarn@1.22.19",

libs/sdk-js/src/react-ui/client.tsx

@@ -115,6 +115,9 @@ interface LoadExternalComponentProps
   /** Stream of the assistant */
   stream: ReturnType<typeof useStream>;
 
+  /** Namespace of UI components. Defaults to assistant ID. */
+  namespace?: string;
+
   /** UI message to be rendered */
   message: UIMessage;
 
@@ -133,6 +136,7 @@ interface LoadExternalComponentProps
 
 export function LoadExternalComponent({
   stream,
+  namespace,
   message,
   meta,
   fallback,
@@ -152,10 +156,11 @@ export function LoadExternalComponent({
   const clientComponent = components?.[message.name];
   const hasClientComponent = clientComponent != null;
 
+  const uiNamespace = namespace ?? stream.assistantId;
   const uiClient = stream.client["~ui"];
   React.useEffect(() => {
     if (hasClientComponent) return;
-    uiClient.getComponent(stream.assistantId, message.name).then((html) => {
+    uiClient.getComponent(uiNamespace, message.name).then((html) => {
       const dom = ref.current;
       if (!dom) return;
       const root = dom.shadowRoot ?? dom.attachShadow({ mode: "open" });
@@ -166,13 +171,7 @@ export function LoadExternalComponent({
         );
       root.appendChild(fragment);
     });
-  }, [
-    uiClient,
-    stream.assistantId,
-    message.name,
-    shadowRootId,
-    hasClientComponent,
-  ]);
+  }, [uiClient, uiNamespace, message.name, shadowRootId, hasClientComponent]);
 
   if (hasClientComponent) {
     return React.createElement(clientComponent, message.props);