diff --git a/docs/docs/cloud/how-tos/use_stream_react.md b/docs/docs/cloud/how-tos/use_stream_react.md
new file mode 100644
index 000000000..89fd8482a
--- /dev/null
+++ b/docs/docs/cloud/how-tos/use_stream_react.md
@@ -0,0 +1,410 @@
+# How to integrate LangGraph into your React application
+
+!!! info "Prerequisites"
+ - [LangGraph Platform](../../concepts/langgraph_platform.md)
+ - [LangGraph Server](../../concepts/langgraph_server.md)
+
+The `useStream()` React hook provides a seamless way to integrate LangGraph into your React applications. It handles all the complexities of streaming, state management, and branching logic, letting you focus on building great chat experiences.
+
+Key features:
+
+- Messages streaming: Handle a stream of message chunks to form a complete message
+- Automatic state management for messages, loading states, and errors
+- Conversation branching: Create alternate conversation paths from any point in the chat history
+- UI-agnostic design - bring your own components and styling
+
+Let's explore how to use `useStream()` in your React application.
+
+The `useStream()` provides a solid foundation for creating bespoke chat experiences. For pre-built chat components and interfaces, we recommend checking out [CopilotKit](https://docs.copilotkit.ai/coagents/quickstart/langgraph) and [assistant-ui](https://github.com/langchain-ai/assistant-ui).
+
+## Example
+
+```tsx
+"use client";
+
+import { useStream } from "@langchain/langgraph-sdk/react";
+import type { Message } from "@langchain/langgraph-sdk";
+
+export default function App() {
+ const thread = useStream<{ messages: Message[] }>({
+ apiUrl: "http://localhost:2024",
+ assistantId: "agent",
+ messagesKey: "messages",
+ });
+
+ return (
+
+
+ {thread.messages.map((message) => (
+
{message.content as string}
+ ))}
+
+
+
+
+ );
+}
+```
+
+## Customizing Your UI
+
+The `useStream()` hook takes care of all the complex state management behind the scenes, providing you with simple interfaces to build your UI. Here's what you get out of the box:
+
+- Thread state management
+- Loading and error states
+- Message handling and updates
+- Branching support
+
+Here are some examples on how to use these features effectively:
+
+### Loading States
+
+The `isLoading` property tells you when a stream is active, enabling you to:
+
+- Show a loading indicator
+- Disable input fields during processing
+- Display a cancel button
+
+```tsx
+export default function App() {
+ const { isLoading, stop } = useStream<{ messages: Message[] }>({
+ apiUrl: "http://localhost:2024",
+ assistantId: "agent",
+ messagesKey: "messages",
+ });
+
+ return (
+
+ );
+}
+```
+
+### Thread Management
+
+Keep track of conversations with built-in thread management. You can access the current thread ID and get notified when new threads are created:
+
+```tsx
+const [threadId, setThreadId] = useState(null);
+
+const thread = useStream<{ messages: Message[] }>({
+ apiUrl: "http://localhost:2024",
+ assistantId: "agent",
+
+ threadId: threadId,
+ onThreadId: setThreadId,
+});
+```
+
+We recommend storing the `threadId` in your URL's query parameters to let users resume conversations after page refreshes.
+
+### Messages Handling
+
+To enable messages handling, you need to pass the `messagesKey` option to the `useStream()` hook.
+
+When enabled, the `useStream()` hook will keep track of the message chunks received from the server and concatenate them together to form a complete message. The completed message chunks can be retrieved via the `messages` property.
+
+```tsx
+import type { Message } from "@langchain/langgraph-sdk";
+import { useStream } from "@langchain/langgraph-sdk/react";
+
+export default function HomePage() {
+ const thread = useStream<{ messages: Message[] }>({
+ apiUrl: "http://localhost:2024",
+ assistantId: "agent",
+ messagesKey: "messages",
+ });
+
+ return (
+
+ {thread.messages.map((message) => (
+
{message.content as string}
+ ))}
+
+ );
+}
+```
+
+### Branching Support
+
+To enable branching, you need to enable messages handling. Pass the `messagesKey` option to the `useStream()` hook. For each message, you can use `getMessagesMetadata()` to get the first checkpoint from which the message has been first seen. You can then create a new run from the checkpoint preceding the first seen checkpoint to create a new branch in a thread.
+
+A branch can be created in following ways:
+
+1. Edit a previous user message.
+2. Request a regeneration of a previous assistant message.
+
+```tsx
+/* eslint-disable @typescript-eslint/no-floating-promises */
+"use client";
+
+import type { Message } from "@langchain/langgraph-sdk";
+import { useStream } from "@langchain/langgraph-sdk/react";
+import {
+ Annotation,
+ MessagesAnnotation,
+ type StateType,
+ type UpdateType,
+} from "@langchain/langgraph/web";
+import { useState } from "react";
+
+const AgentState = Annotation.Root({
+ ...MessagesAnnotation.spec,
+});
+
+function BranchSwitcher({
+ branch,
+ branchOptions,
+ onSelect,
+}: {
+ branch: string | undefined;
+ branchOptions: string[] | undefined;
+ onSelect: (branch: string) => void;
+}) {
+ if (!branchOptions || !branch) return null;
+ const index = branchOptions.indexOf(branch);
+
+ return (
+