diff --git a/examples/ui-angular/.gitignore b/examples/ui-angular/.gitignore
new file mode 100644
index 000000000..70a919d32
--- /dev/null
+++ b/examples/ui-angular/.gitignore
@@ -0,0 +1,46 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
+
+# LangGraph API
+.langgraph_api
diff --git a/examples/ui-angular/angular.json b/examples/ui-angular/angular.json
new file mode 100644
index 000000000..6d953eac3
--- /dev/null
+++ b/examples/ui-angular/angular.json
@@ -0,0 +1,97 @@
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "example-angular": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example-angular:build:production"
+            },
+            "development": {
+              "buildTarget": "example-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "cache": {
+      "enabled": false
+    }
+  }
+}
diff --git a/examples/ui-angular/langgraph.json b/examples/ui-angular/langgraph.json
new file mode 100644
index 000000000..9d46f4d1a
--- /dev/null
+++ b/examples/ui-angular/langgraph.json
@@ -0,0 +1,7 @@
+{
+  "node_version": "22",
+  "graphs": {
+    "agent": "./src/agent.mts:graph"
+  },
+  "env": ".env"
+}
\ No newline at end of file
diff --git a/examples/ui-angular/package.json b/examples/ui-angular/package.json
new file mode 100644
index 000000000..e466551d6
--- /dev/null
+++ b/examples/ui-angular/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@examples/ui-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "turbo dev:client dev:server",
+    "dev:client": "ng serve",
+    "dev:server": "langgraphjs dev --no-browser",
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "format": "prettier --write src",
+    "lint": "prettier --check src"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/compiler": "^20.3.0",
+    "@angular/core": "^20.3.0",
+    "@angular/forms": "^20.3.0",
+    "@angular/platform-browser": "^20.3.0",
+    "@angular/router": "^20.3.0",
+    "@langchain/angular": "workspace:*",
+    "@langchain/core": "^1.0.1",
+    "@langchain/langgraph": "workspace:*",
+    "@langchain/langgraph-sdk": "workspace:*",
+    "@langchain/openai": "^1.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zod": "^3.23.8",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.3.9",
+    "@angular/cli": "^20.3.9",
+    "@angular/compiler-cli": "^20.3.0",
+    "typescript": "~5.9.2"
+  }
+}
diff --git a/examples/ui-angular/src/agent.mts b/examples/ui-angular/src/agent.mts
new file mode 100644
index 000000000..9c32613a6
--- /dev/null
+++ b/examples/ui-angular/src/agent.mts
@@ -0,0 +1,18 @@
+import type { BaseMessage } from "@langchain/core/messages";
+import { StateGraph, MessagesZodMeta, START } from "@langchain/langgraph";
+import { registry } from "@langchain/langgraph/zod";
+import { ChatOpenAI } from "@langchain/openai";
+import { z } from "zod/v4";
+
+const llm = new ChatOpenAI({ model: "gpt-4o-mini" });
+
+const schema = z.object({
+  messages: z.custom<BaseMessage[]>().register(registry, MessagesZodMeta),
+});
+
+export const graph = new StateGraph(schema)
+  .addNode("agent", async ({ messages }) => ({
+    messages: await llm.invoke(messages),
+  }))
+  .addEdge(START, "agent")
+  .compile();
diff --git a/examples/ui-angular/src/app.ts b/examples/ui-angular/src/app.ts
new file mode 100644
index 000000000..4982ba2d5
--- /dev/null
+++ b/examples/ui-angular/src/app.ts
@@ -0,0 +1,47 @@
+import { Component, signal } from '@angular/core';
+import { useStream } from '@langchain/angular';
+import { FormsModule } from '@angular/forms';
+import type { Message } from '@langchain/langgraph-sdk';
+
+@Component({
+  selector: 'app-root',
+  imports: [FormsModule],
+  template: `
+    <main class="main">
+      <div>
+        @for (message of stream.messages(); track message.id) {
+        <div>{{ message.content }}</div>
+        }
+      </div>
+
+      <form (ngSubmit)="onSubmit()">
+        <input type="text" [(ngModel)]="message" name="message" />
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+  `,
+})
+export class App {
+  protected message = signal('');
+
+  protected stream = useStream({
+    assistantId: 'agent',
+    apiUrl: 'http://localhost:2024',
+  });
+
+  protected onSubmit() {
+    const newMessage = { content: this.message(), type: 'human' };
+    this.stream.submit(
+      { messages: [newMessage] },
+      {
+        optimisticValues: (prev) => ({
+          ...prev,
+          messages: [...((prev['messages'] ?? []) as Message[]), newMessage],
+        }),
+      }
+    );
+
+    // reset form
+    this.message.set('');
+  }
+}
diff --git a/examples/ui-angular/src/index.html b/examples/ui-angular/src/index.html
new file mode 100644
index 000000000..7ce9f53eb
--- /dev/null
+++ b/examples/ui-angular/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ExampleAngular</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/examples/ui-angular/src/main.ts b/examples/ui-angular/src/main.ts
new file mode 100644
index 000000000..cb8ac1f3e
--- /dev/null
+++ b/examples/ui-angular/src/main.ts
@@ -0,0 +1,10 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { App } from './app';
+
+bootstrapApplication(App, {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+  ],
+}).catch((err) => console.error(err));
diff --git a/examples/ui-angular/src/styles.css b/examples/ui-angular/src/styles.css
new file mode 100644
index 000000000..90d4ee007
--- /dev/null
+++ b/examples/ui-angular/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/examples/ui-angular/tsconfig.app.json b/examples/ui-angular/tsconfig.app.json
new file mode 100644
index 000000000..264f459bf
--- /dev/null
+++ b/examples/ui-angular/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}
diff --git a/examples/ui-angular/tsconfig.json b/examples/ui-angular/tsconfig.json
new file mode 100644
index 000000000..e4955f26b
--- /dev/null
+++ b/examples/ui-angular/tsconfig.json
@@ -0,0 +1,34 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/examples/ui-angular/tsconfig.spec.json b/examples/ui-angular/tsconfig.spec.json
new file mode 100644
index 000000000..04df34cfe
--- /dev/null
+++ b/examples/ui-angular/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}
diff --git a/examples/ui-angular/turbo.json b/examples/ui-angular/turbo.json
new file mode 100644
index 000000000..27d8fc09c
--- /dev/null
+++ b/examples/ui-angular/turbo.json
@@ -0,0 +1,28 @@
+{
+  "extends": [
+    "//"
+  ],
+  "tasks": {
+    "build": {
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "build:internal": {
+      "dependsOn": [
+        "^build:internal"
+      ],
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "dev:client": {
+      "cache": false,
+      "persistent": true
+    },
+    "dev:server": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/ui-svelte/.gitignore b/examples/ui-svelte/.gitignore
new file mode 100644
index 000000000..5a23824c2
--- /dev/null
+++ b/examples/ui-svelte/.gitignore
@@ -0,0 +1,3 @@
+
+# LangGraph API
+.langgraph_api
diff --git a/examples/ui-svelte/index.html b/examples/ui-svelte/index.html
new file mode 100644
index 000000000..b5b125269
--- /dev/null
+++ b/examples/ui-svelte/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/ui-svelte/langgraph.json b/examples/ui-svelte/langgraph.json
new file mode 100644
index 000000000..9d46f4d1a
--- /dev/null
+++ b/examples/ui-svelte/langgraph.json
@@ -0,0 +1,7 @@
+{
+  "node_version": "22",
+  "graphs": {
+    "agent": "./src/agent.mts:graph"
+  },
+  "env": ".env"
+}
\ No newline at end of file
diff --git a/examples/ui-svelte/package.json b/examples/ui-svelte/package.json
new file mode 100644
index 000000000..d18e93434
--- /dev/null
+++ b/examples/ui-svelte/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@examples/ui-svelte",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "turbo dev:client dev:server",
+    "dev:client": "vite",
+    "dev:server": "langgraphjs dev --no-browser",
+    "build:internal": "vite build",
+    "format": "prettier --write src",
+    "lint": "prettier --check src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@langchain/core": "^1.0.1",
+    "@langchain/langgraph": "workspace:*",
+    "@langchain/langgraph-sdk": "workspace:*",
+    "@langchain/openai": "^1.0.0",
+    "@langchain/svelte": "workspace:*",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@langchain/langgraph-cli": "workspace:*",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "prettier": "^2.8.3",
+    "svelte": "^5.43.5",
+    "tsx": "^4.19.3",
+    "typescript": "^5.4.5",
+    "vite": "^7.0.0"
+  }
+}
diff --git a/examples/ui-svelte/src/App.svelte b/examples/ui-svelte/src/App.svelte
new file mode 100644
index 000000000..847e9e2ce
--- /dev/null
+++ b/examples/ui-svelte/src/App.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Message } from "@langchain/langgraph-sdk";
+  import { useStream } from "@langchain/svelte";
+
+  const { messages, submit } = useStream({
+    assistantId: "agent",
+    apiUrl: "http://localhost:2024",
+  });
+
+  let content = $state("");
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+
+    submit(
+      { messages: [{ content, type: "human" }] },
+      {
+        optimisticValues: (prev) => ({
+          ...prev,
+          messages: [
+            ...((prev.messages ?? []) as Message[]),
+            { content, type: "human" },
+          ],
+        }),
+      }
+    );
+  }
+</script>
+
+<main>
+  <h1>Vite + Svelte</h1>
+
+  <div>
+    {#each $messages as message}
+      <div>{message.content}</div>
+    {/each}
+
+    <form onsubmit={handleSubmit}>
+      <textarea name="content" bind:value={content}></textarea>
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</main>
diff --git a/examples/ui-svelte/src/agent.mts b/examples/ui-svelte/src/agent.mts
new file mode 100644
index 000000000..9c32613a6
--- /dev/null
+++ b/examples/ui-svelte/src/agent.mts
@@ -0,0 +1,18 @@
+import type { BaseMessage } from "@langchain/core/messages";
+import { StateGraph, MessagesZodMeta, START } from "@langchain/langgraph";
+import { registry } from "@langchain/langgraph/zod";
+import { ChatOpenAI } from "@langchain/openai";
+import { z } from "zod/v4";
+
+const llm = new ChatOpenAI({ model: "gpt-4o-mini" });
+
+const schema = z.object({
+  messages: z.custom<BaseMessage[]>().register(registry, MessagesZodMeta),
+});
+
+export const graph = new StateGraph(schema)
+  .addNode("agent", async ({ messages }) => ({
+    messages: await llm.invoke(messages),
+  }))
+  .addEdge(START, "agent")
+  .compile();
diff --git a/examples/ui-svelte/src/main.ts b/examples/ui-svelte/src/main.ts
new file mode 100644
index 000000000..a319f9065
--- /dev/null
+++ b/examples/ui-svelte/src/main.ts
@@ -0,0 +1,8 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app")!,
+});
+
+export default app;
diff --git a/examples/ui-svelte/svelte.config.js b/examples/ui-svelte/svelte.config.js
new file mode 100644
index 000000000..96b345548
--- /dev/null
+++ b/examples/ui-svelte/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
diff --git a/examples/ui-svelte/tsconfig.app.json b/examples/ui-svelte/tsconfig.app.json
new file mode 100644
index 000000000..227a6c672
--- /dev/null
+++ b/examples/ui-svelte/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/ui-svelte/tsconfig.json b/examples/ui-svelte/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/examples/ui-svelte/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/examples/ui-svelte/tsconfig.node.json b/examples/ui-svelte/tsconfig.node.json
new file mode 100644
index 000000000..f85a39906
--- /dev/null
+++ b/examples/ui-svelte/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/ui-svelte/turbo.json b/examples/ui-svelte/turbo.json
new file mode 100644
index 000000000..27d8fc09c
--- /dev/null
+++ b/examples/ui-svelte/turbo.json
@@ -0,0 +1,28 @@
+{
+  "extends": [
+    "//"
+  ],
+  "tasks": {
+    "build": {
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "build:internal": {
+      "dependsOn": [
+        "^build:internal"
+      ],
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "dev:client": {
+      "cache": false,
+      "persistent": true
+    },
+    "dev:server": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/ui-svelte/vite.config.ts b/examples/ui-svelte/vite.config.ts
new file mode 100644
index 000000000..7e6817b8b
--- /dev/null
+++ b/examples/ui-svelte/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  clearScreen: false,
+});
diff --git a/examples/ui-vue/.gitignore b/examples/ui-vue/.gitignore
new file mode 100644
index 000000000..5a23824c2
--- /dev/null
+++ b/examples/ui-vue/.gitignore
@@ -0,0 +1,3 @@
+
+# LangGraph API
+.langgraph_api
diff --git a/examples/ui-vue/index.html b/examples/ui-vue/index.html
new file mode 100644
index 000000000..143557b52
--- /dev/null
+++ b/examples/ui-vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/ui-vue/langgraph.json b/examples/ui-vue/langgraph.json
new file mode 100644
index 000000000..9d46f4d1a
--- /dev/null
+++ b/examples/ui-vue/langgraph.json
@@ -0,0 +1,7 @@
+{
+  "node_version": "22",
+  "graphs": {
+    "agent": "./src/agent.mts:graph"
+  },
+  "env": ".env"
+}
\ No newline at end of file
diff --git a/examples/ui-vue/package.json b/examples/ui-vue/package.json
new file mode 100644
index 000000000..be00f3fc7
--- /dev/null
+++ b/examples/ui-vue/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@examples/ui-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "turbo dev:client dev:server",
+    "dev:client": "vite",
+    "dev:server": "langgraphjs dev --no-browser",
+    "build:internal": "vite build",
+    "format": "prettier --write src",
+    "lint": "prettier --check src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@langchain/core": "^1.0.1",
+    "@langchain/langgraph": "workspace:*",
+    "@langchain/langgraph-sdk": "workspace:*",
+    "@langchain/openai": "^1.0.0",
+    "@langchain/vue": "workspace:*",
+    "vue": "^3.5.24",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@langchain/langgraph-cli": "workspace:*",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "prettier": "^2.8.3",
+    "tsx": "^4.19.3",
+    "typescript": "^5.4.5",
+    "vite": "^7.0.0"
+  }
+}
diff --git a/examples/ui-vue/src/App.vue b/examples/ui-vue/src/App.vue
new file mode 100644
index 000000000..9f44477a2
--- /dev/null
+++ b/examples/ui-vue/src/App.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Message } from "@langchain/langgraph-sdk";
+import { useStream } from "@langchain/vue";
+import { ref } from "vue";
+
+const input = ref("");
+const { messages, submit } = useStream({
+  assistantId: "agent",
+  apiUrl: "http://localhost:2024",
+});
+
+function handleSubmit() {
+  const newMessage = { content: input.value, type: "human" };
+
+  submit(
+    { messages: [newMessage] },
+    {
+      optimisticValues: (prev) => ({
+        ...prev,
+        messages: [...((prev.messages ?? []) as Message[]), newMessage],
+      }),
+    }
+  );
+  input.value = "";
+}
+</script>
+
+<template>
+  <div v-for="message in messages">
+    {{ message.content }}
+  </div>
+
+  <form @submit.prevent="handleSubmit">
+    <textarea v-model="input" />
+    <button type="submit">Submit</button>
+  </form>
+</template>
diff --git a/examples/ui-vue/src/agent.mts b/examples/ui-vue/src/agent.mts
new file mode 100644
index 000000000..9c32613a6
--- /dev/null
+++ b/examples/ui-vue/src/agent.mts
@@ -0,0 +1,18 @@
+import type { BaseMessage } from "@langchain/core/messages";
+import { StateGraph, MessagesZodMeta, START } from "@langchain/langgraph";
+import { registry } from "@langchain/langgraph/zod";
+import { ChatOpenAI } from "@langchain/openai";
+import { z } from "zod/v4";
+
+const llm = new ChatOpenAI({ model: "gpt-4o-mini" });
+
+const schema = z.object({
+  messages: z.custom<BaseMessage[]>().register(registry, MessagesZodMeta),
+});
+
+export const graph = new StateGraph(schema)
+  .addNode("agent", async ({ messages }) => ({
+    messages: await llm.invoke(messages),
+  }))
+  .addEdge(START, "agent")
+  .compile();
diff --git a/examples/ui-vue/src/main.ts b/examples/ui-vue/src/main.ts
new file mode 100644
index 000000000..b670de8b8
--- /dev/null
+++ b/examples/ui-vue/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/examples/ui-vue/tsconfig.app.json b/examples/ui-vue/tsconfig.app.json
new file mode 100644
index 000000000..227a6c672
--- /dev/null
+++ b/examples/ui-vue/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/ui-vue/tsconfig.json b/examples/ui-vue/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/examples/ui-vue/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/examples/ui-vue/tsconfig.node.json b/examples/ui-vue/tsconfig.node.json
new file mode 100644
index 000000000..f85a39906
--- /dev/null
+++ b/examples/ui-vue/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/ui-vue/turbo.json b/examples/ui-vue/turbo.json
new file mode 100644
index 000000000..27d8fc09c
--- /dev/null
+++ b/examples/ui-vue/turbo.json
@@ -0,0 +1,28 @@
+{
+  "extends": [
+    "//"
+  ],
+  "tasks": {
+    "build": {
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "build:internal": {
+      "dependsOn": [
+        "^build:internal"
+      ],
+      "outputs": [
+        "**/dist/**"
+      ]
+    },
+    "dev:client": {
+      "cache": false,
+      "persistent": true
+    },
+    "dev:server": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/ui-vue/vite.config.ts b/examples/ui-vue/vite.config.ts
new file mode 100644
index 000000000..d67535508
--- /dev/null
+++ b/examples/ui-vue/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  clearScreen: false,
+});
diff --git a/libs/sdk-angular/.eslintrc.cjs b/libs/sdk-angular/.eslintrc.cjs
new file mode 100644
index 000000000..ca5b3d5d6
--- /dev/null
+++ b/libs/sdk-angular/.eslintrc.cjs
@@ -0,0 +1,81 @@
+module.exports = {
+  extends: [
+    "airbnb-base",
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    parser: "@typescript-eslint/parser",
+    project: "./tsconfig.json",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "no-instanceof"],
+  ignorePatterns: [
+    ".eslintrc.cjs",
+    "scripts",
+    "node_modules",
+    "dist",
+    "dist-cjs",
+    "*.js",
+    "*.cjs",
+    "*.d.ts",
+  ],
+  rules: {
+    "no-process-env": 2,
+    "no-instanceof/no-instanceof": 2,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-shadow": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-use-before-define": ["error", "nofunc"],
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "arrow-body-style": 0,
+    camelcase: 0,
+    "class-methods-use-this": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "import/no-extraneous-dependencies": [
+      "error",
+      { devDependencies: ["**/*.test.ts", "**/*.test-d.ts"] },
+    ],
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0,
+    "keyword-spacing": "error",
+    "max-classes-per-file": 0,
+    "max-len": 0,
+    "no-await-in-loop": 0,
+    "no-bitwise": 0,
+    "no-console": 0,
+    "no-empty-function": 0,
+    "no-restricted-syntax": 0,
+    "no-shadow": 0,
+    "no-continue": 0,
+    "no-void": 0,
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0,
+    "no-useless-constructor": 0,
+    "no-return-await": 0,
+    "consistent-return": 0,
+    "no-else-return": 0,
+    "func-names": 0,
+    "no-lonely-if": 0,
+    "prefer-rest-params": 0,
+    "prefer-const": ["error", {
+      "destructuring": "all",
+      "ignoreReadBeforeAssign": false
+    }],
+    "new-cap": ["error", { properties: false, capIsNew: false }],
+  },
+  overrides: [
+    {
+      files: ["src/tests/**/*.ts"],
+      rules: {
+        "no-instanceof/no-instanceof": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+      },
+    },
+  ],
+};
diff --git a/libs/sdk-angular/LICENSE b/libs/sdk-angular/LICENSE
new file mode 100644
index 000000000..771f1479b
--- /dev/null
+++ b/libs/sdk-angular/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LangChain, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/libs/sdk-angular/README.md b/libs/sdk-angular/README.md
new file mode 100644
index 000000000..dc0c73960
--- /dev/null
+++ b/libs/sdk-angular/README.md
@@ -0,0 +1,3 @@
+# @langchain/angular
+
+This package contains the Angular integration for LangGraph.
diff --git a/libs/sdk-angular/package.json b/libs/sdk-angular/package.json
new file mode 100644
index 000000000..2af8656ac
--- /dev/null
+++ b/libs/sdk-angular/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@langchain/angular",
+  "version": "0.0.1",
+  "description": "Angular integration for LangGraph & LangChain",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist/ dist-cjs/",
+    "build": "yarn turbo:command build:internal --filter=@langchain/angular",
+    "build:internal": "yarn workspace @langchain/build compile @langchain/angular",
+    "prepublish": "yarn build",
+    "format:check": "prettier --check src",
+    "format": "prettier --write src",
+    "lint:eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --cache --ext .ts,.js,.jsx,.tsx src/",
+    "lint": "yarn lint:eslint",
+    "lint:fix": "yarn lint:eslint --fix",
+    "test": "vitest run"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@langchain/langgraph-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@angular/core": "^20.3.10",
+    "@langchain/core": "^1.0.1",
+    "@langchain/scripts": "^0.1.4",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/node": "^18.15.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-no-instanceof": "^1.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "prettier": "^2.8.3",
+    "typescript": "^4.9.5 || ^5.4.5",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@langchain/core": "^1.0.1"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "input": "./src/index.ts",
+      "typedoc": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/"
+  ]
+}
diff --git a/libs/sdk-angular/src/index.ts b/libs/sdk-angular/src/index.ts
new file mode 100644
index 000000000..1691fecc6
--- /dev/null
+++ b/libs/sdk-angular/src/index.ts
@@ -0,0 +1,244 @@
+import { signal, computed, effect } from "@angular/core";
+import {
+  StreamManager,
+  MessageTupleManager,
+  getBranchContext,
+  getMessagesMetadataMap,
+  StreamError,
+  extractInterrupts,
+  type UseStreamThread,
+  type BagTemplate,
+  type GetConfigurableType,
+  type GetCustomEventType,
+  type GetInterruptType,
+  type GetUpdateType,
+  type MessageMetadata,
+  type UseStreamOptions,
+  type SubmitOptions,
+  type EventStreamEvent,
+} from "@langchain/langgraph-sdk/ui";
+
+import {
+  Client,
+  type StreamMode,
+  type Message,
+} from "@langchain/langgraph-sdk";
+
+export function useStream<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+  } = BagTemplate
+>(options: UseStreamOptions<StateType, Bag>) {
+  type UpdateType = GetUpdateType<Bag, StateType>;
+  type CustomType = GetCustomEventType<Bag>;
+  type InterruptType = GetInterruptType<Bag>;
+  type ConfigurableType = GetConfigurableType<Bag>;
+
+  const getMessages = (value: StateType): Message[] => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
+  };
+
+  const setMessages = (current: StateType, messages: Message[]): StateType => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return { ...current, [messagesKey]: messages };
+  };
+
+  // TODO: add history fetching
+  const history = signal<UseStreamThread<StateType>>({
+    data: undefined,
+    error: undefined,
+    isLoading: false,
+    mutate: async () => undefined,
+  });
+
+  const threadId = signal<string | undefined>(undefined);
+
+  const branch = signal<string>("");
+  const branchContext = computed(() =>
+    getBranchContext(branch(), history().data ?? undefined)
+  );
+
+  const messageManager = new MessageTupleManager();
+  const stream = new StreamManager<StateType, Bag>(messageManager);
+  const client = new Client({ apiUrl: options.apiUrl });
+
+  const historyValues = computed(
+    () =>
+      branchContext().threadHead?.values ??
+      options.initialValues ??
+      ({} as StateType)
+  );
+
+  const historyError = computed(() => {
+    const error = branchContext().threadHead?.tasks?.at(-1)?.error;
+    if (error == null) return undefined;
+    try {
+      const parsed = JSON.parse(error) as unknown;
+      if (StreamError.isStructuredError(parsed)) return new StreamError(parsed);
+      return parsed;
+    } catch {
+      // do nothing
+    }
+    return error;
+  });
+
+  const streamValues = signal<StateType | null>(stream.values);
+  const streamError = signal<unknown>(stream.error);
+  const isLoading = signal(stream.isLoading);
+
+  const values = computed(() => streamValues() ?? historyValues());
+  const error = computed(
+    () => streamError() ?? historyError() ?? history().error
+  );
+
+  const messageMetadata = computed(() =>
+    getMessagesMetadataMap({
+      initialValues: options.initialValues,
+      history: history().data,
+      getMessages,
+      branchContext: branchContext(),
+    })
+  );
+
+  effect((onCleanup) => {
+    const unsubscribe = stream.subscribe(() => {
+      streamValues.set(stream.values);
+      streamError.set(stream.error);
+      isLoading.set(stream.isLoading);
+    });
+
+    onCleanup(() => unsubscribe());
+  });
+
+  function stop() {
+    return stream.stop(historyValues(), { onStop: options.onStop });
+  }
+
+  function submit(
+    values: StateType,
+    submitOptions?: SubmitOptions<StateType, ConfigurableType>
+  ) {
+    return stream.start(
+      async (signal) => {
+        let currentThreadId = threadId();
+        if (!currentThreadId) {
+          // generate random thread id
+          const thread = await client.threads.create({
+            threadId: submitOptions?.threadId,
+            metadata: submitOptions?.metadata,
+          });
+
+          currentThreadId = thread.thread_id;
+          threadId.set(currentThreadId);
+        }
+
+        const streamMode = new Set<StreamMode>([
+          ...(submitOptions?.streamMode ?? []),
+          "values",
+          "messages-tuple",
+        ]);
+
+        stream.setStreamValues(() => {
+          const prev = { ...historyValues(), ...stream.values };
+
+          if (submitOptions?.optimisticValues != null) {
+            return {
+              ...prev,
+              ...(typeof submitOptions.optimisticValues === "function"
+                ? submitOptions.optimisticValues(prev)
+                : submitOptions.optimisticValues),
+            };
+          }
+
+          return { ...prev };
+        });
+
+        return client.runs.stream(currentThreadId, options.assistantId, {
+          input: values as Record<string, unknown>,
+          config: submitOptions?.config,
+          context: submitOptions?.context,
+          command: submitOptions?.command,
+
+          interruptBefore: submitOptions?.interruptBefore,
+          interruptAfter: submitOptions?.interruptAfter,
+          metadata: submitOptions?.metadata,
+          multitaskStrategy: submitOptions?.multitaskStrategy,
+          onCompletion: submitOptions?.onCompletion,
+          onDisconnect: submitOptions?.onDisconnect,
+
+          signal,
+
+          streamMode: [...streamMode],
+          streamSubgraphs: submitOptions?.streamSubgraphs,
+          durability: submitOptions?.durability,
+        }) as AsyncGenerator<
+          EventStreamEvent<StateType, UpdateType, CustomType>
+        >;
+      },
+      {
+        getMessages,
+        setMessages,
+
+        initialValues: {} as StateType,
+        callbacks: options,
+
+        onSuccess: () => undefined,
+        onError: (error) => options.onError?.(error, undefined),
+        onFinish: () => {},
+      }
+    );
+  }
+
+  const messages = computed(() => getMessages(values()));
+
+  const interrupt = computed(() =>
+    extractInterrupts<InterruptType>(values(), {
+      isLoading: isLoading(),
+      threadState: branchContext().threadHead,
+      error: error(),
+    })
+  );
+
+  function getMessagesMetadata(
+    message: Message,
+    index?: number
+  ): MessageMetadata<StateType> | undefined {
+    const streamMetadata = messageManager.get(message.id)?.metadata;
+    const historyMetadata = messageMetadata().find(
+      (m) => m.messageId === (message.id ?? index)
+    );
+
+    if (streamMetadata != null || historyMetadata != null) {
+      return {
+        ...historyMetadata,
+        streamMetadata,
+      } as MessageMetadata<StateType>;
+    }
+
+    return undefined;
+  }
+
+  return {
+    assistantId: options.assistantId,
+
+    values,
+    error,
+    isLoading,
+
+    branch,
+
+    messages,
+
+    interrupt,
+
+    getMessagesMetadata,
+
+    submit,
+    stop,
+  };
+}
diff --git a/libs/sdk-angular/tsconfig.json b/libs/sdk-angular/tsconfig.json
new file mode 100644
index 000000000..6459a7b86
--- /dev/null
+++ b/libs/sdk-angular/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": "@tsconfig/recommended",
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "ES2022.Object", "ES2022.Error", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "declaration": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization": false,
+    "allowJs": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"],
+  "includeVersion": true
+}
diff --git a/libs/sdk-angular/turbo.json b/libs/sdk-angular/turbo.json
new file mode 100644
index 000000000..d1bb60a7b
--- /dev/null
+++ b/libs/sdk-angular/turbo.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["**/dist/**"]
+    },
+    "build:internal": {
+      "dependsOn": ["^build:internal"]
+    }
+  }
+}
diff --git a/libs/sdk-angular/vitest.config.js b/libs/sdk-angular/vitest.config.js
new file mode 100644
index 000000000..44bba2a6c
--- /dev/null
+++ b/libs/sdk-angular/vitest.config.js
@@ -0,0 +1,16 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig((env) => {
+  /** @type {import("vitest/config").UserConfigExport} */
+  return {
+    test: {
+      hideSkippedTests: true,
+      globals: true,
+      testTimeout: 30_000,
+      exclude: ["**/*.int.test.ts", ...configDefaults.exclude],
+      passWithNoTests: true,
+      name: "unit",
+      environment: "node",
+    },
+  };
+});
diff --git a/libs/sdk-svelte/.eslintrc.cjs b/libs/sdk-svelte/.eslintrc.cjs
new file mode 100644
index 000000000..ca5b3d5d6
--- /dev/null
+++ b/libs/sdk-svelte/.eslintrc.cjs
@@ -0,0 +1,81 @@
+module.exports = {
+  extends: [
+    "airbnb-base",
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    parser: "@typescript-eslint/parser",
+    project: "./tsconfig.json",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "no-instanceof"],
+  ignorePatterns: [
+    ".eslintrc.cjs",
+    "scripts",
+    "node_modules",
+    "dist",
+    "dist-cjs",
+    "*.js",
+    "*.cjs",
+    "*.d.ts",
+  ],
+  rules: {
+    "no-process-env": 2,
+    "no-instanceof/no-instanceof": 2,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-shadow": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-use-before-define": ["error", "nofunc"],
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "arrow-body-style": 0,
+    camelcase: 0,
+    "class-methods-use-this": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "import/no-extraneous-dependencies": [
+      "error",
+      { devDependencies: ["**/*.test.ts", "**/*.test-d.ts"] },
+    ],
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0,
+    "keyword-spacing": "error",
+    "max-classes-per-file": 0,
+    "max-len": 0,
+    "no-await-in-loop": 0,
+    "no-bitwise": 0,
+    "no-console": 0,
+    "no-empty-function": 0,
+    "no-restricted-syntax": 0,
+    "no-shadow": 0,
+    "no-continue": 0,
+    "no-void": 0,
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0,
+    "no-useless-constructor": 0,
+    "no-return-await": 0,
+    "consistent-return": 0,
+    "no-else-return": 0,
+    "func-names": 0,
+    "no-lonely-if": 0,
+    "prefer-rest-params": 0,
+    "prefer-const": ["error", {
+      "destructuring": "all",
+      "ignoreReadBeforeAssign": false
+    }],
+    "new-cap": ["error", { properties: false, capIsNew: false }],
+  },
+  overrides: [
+    {
+      files: ["src/tests/**/*.ts"],
+      rules: {
+        "no-instanceof/no-instanceof": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+      },
+    },
+  ],
+};
diff --git a/libs/sdk-svelte/LICENSE b/libs/sdk-svelte/LICENSE
new file mode 100644
index 000000000..771f1479b
--- /dev/null
+++ b/libs/sdk-svelte/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LangChain, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/libs/sdk-svelte/README.md b/libs/sdk-svelte/README.md
new file mode 100644
index 000000000..9649fc219
--- /dev/null
+++ b/libs/sdk-svelte/README.md
@@ -0,0 +1,3 @@
+# @langchain/svelte
+
+This package contains the Svelte integration for LangGraph.
diff --git a/libs/sdk-svelte/package.json b/libs/sdk-svelte/package.json
new file mode 100644
index 000000000..61a1d52ce
--- /dev/null
+++ b/libs/sdk-svelte/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@langchain/svelte",
+  "version": "0.0.1",
+  "description": "Svelte integration for LangGraph & LangChain",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist/ dist-cjs/",
+    "build": "yarn turbo:command build:internal --filter=@langchain/svelte",
+    "build:internal": "yarn workspace @langchain/build compile @langchain/svelte",
+    "prepublish": "yarn build",
+    "format:check": "prettier --check src",
+    "format": "prettier --write src",
+    "lint:eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --cache --ext .ts,.js,.jsx,.tsx src/",
+    "lint": "yarn lint:eslint",
+    "lint:fix": "yarn lint:eslint --fix",
+    "test": "vitest run"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@langchain/langgraph-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@langchain/core": "^1.0.1",
+    "@langchain/scripts": "^0.1.4",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/node": "^18.15.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-no-instanceof": "^1.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.3",
+    "svelte": "^5.43.6",
+    "typescript": "^4.9.5 || ^5.4.5",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@langchain/core": "^1.0.1",
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "input": "./src/index.ts",
+      "typedoc": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/"
+  ]
+}
diff --git a/libs/sdk-svelte/src/index.ts b/libs/sdk-svelte/src/index.ts
new file mode 100644
index 000000000..445afa1ca
--- /dev/null
+++ b/libs/sdk-svelte/src/index.ts
@@ -0,0 +1,252 @@
+import { writable, derived, get } from "svelte/store";
+import { onDestroy } from "svelte";
+
+import {
+  StreamManager,
+  MessageTupleManager,
+  getBranchContext,
+  getMessagesMetadataMap,
+  StreamError,
+  extractInterrupts,
+  type UseStreamThread,
+  type BagTemplate,
+  type GetConfigurableType,
+  type GetCustomEventType,
+  type GetInterruptType,
+  type GetUpdateType,
+  type MessageMetadata,
+  type UseStreamOptions,
+  type SubmitOptions,
+  type EventStreamEvent,
+} from "@langchain/langgraph-sdk/ui";
+import {
+  Client,
+  type StreamMode,
+  type Message,
+} from "@langchain/langgraph-sdk";
+
+export function useStream<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+  } = BagTemplate
+>(options: UseStreamOptions<StateType, Bag>) {
+  type UpdateType = GetUpdateType<Bag, StateType>;
+  type CustomType = GetCustomEventType<Bag>;
+  type InterruptType = GetInterruptType<Bag>;
+  type ConfigurableType = GetConfigurableType<Bag>;
+
+  const getMessages = (value: StateType): Message[] => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
+  };
+
+  const setMessages = (current: StateType, messages: Message[]): StateType => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return { ...current, [messagesKey]: messages };
+  };
+
+  // TODO: add history fetching
+  const history = writable<UseStreamThread<StateType>>({
+    data: undefined,
+    error: undefined,
+    isLoading: false,
+    mutate: async () => undefined,
+  });
+
+  const threadId = writable<string | undefined>(undefined);
+
+  const branch = writable<string>("");
+  const branchContext = derived([branch, history], ([$branch, $history]) =>
+    getBranchContext($branch, $history.data ?? undefined)
+  );
+
+  const messageManager = new MessageTupleManager();
+  const stream = new StreamManager<StateType, Bag>(messageManager);
+  const client = new Client({ apiUrl: options.apiUrl });
+
+  const historyValues = derived(
+    [branchContext],
+    ([$branchContext]) =>
+      $branchContext.threadHead?.values ??
+      options.initialValues ??
+      ({} as StateType)
+  );
+
+  const historyError = derived([branchContext], ([$branchContext]) => {
+    const error = $branchContext.threadHead?.tasks?.at(-1)?.error;
+    if (error == null) return undefined;
+    try {
+      const parsed = JSON.parse(error) as unknown;
+      if (StreamError.isStructuredError(parsed)) return new StreamError(parsed);
+      return parsed;
+    } catch {
+      // do nothing
+    }
+    return error;
+  });
+
+  const streamValues = writable<StateType | null>(stream.values);
+  const streamError = writable<unknown>(stream.error);
+  const isLoading = writable(stream.isLoading);
+
+  const values = derived(
+    [streamValues, historyValues],
+    ([$streamValues, $historyValues]) => $streamValues ?? $historyValues
+  );
+
+  const error = derived(
+    [streamError, historyError, history],
+    ([$streamError, $historyError, $history]) =>
+      $streamError ?? $historyError ?? $history.error
+  );
+
+  const messageMetadata = derived(
+    [history, branchContext],
+    ([$history, $branchContext]) =>
+      getMessagesMetadataMap({
+        initialValues: options.initialValues,
+        history: $history.data,
+        getMessages,
+        branchContext: $branchContext,
+      })
+  );
+
+  const unsubscribe = stream.subscribe(() => {
+    streamValues.set(stream.values);
+    streamError.set(stream.error);
+    isLoading.set(stream.isLoading);
+  });
+
+  onDestroy(() => unsubscribe());
+
+  function stop() {
+    return stream.stop(get(historyValues), { onStop: options.onStop });
+  }
+
+  function submit(
+    values: StateType,
+    submitOptions?: SubmitOptions<StateType, ConfigurableType>
+  ) {
+    return stream.start(
+      async (signal) => {
+        const currentThreadId = get(threadId);
+        if (!currentThreadId) {
+          // generate random thread id
+          const thread = await client.threads.create({
+            threadId: submitOptions?.threadId,
+            metadata: submitOptions?.metadata,
+          });
+
+          threadId.set(thread.thread_id);
+        }
+
+        const streamMode = ["values", "messages-tuple"] as StreamMode[];
+
+        stream.setStreamValues(() => {
+          const prev = { ...get(historyValues), ...stream.values };
+
+          if (submitOptions?.optimisticValues != null) {
+            return {
+              ...prev,
+              ...(typeof submitOptions.optimisticValues === "function"
+                ? submitOptions.optimisticValues(prev)
+                : submitOptions.optimisticValues),
+            };
+          }
+
+          return { ...prev };
+        });
+
+        return client.runs.stream(get(threadId)!, options.assistantId, {
+          input: values as Record<string, unknown>,
+          config: submitOptions?.config,
+          context: submitOptions?.context,
+          command: submitOptions?.command,
+
+          interruptBefore: submitOptions?.interruptBefore,
+          interruptAfter: submitOptions?.interruptAfter,
+          metadata: submitOptions?.metadata,
+          multitaskStrategy: submitOptions?.multitaskStrategy,
+          onCompletion: submitOptions?.onCompletion,
+          onDisconnect: submitOptions?.onDisconnect,
+
+          signal,
+
+          streamMode,
+          streamSubgraphs: submitOptions?.streamSubgraphs,
+          durability: submitOptions?.durability,
+        }) as AsyncGenerator<
+          EventStreamEvent<StateType, UpdateType, CustomType>
+        >;
+      },
+      {
+        getMessages,
+        setMessages,
+
+        initialValues: {} as StateType,
+        callbacks: options,
+
+        onSuccess: () => undefined,
+        onError: (error) => options.onError?.(error, undefined),
+        onFinish: () => {},
+      }
+    );
+  }
+
+  const messages = derived([streamValues], ([$streamValues]) =>
+    getMessages($streamValues ?? ({} as StateType))
+  );
+
+  const interrupt = derived(
+    [streamValues, streamError, branchContext, isLoading],
+    ([$streamValues, $streamError, $branchContext, $isLoading]) => {
+      return extractInterrupts<InterruptType>($streamValues, {
+        isLoading: $isLoading,
+        threadState: $branchContext.threadHead,
+        error: $streamError,
+      });
+    }
+  );
+
+  function getMessagesMetadata(
+    message: Message,
+    index?: number
+  ): MessageMetadata<StateType> | undefined {
+    const streamMetadata = messageManager.get(message.id)?.metadata;
+    const historyMetadata = get(messageMetadata)?.find(
+      (m) => m.messageId === (message.id ?? index)
+    );
+
+    if (streamMetadata != null || historyMetadata != null) {
+      return {
+        ...historyMetadata,
+        streamMetadata,
+      } as MessageMetadata<StateType>;
+    }
+
+    return undefined;
+  }
+
+  return {
+    assistantId: options.assistantId,
+
+    values,
+    error,
+    isLoading,
+
+    branch,
+
+    messages,
+
+    interrupt,
+
+    getMessagesMetadata,
+
+    submit,
+    stop,
+  };
+}
diff --git a/libs/sdk-svelte/tsconfig.json b/libs/sdk-svelte/tsconfig.json
new file mode 100644
index 000000000..6459a7b86
--- /dev/null
+++ b/libs/sdk-svelte/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": "@tsconfig/recommended",
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "ES2022.Object", "ES2022.Error", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "declaration": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization": false,
+    "allowJs": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"],
+  "includeVersion": true
+}
diff --git a/libs/sdk-svelte/turbo.json b/libs/sdk-svelte/turbo.json
new file mode 100644
index 000000000..d1bb60a7b
--- /dev/null
+++ b/libs/sdk-svelte/turbo.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["**/dist/**"]
+    },
+    "build:internal": {
+      "dependsOn": ["^build:internal"]
+    }
+  }
+}
diff --git a/libs/sdk-svelte/vitest.config.js b/libs/sdk-svelte/vitest.config.js
new file mode 100644
index 000000000..44bba2a6c
--- /dev/null
+++ b/libs/sdk-svelte/vitest.config.js
@@ -0,0 +1,16 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig((env) => {
+  /** @type {import("vitest/config").UserConfigExport} */
+  return {
+    test: {
+      hideSkippedTests: true,
+      globals: true,
+      testTimeout: 30_000,
+      exclude: ["**/*.int.test.ts", ...configDefaults.exclude],
+      passWithNoTests: true,
+      name: "unit",
+      environment: "node",
+    },
+  };
+});
diff --git a/libs/sdk-vue/.eslintrc.cjs b/libs/sdk-vue/.eslintrc.cjs
new file mode 100644
index 000000000..ca5b3d5d6
--- /dev/null
+++ b/libs/sdk-vue/.eslintrc.cjs
@@ -0,0 +1,81 @@
+module.exports = {
+  extends: [
+    "airbnb-base",
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    parser: "@typescript-eslint/parser",
+    project: "./tsconfig.json",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "no-instanceof"],
+  ignorePatterns: [
+    ".eslintrc.cjs",
+    "scripts",
+    "node_modules",
+    "dist",
+    "dist-cjs",
+    "*.js",
+    "*.cjs",
+    "*.d.ts",
+  ],
+  rules: {
+    "no-process-env": 2,
+    "no-instanceof/no-instanceof": 2,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-shadow": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-use-before-define": ["error", "nofunc"],
+    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "arrow-body-style": 0,
+    camelcase: 0,
+    "class-methods-use-this": 0,
+    "import/extensions": [2, "ignorePackages"],
+    "import/no-extraneous-dependencies": [
+      "error",
+      { devDependencies: ["**/*.test.ts", "**/*.test-d.ts"] },
+    ],
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0,
+    "keyword-spacing": "error",
+    "max-classes-per-file": 0,
+    "max-len": 0,
+    "no-await-in-loop": 0,
+    "no-bitwise": 0,
+    "no-console": 0,
+    "no-empty-function": 0,
+    "no-restricted-syntax": 0,
+    "no-shadow": 0,
+    "no-continue": 0,
+    "no-void": 0,
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0,
+    "no-useless-constructor": 0,
+    "no-return-await": 0,
+    "consistent-return": 0,
+    "no-else-return": 0,
+    "func-names": 0,
+    "no-lonely-if": 0,
+    "prefer-rest-params": 0,
+    "prefer-const": ["error", {
+      "destructuring": "all",
+      "ignoreReadBeforeAssign": false
+    }],
+    "new-cap": ["error", { properties: false, capIsNew: false }],
+  },
+  overrides: [
+    {
+      files: ["src/tests/**/*.ts"],
+      rules: {
+        "no-instanceof/no-instanceof": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+      },
+    },
+  ],
+};
diff --git a/libs/sdk-vue/LICENSE b/libs/sdk-vue/LICENSE
new file mode 100644
index 000000000..771f1479b
--- /dev/null
+++ b/libs/sdk-vue/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LangChain, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/libs/sdk-vue/README.md b/libs/sdk-vue/README.md
new file mode 100644
index 000000000..62e57bd50
--- /dev/null
+++ b/libs/sdk-vue/README.md
@@ -0,0 +1,3 @@
+# @langchain/vue
+
+This package contains the Vue integration for LangGraph.
diff --git a/libs/sdk-vue/package.json b/libs/sdk-vue/package.json
new file mode 100644
index 000000000..7bf39386a
--- /dev/null
+++ b/libs/sdk-vue/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@langchain/vue",
+  "version": "0.0.1",
+  "description": "Vue integration for LangGraph & LangChain",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist/ dist-cjs/",
+    "build": "yarn turbo:command build:internal --filter=@langchain/vue",
+    "build:internal": "yarn workspace @langchain/build compile @langchain/vue",
+    "prepublish": "yarn build",
+    "format:check": "prettier --check src",
+    "format": "prettier --write src",
+    "lint:eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --cache --ext .ts,.js,.jsx,.tsx src/",
+    "lint": "yarn lint:eslint",
+    "lint:fix": "yarn lint:eslint --fix",
+    "test": "vitest run"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@langchain/langgraph-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@langchain/core": "^1.0.1",
+    "@langchain/scripts": "^0.1.4",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/node": "^18.15.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-no-instanceof": "^1.0.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.3",
+    "typescript": "^4.9.5 || ^5.4.5",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.24"
+  },
+  "peerDependencies": {
+    "@langchain/core": "^1.0.1",
+    "vue": "^3.0.0"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "input": "./src/index.ts",
+      "typedoc": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/"
+  ]
+}
diff --git a/libs/sdk-vue/src/index.ts b/libs/sdk-vue/src/index.ts
new file mode 100644
index 000000000..0fb6ddcba
--- /dev/null
+++ b/libs/sdk-vue/src/index.ts
@@ -0,0 +1,232 @@
+import { computed, onUnmounted, ref, shallowRef } from "vue";
+import {
+  StreamManager,
+  MessageTupleManager,
+  getBranchContext,
+  getMessagesMetadataMap,
+  StreamError,
+  extractInterrupts,
+  type UseStreamThread,
+  type BagTemplate,
+  type GetConfigurableType,
+  type GetCustomEventType,
+  type GetInterruptType,
+  type GetUpdateType,
+  type MessageMetadata,
+  type UseStreamOptions,
+  type SubmitOptions,
+  type EventStreamEvent,
+} from "@langchain/langgraph-sdk/ui";
+
+import {
+  Client,
+  type StreamMode,
+  type Message,
+} from "@langchain/langgraph-sdk";
+
+export function useStream<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends {
+    ConfigurableType?: Record<string, unknown>;
+    InterruptType?: unknown;
+    CustomEventType?: unknown;
+    UpdateType?: unknown;
+  } = BagTemplate
+>(options: UseStreamOptions<StateType, Bag>) {
+  type UpdateType = GetUpdateType<Bag, StateType>;
+  type CustomType = GetCustomEventType<Bag>;
+  type InterruptType = GetInterruptType<Bag>;
+  type ConfigurableType = GetConfigurableType<Bag>;
+
+  // TODO: add history fetching
+  const history = shallowRef<UseStreamThread<StateType>>({
+    data: undefined,
+    error: undefined,
+    isLoading: false,
+    mutate: async () => undefined,
+  });
+
+  const getMessages = (value: StateType): Message[] => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
+  };
+
+  const setMessages = (current: StateType, messages: Message[]): StateType => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return { ...current, [messagesKey]: messages };
+  };
+
+  const threadId = ref<string | undefined>(undefined);
+
+  const branch = ref<string>("");
+  const branchContext = computed(() =>
+    getBranchContext(branch.value, history.value.data ?? undefined)
+  );
+
+  const messageManager = new MessageTupleManager();
+  const stream = new StreamManager<StateType, Bag>(messageManager);
+  const client = new Client({ apiUrl: options.apiUrl });
+
+  const historyValues = computed(
+    () =>
+      branchContext.value.threadHead?.values ??
+      options.initialValues ??
+      ({} as StateType)
+  );
+
+  const historyError = computed(() => {
+    const error = branchContext.value.threadHead?.tasks?.at(-1)?.error;
+    if (error == null) return undefined;
+    try {
+      const parsed = JSON.parse(error) as unknown;
+      if (StreamError.isStructuredError(parsed)) return new StreamError(parsed);
+      return parsed;
+    } catch {
+      // do nothing
+    }
+    return error;
+  });
+
+  const streamValues = shallowRef<StateType | null>(stream.values);
+  const streamError = shallowRef<unknown>(stream.error);
+  const isLoading = shallowRef(stream.isLoading);
+
+  const values = computed(() => stream.values ?? historyValues.value);
+  const error = computed(
+    () => stream.error ?? historyError.value ?? history.value.error
+  );
+
+  const messageMetadata = computed(() =>
+    getMessagesMetadataMap({
+      initialValues: options.initialValues,
+      history: history.value.data,
+      getMessages,
+      branchContext: branchContext.value,
+    })
+  );
+
+  const unsubscribe = stream.subscribe(() => {
+    streamValues.value = stream.values;
+    streamError.value = stream.error;
+    isLoading.value = stream.isLoading;
+  });
+
+  onUnmounted(() => unsubscribe());
+
+  function stop() {
+    return stream.stop(historyValues.value, { onStop: options.onStop });
+  }
+
+  function submit(
+    values: StateType,
+    submitOptions?: SubmitOptions<StateType, ConfigurableType>
+  ) {
+    return stream.start(
+      async (signal) => {
+        if (!threadId.value) {
+          // generate random thread id
+          const thread = await client.threads.create({
+            threadId: submitOptions?.threadId,
+            metadata: submitOptions?.metadata,
+          });
+
+          threadId.value = thread.thread_id;
+        }
+
+        const streamMode = ["values", "messages-tuple"] as StreamMode[];
+
+        stream.setStreamValues(() => {
+          const prev = { ...historyValues.value, ...stream.values };
+
+          if (submitOptions?.optimisticValues != null) {
+            return {
+              ...prev,
+              ...(typeof submitOptions.optimisticValues === "function"
+                ? submitOptions.optimisticValues(prev)
+                : submitOptions.optimisticValues),
+            };
+          }
+
+          return { ...prev };
+        });
+
+        return client.runs.stream(threadId.value, options.assistantId, {
+          input: values as Record<string, unknown>,
+          config: submitOptions?.config,
+          context: submitOptions?.context,
+          command: submitOptions?.command,
+
+          interruptBefore: submitOptions?.interruptBefore,
+          interruptAfter: submitOptions?.interruptAfter,
+          metadata: submitOptions?.metadata,
+          multitaskStrategy: submitOptions?.multitaskStrategy,
+          onCompletion: submitOptions?.onCompletion,
+          onDisconnect: submitOptions?.onDisconnect,
+
+          signal,
+
+          streamMode,
+          streamSubgraphs: submitOptions?.streamSubgraphs,
+          durability: submitOptions?.durability,
+        }) as AsyncGenerator<
+          EventStreamEvent<StateType, UpdateType, CustomType>
+        >;
+      },
+      {
+        getMessages,
+        setMessages,
+
+        initialValues: {} as StateType,
+        callbacks: options,
+
+        onSuccess: () => undefined,
+        onError: (error) => options.onError?.(error, undefined),
+        onFinish: () => {},
+      }
+    );
+  }
+
+  return {
+    assistantId: options.assistantId,
+
+    values,
+    error,
+    isLoading,
+
+    branch,
+
+    messages: computed(() =>
+      getMessages(streamValues.value ?? ({} as StateType))
+    ),
+
+    interrupt: computed(() =>
+      extractInterrupts<InterruptType>(streamValues.value, {
+        isLoading: isLoading.value,
+        threadState: branchContext.value.threadHead,
+        error: streamError.value,
+      })
+    ),
+
+    getMessagesMetadata: (
+      message: Message,
+      index?: number
+    ): MessageMetadata<StateType> | undefined => {
+      const streamMetadata = messageManager.get(message.id)?.metadata;
+      const historyMetadata = messageMetadata.value?.find(
+        (m) => m.messageId === (message.id ?? index)
+      );
+
+      if (streamMetadata != null || historyMetadata != null) {
+        return {
+          ...historyMetadata,
+          streamMetadata,
+        } as MessageMetadata<StateType>;
+      }
+
+      return undefined;
+    },
+
+    submit,
+    stop,
+  };
+}
diff --git a/libs/sdk-vue/tsconfig.json b/libs/sdk-vue/tsconfig.json
new file mode 100644
index 000000000..6459a7b86
--- /dev/null
+++ b/libs/sdk-vue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "extends": "@tsconfig/recommended",
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "ES2022.Object", "ES2022.Error", "DOM"],
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "declaration": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization": false,
+    "allowJs": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"],
+  "includeVersion": true
+}
diff --git a/libs/sdk-vue/turbo.json b/libs/sdk-vue/turbo.json
new file mode 100644
index 000000000..d1bb60a7b
--- /dev/null
+++ b/libs/sdk-vue/turbo.json
@@ -0,0 +1,11 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "outputs": ["**/dist/**"]
+    },
+    "build:internal": {
+      "dependsOn": ["^build:internal"]
+    }
+  }
+}
diff --git a/libs/sdk-vue/vitest.config.js b/libs/sdk-vue/vitest.config.js
new file mode 100644
index 000000000..44bba2a6c
--- /dev/null
+++ b/libs/sdk-vue/vitest.config.js
@@ -0,0 +1,16 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig((env) => {
+  /** @type {import("vitest/config").UserConfigExport} */
+  return {
+    test: {
+      hideSkippedTests: true,
+      globals: true,
+      testTimeout: 30_000,
+      exclude: ["**/*.int.test.ts", ...configDefaults.exclude],
+      passWithNoTests: true,
+      name: "unit",
+      environment: "node",
+    },
+  };
+});
diff --git a/libs/sdk/package.json b/libs/sdk/package.json
index f14bf2d9a..175e11481 100644
--- a/libs/sdk/package.json
+++ b/libs/sdk/package.json
@@ -22,6 +22,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@angular/core": "^20.3.10",
     "@langchain/core": "^1.1.2",
     "@langchain/scripts": "^0.1.4",
     "@tsconfig/recommended": "^1.0.2",
@@ -41,15 +42,23 @@
     "prettier": "^2.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "svelte": "^5.43.6",
     "typescript": "^4.9.5 || ^5.4.5",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "vue": "^3.5.24"
   },
   "peerDependencies": {
+    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0",
     "@langchain/core": "^1.0.1",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react-dom": "^18 || ^19",
+    "svelte": "^4.0.0 || ^5.0.0",
+    "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
+    "@angular/core": {
+      "optional": true
+    },
     "@langchain/core": {
       "optional": true
     },
@@ -58,6 +67,12 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   },
   "main": "./dist/index.js",
@@ -75,6 +90,18 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./ui": {
+      "input": "./src/ui/index.ts",
+      "typedoc": "./src/ui/index.ts",
+      "import": {
+        "types": "./dist/ui/index.d.ts",
+        "default": "./dist/ui/index.js"
+      },
+      "require": {
+        "types": "./dist/ui/index.d.cts",
+        "default": "./dist/ui/index.cjs"
+      }
+    },
     "./client": {
       "input": "./src/client.ts",
       "typedoc": "./src/client.ts",
diff --git a/libs/sdk/src/react/index.ts b/libs/sdk/src/react/index.ts
index 01ba944ac..a669d29a4 100644
--- a/libs/sdk/src/react/index.ts
+++ b/libs/sdk/src/react/index.ts
@@ -1,11 +1,13 @@
 export { useStream } from "./stream.js";
 export { FetchStreamTransport } from "./stream.custom.js";
 export type {
-  MessageMetadata,
   UseStream,
-  UseStreamOptions,
   UseStreamCustom,
   UseStreamCustomOptions,
+} from "./types.js";
+export type {
+  MessageMetadata,
+  UseStreamOptions,
   UseStreamTransport,
   UseStreamThread,
-} from "./types.js";
+} from "../ui/types.js";
diff --git a/libs/sdk/src/react/stream.custom.tsx b/libs/sdk/src/react/stream.custom.tsx
index 56aa6cf7c..7907757de 100644
--- a/libs/sdk/src/react/stream.custom.tsx
+++ b/libs/sdk/src/react/stream.custom.tsx
@@ -11,9 +11,11 @@ import type {
   GetInterruptType,
   RunCallbackMeta,
   GetConfigurableType,
+  UseStreamTransport,
+} from "../ui/types.js";
+import type {
   UseStreamCustomOptions,
   UseStreamCustom,
-  UseStreamTransport,
   CustomSubmitOptions,
 } from "./types.js";
 import type { Message } from "../types.messages.js";
@@ -23,6 +25,7 @@ import { BytesLineDecoder, SSEDecoder } from "../utils/sse.js";
 import { IterableReadableStream } from "../utils/stream.js";
 import { useControllableThreadId } from "./thread.js";
 import { Command } from "../types.js";
+import { extractInterrupts } from "../ui/interrupts.js";
 
 interface FetchStreamTransportOptions {
   /**
@@ -228,20 +231,7 @@ export function useStreamCustom<
     submit,
 
     get interrupt(): Interrupt<InterruptType> | undefined {
-      if (
-        stream.values != null &&
-        "__interrupt__" in stream.values &&
-        Array.isArray(stream.values.__interrupt__)
-      ) {
-        const valueInterrupts = stream.values.__interrupt__;
-        if (valueInterrupts.length === 0) return { when: "breakpoint" };
-        if (valueInterrupts.length === 1) return valueInterrupts[0];
-
-        // TODO: fix the typing of interrupts if multiple interrupts are returned
-        return valueInterrupts as Interrupt<InterruptType>;
-      }
-
-      return undefined;
+      return extractInterrupts<InterruptType>(stream.values);
     },
 
     get messages() {
diff --git a/libs/sdk/src/react/stream.lgp.tsx b/libs/sdk/src/react/stream.lgp.tsx
index f6a6e118a..18e22f7c0 100644
--- a/libs/sdk/src/react/stream.lgp.tsx
+++ b/libs/sdk/src/react/stream.lgp.tsx
@@ -11,29 +11,29 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import { findLast, unique } from "../ui/utils.js";
+import { unique } from "../ui/utils.js";
 import { StreamError } from "../ui/errors.js";
-import { getBranchContext } from "../ui/branching.js";
+import { getBranchContext, getMessagesMetadataMap } from "../ui/branching.js";
 import { EventStreamEvent, StreamManager } from "../ui/manager.js";
 import type {
   BagTemplate,
   UseStreamOptions,
-  UseStream,
   GetUpdateType,
   GetCustomEventType,
   GetInterruptType,
   GetConfigurableType,
   RunCallbackMeta,
-  SubmitOptions,
   MessageMetadata,
   UseStreamThread,
-} from "./types.js";
+} from "../ui/types.js";
+import type { UseStream, SubmitOptions } from "./types.js";
 import { Client, getClientConfigHash } from "../client.js";
 import type { Message } from "../types.messages.js";
-import type { Interrupt, ThreadState } from "../schema.js";
+import type { ThreadState } from "../schema.js";
 import type { StreamMode } from "../types.stream.js";
 import { MessageTupleManager } from "../ui/messages.js";
 import { useControllableThreadId } from "./thread.js";
+import { extractInterrupts } from "../ui/interrupts.js";
 
 function getFetchHistoryKey(
   client: Client,
@@ -152,6 +152,55 @@ function useThreadHistory<StateType extends Record<string, unknown>>(
   };
 }
 
+function useTrackStreamMode() {
+  const trackStreamModeRef = useRef<Exclude<StreamMode, "messages">[]>([]);
+
+  const trackStreamMode = useCallback(
+    (...mode: Exclude<StreamMode, "messages">[]) => {
+      const ref = trackStreamModeRef.current;
+      for (const m of mode) {
+        if (!ref.includes(m)) ref.push(m);
+      }
+    },
+    []
+  );
+
+  return [trackStreamModeRef, trackStreamMode] as [
+    typeof trackStreamModeRef,
+    typeof trackStreamMode
+  ];
+}
+
+function useCallbackStreamMode<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends BagTemplate = BagTemplate
+>(options: UseStreamOptions<StateType, Bag>) {
+  const hasUpdateListener = options.onUpdateEvent != null;
+  const hasCustomListener = options.onCustomEvent != null;
+  const hasLangChainListener = options.onLangChainEvent != null;
+  const hasDebugListener = options.onDebugEvent != null;
+  const hasCheckpointListener = options.onCheckpointEvent != null;
+  const hasTaskListener = options.onTaskEvent != null;
+
+  return useMemo(() => {
+    const modes: Exclude<StreamMode, "messages">[] = [];
+    if (hasUpdateListener) modes.push("updates");
+    if (hasCustomListener) modes.push("custom");
+    if (hasLangChainListener) modes.push("events");
+    if (hasDebugListener) modes.push("debug");
+    if (hasCheckpointListener) modes.push("checkpoints");
+    if (hasTaskListener) modes.push("tasks");
+    return modes;
+  }, [
+    hasUpdateListener,
+    hasCustomListener,
+    hasLangChainListener,
+    hasDebugListener,
+    hasCheckpointListener,
+    hasTaskListener,
+  ]);
+}
+
 export function useStreamLGP<
   StateType extends Record<string, unknown> = Record<string, unknown>,
   Bag extends {
@@ -201,6 +250,19 @@ export function useStreamLGP<
       })
   );
 
+  const [trackStreamModeRef, trackStreamMode] = useTrackStreamMode();
+  const callbackStreamMode = useCallbackStreamMode(options);
+
+  const getMessages = (value: StateType): Message[] => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
+  };
+
+  const setMessages = (current: StateType, messages: Message[]): StateType => {
+    const messagesKey = options.messagesKey ?? "messages";
+    return { ...current, [messagesKey]: messages };
+  };
+
   useSyncExternalStore(
     stream.subscribe,
     stream.getSnapshot,
@@ -208,42 +270,6 @@ export function useStreamLGP<
   );
 
   const [threadId, onThreadId] = useControllableThreadId(options);
-  const trackStreamModeRef = useRef<Exclude<StreamMode, "messages">[]>([]);
-
-  const trackStreamMode = useCallback(
-    (...mode: Exclude<StreamMode, "messages">[]) => {
-      const ref = trackStreamModeRef.current;
-      for (const m of mode) {
-        if (!ref.includes(m)) ref.push(m);
-      }
-    },
-    []
-  );
-
-  const hasUpdateListener = options.onUpdateEvent != null;
-  const hasCustomListener = options.onCustomEvent != null;
-  const hasLangChainListener = options.onLangChainEvent != null;
-  const hasDebugListener = options.onDebugEvent != null;
-  const hasCheckpointListener = options.onCheckpointEvent != null;
-  const hasTaskListener = options.onTaskEvent != null;
-
-  const callbackStreamMode = useMemo(() => {
-    const modes: Exclude<StreamMode, "messages">[] = [];
-    if (hasUpdateListener) modes.push("updates");
-    if (hasCustomListener) modes.push("custom");
-    if (hasLangChainListener) modes.push("events");
-    if (hasDebugListener) modes.push("debug");
-    if (hasCheckpointListener) modes.push("checkpoints");
-    if (hasTaskListener) modes.push("tasks");
-    return modes;
-  }, [
-    hasUpdateListener,
-    hasCustomListener,
-    hasLangChainListener,
-    hasDebugListener,
-    hasCheckpointListener,
-    hasTaskListener,
-  ]);
 
   const clearCallbackRef = useRef<() => void>(null!);
   clearCallbackRef.current = stream.clear;
@@ -277,16 +303,6 @@ export function useStreamLGP<
   );
   const history = options.thread ?? builtInHistory;
 
-  const getMessages = (value: StateType): Message[] => {
-    const messagesKey = options.messagesKey ?? "messages";
-    return Array.isArray(value[messagesKey]) ? value[messagesKey] : [];
-  };
-
-  const setMessages = (current: StateType, messages: Message[]): StateType => {
-    const messagesKey = options.messagesKey ?? "messages";
-    return { ...current, [messagesKey]: messages };
-  };
-
   const [branch, setBranch] = useState<string>("");
   const branchContext = getBranchContext(branch, history.data ?? undefined);
 
@@ -308,43 +324,12 @@ export function useStreamLGP<
     return error;
   })();
 
-  const messageMetadata = (() => {
-    const alreadyShown = new Set<string>();
-    return getMessages(historyValues).map(
-      (message, idx): Omit<MessageMetadata<StateType>, "streamMetadata"> => {
-        const messageId = message.id ?? idx;
-
-        // Find the first checkpoint where the message was seen
-        const firstSeenState = findLast(history.data ?? [], (state) =>
-          getMessages(state.values)
-            .map((m, idx) => m.id ?? idx)
-            .includes(messageId)
-        );
-
-        const checkpointId = firstSeenState?.checkpoint?.checkpoint_id;
-        let branch =
-          checkpointId != null
-            ? branchContext.branchByCheckpoint[checkpointId]
-            : undefined;
-        if (!branch?.branch?.length) branch = undefined;
-
-        // serialize branches
-        const optionsShown = branch?.branchOptions?.flat(2).join(",");
-        if (optionsShown) {
-          if (alreadyShown.has(optionsShown)) branch = undefined;
-          alreadyShown.add(optionsShown);
-        }
-
-        return {
-          messageId: messageId.toString(),
-          firstSeenState,
-
-          branch: branch?.branch,
-          branchOptions: branch?.branchOptions,
-        };
-      }
-    );
-  })();
+  const messageMetadata = getMessagesMetadataMap({
+    initialValues: options.initialValues,
+    history: history.data,
+    getMessages,
+    branchContext,
+  });
 
   const stop = () =>
     stream.stop(historyValues, {
@@ -555,6 +540,7 @@ export function useStreamLGP<
 
         initialValues: historyValues,
         callbacks: options,
+
         async onSuccess() {
           runMetadataStorage?.removeItem(`lg:stream:${threadId}`);
           const newHistory = await history.mutate(threadId);
@@ -645,32 +631,11 @@ export function useStreamLGP<
     },
 
     get interrupt() {
-      if (
-        values != null &&
-        "__interrupt__" in values &&
-        Array.isArray(values.__interrupt__)
-      ) {
-        const valueInterrupts = values.__interrupt__;
-        if (valueInterrupts.length === 0) return { when: "breakpoint" };
-        if (valueInterrupts.length === 1) return valueInterrupts[0];
-
-        // TODO: fix the typing of interrupts if multiple interrupts are returned
-        return valueInterrupts;
-      }
-
-      // If we're deferring to old interrupt detection logic, don't show the interrupt if the stream is loading
-      if (stream.isLoading) return undefined;
-
-      const interrupts = branchContext.threadHead?.tasks?.at(-1)?.interrupts;
-      if (interrupts == null || interrupts.length === 0) {
-        // check if there's a next task present
-        const next = branchContext.threadHead?.next ?? [];
-        if (!next.length || error != null) return undefined;
-        return { when: "breakpoint" };
-      }
-
-      // Return only the current interrupt
-      return interrupts.at(-1) as Interrupt<InterruptType> | undefined;
+      return extractInterrupts<InterruptType>(values, {
+        error,
+        isLoading: stream.isLoading,
+        threadState: branchContext.threadHead,
+      });
     },
 
     get messages() {
diff --git a/libs/sdk/src/react/stream.tsx b/libs/sdk/src/react/stream.tsx
index be7bd8b70..a6bb4c628 100644
--- a/libs/sdk/src/react/stream.tsx
+++ b/libs/sdk/src/react/stream.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { useStreamLGP } from "./stream.lgp.js";
 import { useStreamCustom } from "./stream.custom.js";
-import {
-  BagTemplate,
+import type { BagTemplate, UseStreamOptions } from "../ui/types.js";
+import type {
   UseStream,
   UseStreamCustom,
   UseStreamCustomOptions,
-  UseStreamOptions,
 } from "./types.js";
 
 function isCustomOptions<
diff --git a/libs/sdk/src/react/types.tsx b/libs/sdk/src/react/types.tsx
index bed7feffd..7149b8bb4 100644
--- a/libs/sdk/src/react/types.tsx
+++ b/libs/sdk/src/react/types.tsx
@@ -1,5 +1,4 @@
-/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */
-import type { Client, ClientConfig } from "../client.js";
+import type { Client } from "../client.js";
 
 import type {
   ThreadState,
@@ -16,292 +15,17 @@ import type {
   Durability,
 } from "../types.js";
 import type { Message } from "../types.messages.js";
-import type {
-  UpdatesStreamEvent,
-  CustomStreamEvent,
-  MetadataStreamEvent,
-  EventsStreamEvent,
-  DebugStreamEvent,
-  CheckpointsStreamEvent,
-  TasksStreamEvent,
-  StreamMode,
-} from "../types.stream.js";
+import type { StreamMode } from "../types.stream.js";
 import type { Sequence } from "../ui/branching.js";
-
-export type MessageMetadata<StateType extends Record<string, unknown>> = {
-  /**
-   * The ID of the message used.
-   */
-  messageId: string;
-
-  /**
-   * The first thread state the message was seen in.
-   */
-  firstSeenState: ThreadState<StateType> | undefined;
-
-  /**
-   * The branch of the message.
-   */
-  branch: string | undefined;
-
-  /**
-   * The list of branches this message is part of.
-   * This is useful for displaying branching controls.
-   */
-  branchOptions: string[] | undefined;
-
-  /**
-   * Metadata sent alongside the message during run streaming.
-   * @remarks This metadata only exists temporarily in browser memory during streaming and is not persisted after completion.
-   */
-  streamMetadata: Record<string, unknown> | undefined;
-};
-
-export type BagTemplate = {
-  ConfigurableType?: Record<string, unknown>;
-  InterruptType?: unknown;
-  CustomEventType?: unknown;
-  UpdateType?: unknown;
-};
-
-export type GetUpdateType<
-  Bag extends BagTemplate,
-  StateType extends Record<string, unknown>
-> = Bag extends { UpdateType: unknown }
-  ? Bag["UpdateType"]
-  : Partial<StateType>;
-
-export type GetConfigurableType<Bag extends BagTemplate> = Bag extends {
-  ConfigurableType: Record<string, unknown>;
-}
-  ? Bag["ConfigurableType"]
-  : Record<string, unknown>;
-
-export type GetInterruptType<Bag extends BagTemplate> = Bag extends {
-  InterruptType: unknown;
-}
-  ? Bag["InterruptType"]
-  : unknown;
-
-export type GetCustomEventType<Bag extends BagTemplate> = Bag extends {
-  CustomEventType: unknown;
-}
-  ? Bag["CustomEventType"]
-  : unknown;
-
-export interface RunCallbackMeta {
-  run_id: string;
-  thread_id: string;
-}
-
-export interface UseStreamThread<StateType extends Record<string, unknown>> {
-  data: ThreadState<StateType>[] | null | undefined;
-  error: unknown;
-  isLoading: boolean;
-  mutate: (
-    mutateId?: string
-  ) => Promise<ThreadState<StateType>[] | null | undefined>;
-}
-
-export interface UseStreamOptions<
-  StateType extends Record<string, unknown> = Record<string, unknown>,
-  Bag extends BagTemplate = BagTemplate
-> {
-  /**
-   * The ID of the assistant to use.
-   */
-  assistantId: string;
-
-  /**
-   * Client used to send requests.
-   */
-  client?: Client;
-
-  /**
-   * The URL of the API to use.
-   */
-  apiUrl?: ClientConfig["apiUrl"];
-
-  /**
-   * The API key to use.
-   */
-  apiKey?: ClientConfig["apiKey"];
-
-  /**
-   * Custom call options, such as custom fetch implementation.
-   */
-  callerOptions?: ClientConfig["callerOptions"];
-
-  /**
-   * Default headers to send with requests.
-   */
-  defaultHeaders?: ClientConfig["defaultHeaders"];
-
-  /**
-   * Specify the key within the state that contains messages.
-   * Defaults to "messages".
-   *
-   * @default "messages"
-   */
-  messagesKey?: string;
-
-  /**
-   * Callback that is called when an error occurs.
-   */
-  onError?: (error: unknown, run: RunCallbackMeta | undefined) => void;
-
-  /**
-   * Callback that is called when the stream is finished.
-   */
-  onFinish?: (
-    state: ThreadState<StateType>,
-    run: RunCallbackMeta | undefined
-  ) => void;
-
-  /**
-   * Callback that is called when a new stream is created.
-   */
-  onCreated?: (run: RunCallbackMeta) => void;
-
-  /**
-   * Callback that is called when an update event is received.
-   */
-  onUpdateEvent?: (
-    data: UpdatesStreamEvent<GetUpdateType<Bag, StateType>>["data"],
-    options: {
-      namespace: string[] | undefined;
-      mutate: (
-        update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
-      ) => void;
-    }
-  ) => void;
-
-  /**
-   * Callback that is called when a custom event is received.
-   */
-  onCustomEvent?: (
-    data: CustomStreamEvent<GetCustomEventType<Bag>>["data"],
-    options: {
-      namespace: string[] | undefined;
-      mutate: (
-        update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
-      ) => void;
-    }
-  ) => void;
-
-  /**
-   * Callback that is called when a metadata event is received.
-   */
-  onMetadataEvent?: (data: MetadataStreamEvent["data"]) => void;
-
-  /**
-   * Callback that is called when a LangChain event is received.
-   * @see https://langchain-ai.github.io/langgraph/cloud/how-tos/stream_events/#stream-graph-in-events-mode for more details.
-   */
-  onLangChainEvent?: (data: EventsStreamEvent["data"]) => void;
-
-  /**
-   * Callback that is called when a debug event is received.
-   * @internal This API is experimental and subject to change.
-   */
-  onDebugEvent?: (
-    data: DebugStreamEvent["data"],
-    options: { namespace: string[] | undefined }
-  ) => void;
-
-  /**
-   * Callback that is called when a checkpoints event is received.
-   */
-  onCheckpointEvent?: (
-    data: CheckpointsStreamEvent<StateType>["data"],
-    options: { namespace: string[] | undefined }
-  ) => void;
-
-  /**
-   * Callback that is called when a tasks event is received.
-   */
-  onTaskEvent?: (
-    data: TasksStreamEvent<StateType, GetUpdateType<Bag, StateType>>["data"],
-    options: { namespace: string[] | undefined }
-  ) => void;
-
-  /**
-   * Callback that is called when the stream is stopped by the user.
-   * Provides a mutate function to update the stream state immediately
-   * without requiring a server roundtrip.
-   *
-   * @example
-   * ```typescript
-   * onStop: ({ mutate }) => {
-   *   mutate((prev) => ({
-   *     ...prev,
-   *     ui: prev.ui?.map(component =>
-   *       component.props.isLoading
-   *         ? { ...component, props: { ...component.props, stopped: true, isLoading: false }}
-   *         : component
-   *     )
-   *   }));
-   * }
-   * ```
-   */
-  onStop?: (options: {
-    mutate: (
-      update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
-    ) => void;
-  }) => void;
-
-  /**
-   * The ID of the thread to fetch history and current values from.
-   */
-  threadId?: string | null;
-
-  /**
-   * Callback that is called when the thread ID is updated (ie when a new thread is created).
-   */
-  onThreadId?: (threadId: string) => void;
-
-  /** Will reconnect the stream on mount */
-  reconnectOnMount?: boolean | (() => RunMetadataStorage);
-
-  /**
-   * Initial values to display immediately when loading a thread.
-   * Useful for displaying cached thread data while official history loads.
-   * These values will be replaced when official thread data is fetched.
-   *
-   * Note: UI components from initialValues will render immediately if they're
-   * predefined in LoadExternalComponent's components prop, providing instant
-   * cached UI display without server fetches.
-   */
-  initialValues?: StateType | null;
-
-  /**
-   * Whether to fetch the history of the thread.
-   * If true, the history will be fetched from the server. Defaults to 10 entries.
-   * If false, only the last state will be fetched from the server.
-   * @default true
-   */
-  fetchStateHistory?: boolean | { limit: number };
-
-  /**
-   * Manage the thread state externally.
-   */
-  thread?: UseStreamThread<StateType>;
-
-  /**
-   * Throttle the stream.
-   * If a number is provided, the stream will be throttled to the given number of milliseconds.
-   * If `true`, updates are batched in a single macrotask.
-   * If `false`, updates are not throttled or batched.
-   * @default true
-   */
-  throttle?: number | boolean;
-}
-
-interface RunMetadataStorage {
-  getItem(key: `lg:stream:${string}`): string | null;
-  setItem(key: `lg:stream:${string}`, value: string): void;
-  removeItem(key: `lg:stream:${string}`): void;
-}
+import type {
+  BagTemplate,
+  GetUpdateType,
+  GetConfigurableType,
+  GetInterruptType,
+  MessageMetadata,
+  UseStreamOptions,
+  UseStreamTransport,
+} from "../ui/index.js";
 
 export interface UseStream<
   StateType extends Record<string, unknown> = Record<string, unknown>,
@@ -461,23 +185,6 @@ export interface SubmitOptions<
   threadId?: string;
 }
 
-/**
- * Transport used to stream the thread.
- * Only applicable for custom endpoints using `toLangGraphEventStream` or `toLangGraphEventStreamResponse`.
- */
-export interface UseStreamTransport<
-  StateType extends Record<string, unknown> = Record<string, unknown>,
-  Bag extends BagTemplate = BagTemplate
-> {
-  stream: (payload: {
-    input: GetUpdateType<Bag, StateType> | null | undefined;
-    context: GetConfigurableType<Bag> | undefined;
-    command: Command | undefined;
-    config: ConfigWithConfigurable<GetConfigurableType<Bag>> | undefined;
-    signal: AbortSignal;
-  }) => Promise<AsyncGenerator<{ id?: string; event: string; data: unknown }>>;
-}
-
 export type UseStreamCustomOptions<
   StateType extends Record<string, unknown> = Record<string, unknown>,
   Bag extends BagTemplate = BagTemplate
@@ -497,6 +204,7 @@ export type UseStreamCustomOptions<
   | "onTaskEvent"
   | "onStop"
   | "initialValues"
+  | "thread"
   | "throttle"
 > & { transport: UseStreamTransport<StateType, Bag> };
 
diff --git a/libs/sdk/src/ui/branching.ts b/libs/sdk/src/ui/branching.ts
index 1c08d0eec..356a22580 100644
--- a/libs/sdk/src/ui/branching.ts
+++ b/libs/sdk/src/ui/branching.ts
@@ -1,4 +1,6 @@
 import type { ThreadState } from "../schema.js";
+import { Message } from "../types.messages.js";
+import { findLast } from "./utils.js";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface Node<StateType = any> {
@@ -149,6 +151,11 @@ export function getBranchSequence<StateType extends Record<string, unknown>>(
 const PATH_SEP = ">";
 const ROOT_ID = "$";
 
+type BranchByCheckpoint = Record<
+  string,
+  { branch: string | undefined; branchOptions: string[] | undefined }
+>;
+
 // Get flat view
 export function getBranchView<StateType extends Record<string, unknown>>(
   sequence: Sequence<StateType>,
@@ -165,10 +172,7 @@ export function getBranchView<StateType extends Record<string, unknown>>(
   }
 
   const history: ThreadState<StateType>[] = [];
-  const branchByCheckpoint: Record<
-    string,
-    { branch: string | undefined; branchOptions: string[] | undefined }
-  > = {};
+  const branchByCheckpoint: BranchByCheckpoint = {};
 
   const forkStack = path.slice();
   const queue: (Node<StateType> | Fork<StateType>)[] = [...sequence.items];
@@ -226,3 +230,56 @@ export function getBranchContext<StateType extends Record<string, unknown>>(
     threadHead: flatHistory.at(-1),
   };
 }
+
+export function getMessagesMetadataMap<
+  StateType extends Record<string, unknown>
+>(options: {
+  initialValues: StateType | null | undefined;
+  history: ThreadState<StateType>[] | null | undefined;
+  getMessages: (values: StateType) => Message[];
+
+  branchContext: {
+    threadHead: ThreadState<StateType> | undefined;
+    branchByCheckpoint: BranchByCheckpoint;
+  };
+}) {
+  const currentValues =
+    options.branchContext.threadHead?.values ??
+    options.initialValues ??
+    ({} as StateType);
+
+  const alreadyShown = new Set<string>();
+  return options.getMessages(currentValues).map((message, idx) => {
+    const messageId = message.id ?? idx;
+
+    // Find the first checkpoint where the message was seen
+    const firstSeenState = findLast(options.history ?? [], (state) =>
+      options
+        .getMessages(state.values)
+        .map((m, idx) => m.id ?? idx)
+        .includes(messageId)
+    );
+
+    const checkpointId = firstSeenState?.checkpoint?.checkpoint_id;
+    let branch =
+      checkpointId != null
+        ? options.branchContext.branchByCheckpoint[checkpointId]
+        : undefined;
+    if (!branch?.branch?.length) branch = undefined;
+
+    // serialize branches
+    const optionsShown = branch?.branchOptions?.flat(2).join(",");
+    if (optionsShown) {
+      if (alreadyShown.has(optionsShown)) branch = undefined;
+      alreadyShown.add(optionsShown);
+    }
+
+    return {
+      messageId: messageId.toString(),
+      firstSeenState,
+
+      branch: branch?.branch,
+      branchOptions: branch?.branchOptions,
+    };
+  });
+}
diff --git a/libs/sdk/src/ui/index.ts b/libs/sdk/src/ui/index.ts
new file mode 100644
index 000000000..63f1f6511
--- /dev/null
+++ b/libs/sdk/src/ui/index.ts
@@ -0,0 +1,7 @@
+export type * from "./types.js";
+export { MessageTupleManager } from "./messages.js";
+export { StreamManager, type EventStreamEvent } from "./manager.js";
+export { getBranchContext, getMessagesMetadataMap } from "./branching.js";
+export { StreamError } from "./errors.js";
+export { extractInterrupts } from "./interrupts.js";
+export { unique, findLast } from "./utils.js";
diff --git a/libs/sdk/src/ui/interrupts.ts b/libs/sdk/src/ui/interrupts.ts
new file mode 100644
index 000000000..b8b45a95d
--- /dev/null
+++ b/libs/sdk/src/ui/interrupts.ts
@@ -0,0 +1,38 @@
+import { Interrupt, ThreadState } from "../schema.js";
+
+export function extractInterrupts<InterruptType = unknown>(
+  values: unknown,
+  options?: {
+    isLoading: boolean;
+    threadState: ThreadState | undefined;
+    error: unknown;
+  }
+): Interrupt<InterruptType> | undefined {
+  if (
+    typeof values === "object" &&
+    values != null &&
+    "__interrupt__" in values &&
+    Array.isArray(values.__interrupt__)
+  ) {
+    const valueInterrupts = values.__interrupt__;
+    if (valueInterrupts.length === 0) return { when: "breakpoint" };
+    if (valueInterrupts.length === 1) return valueInterrupts[0];
+
+    // TODO: fix the typing of interrupts if multiple interrupts are returned
+    return valueInterrupts as unknown as Interrupt<InterruptType> | undefined;
+  }
+
+  // If we're deferring to old interrupt detection logic, don't show the interrupt if the stream is loading
+  if (options?.isLoading) return undefined;
+
+  const interrupts = options?.threadState?.tasks?.at(-1)?.interrupts;
+  if (interrupts == null || interrupts.length === 0) {
+    // check if there's a next task present
+    const next = options?.threadState?.next ?? [];
+    if (!next.length || options?.error != null) return undefined;
+    return { when: "breakpoint" };
+  }
+
+  // Return only the current interrupt
+  return interrupts.at(-1) as Interrupt<InterruptType> | undefined;
+}
diff --git a/libs/sdk/src/ui/types.ts b/libs/sdk/src/ui/types.ts
new file mode 100644
index 000000000..1ed239408
--- /dev/null
+++ b/libs/sdk/src/ui/types.ts
@@ -0,0 +1,368 @@
+import type { Client, ClientConfig } from "../client.js";
+
+import type { ThreadState, Config, Checkpoint, Metadata } from "../schema.js";
+import type {
+  Command,
+  MultitaskStrategy,
+  OnCompletionBehavior,
+  DisconnectMode,
+  Durability,
+} from "../types.js";
+import type {
+  UpdatesStreamEvent,
+  CustomStreamEvent,
+  MetadataStreamEvent,
+  EventsStreamEvent,
+  DebugStreamEvent,
+  CheckpointsStreamEvent,
+  TasksStreamEvent,
+  StreamMode,
+} from "../types.stream.js";
+
+export type MessageMetadata<StateType extends Record<string, unknown>> = {
+  /**
+   * The ID of the message used.
+   */
+  messageId: string;
+
+  /**
+   * The first thread state the message was seen in.
+   */
+  firstSeenState: ThreadState<StateType> | undefined;
+
+  /**
+   * The branch of the message.
+   */
+  branch: string | undefined;
+
+  /**
+   * The list of branches this message is part of.
+   * This is useful for displaying branching controls.
+   */
+  branchOptions: string[] | undefined;
+
+  /**
+   * Metadata sent alongside the message during run streaming.
+   * @remarks This metadata only exists temporarily in browser memory during streaming and is not persisted after completion.
+   */
+  streamMetadata: Record<string, unknown> | undefined;
+};
+
+export type BagTemplate = {
+  ConfigurableType?: Record<string, unknown>;
+  InterruptType?: unknown;
+  CustomEventType?: unknown;
+  UpdateType?: unknown;
+};
+
+export type GetUpdateType<
+  Bag extends BagTemplate,
+  StateType extends Record<string, unknown>
+> = Bag extends { UpdateType: unknown }
+  ? Bag["UpdateType"]
+  : Partial<StateType>;
+
+export type GetConfigurableType<Bag extends BagTemplate> = Bag extends {
+  ConfigurableType: Record<string, unknown>;
+}
+  ? Bag["ConfigurableType"]
+  : Record<string, unknown>;
+
+export type GetInterruptType<Bag extends BagTemplate> = Bag extends {
+  InterruptType: unknown;
+}
+  ? Bag["InterruptType"]
+  : unknown;
+
+export type GetCustomEventType<Bag extends BagTemplate> = Bag extends {
+  CustomEventType: unknown;
+}
+  ? Bag["CustomEventType"]
+  : unknown;
+
+export interface RunCallbackMeta {
+  run_id: string;
+  thread_id: string;
+}
+
+export interface UseStreamThread<StateType extends Record<string, unknown>> {
+  data: ThreadState<StateType>[] | null | undefined;
+  error: unknown;
+  isLoading: boolean;
+  mutate: (
+    mutateId?: string
+  ) => Promise<ThreadState<StateType>[] | null | undefined>;
+}
+
+export interface UseStreamOptions<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends BagTemplate = BagTemplate
+> {
+  /**
+   * The ID of the assistant to use.
+   */
+  assistantId: string;
+
+  /**
+   * Client used to send requests.
+   */
+  client?: Client;
+
+  /**
+   * The URL of the API to use.
+   */
+  apiUrl?: ClientConfig["apiUrl"];
+
+  /**
+   * The API key to use.
+   */
+  apiKey?: ClientConfig["apiKey"];
+
+  /**
+   * Custom call options, such as custom fetch implementation.
+   */
+  callerOptions?: ClientConfig["callerOptions"];
+
+  /**
+   * Default headers to send with requests.
+   */
+  defaultHeaders?: ClientConfig["defaultHeaders"];
+
+  /**
+   * Specify the key within the state that contains messages.
+   * Defaults to "messages".
+   *
+   * @default "messages"
+   */
+  messagesKey?: string;
+
+  /**
+   * Callback that is called when an error occurs.
+   */
+  onError?: (error: unknown, run: RunCallbackMeta | undefined) => void;
+
+  /**
+   * Callback that is called when the stream is finished.
+   */
+  onFinish?: (
+    state: ThreadState<StateType>,
+    run: RunCallbackMeta | undefined
+  ) => void;
+
+  /**
+   * Callback that is called when a new stream is created.
+   */
+  onCreated?: (run: RunCallbackMeta) => void;
+
+  /**
+   * Callback that is called when an update event is received.
+   */
+  onUpdateEvent?: (
+    data: UpdatesStreamEvent<GetUpdateType<Bag, StateType>>["data"],
+    options: {
+      namespace: string[] | undefined;
+      mutate: (
+        update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
+      ) => void;
+    }
+  ) => void;
+
+  /**
+   * Callback that is called when a custom event is received.
+   */
+  onCustomEvent?: (
+    data: CustomStreamEvent<GetCustomEventType<Bag>>["data"],
+    options: {
+      namespace: string[] | undefined;
+      mutate: (
+        update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
+      ) => void;
+    }
+  ) => void;
+
+  /**
+   * Callback that is called when a metadata event is received.
+   */
+  onMetadataEvent?: (data: MetadataStreamEvent["data"]) => void;
+
+  /**
+   * Callback that is called when a LangChain event is received.
+   * @see https://langchain-ai.github.io/langgraph/cloud/how-tos/stream_events/#stream-graph-in-events-mode for more details.
+   */
+  onLangChainEvent?: (data: EventsStreamEvent["data"]) => void;
+
+  /**
+   * Callback that is called when a debug event is received.
+   * @internal This API is experimental and subject to change.
+   */
+  onDebugEvent?: (
+    data: DebugStreamEvent["data"],
+    options: { namespace: string[] | undefined }
+  ) => void;
+
+  /**
+   * Callback that is called when a checkpoints event is received.
+   */
+  onCheckpointEvent?: (
+    data: CheckpointsStreamEvent<StateType>["data"],
+    options: { namespace: string[] | undefined }
+  ) => void;
+
+  /**
+   * Callback that is called when a tasks event is received.
+   */
+  onTaskEvent?: (
+    data: TasksStreamEvent<StateType, GetUpdateType<Bag, StateType>>["data"],
+    options: { namespace: string[] | undefined }
+  ) => void;
+
+  /**
+   * Callback that is called when the stream is stopped by the user.
+   * Provides a mutate function to update the stream state immediately
+   * without requiring a server roundtrip.
+   *
+   * @example
+   * ```typescript
+   * onStop: ({ mutate }) => {
+   *   mutate((prev) => ({
+   *     ...prev,
+   *     ui: prev.ui?.map(component =>
+   *       component.props.isLoading
+   *         ? { ...component, props: { ...component.props, stopped: true, isLoading: false }}
+   *         : component
+   *     )
+   *   }));
+   * }
+   * ```
+   */
+  onStop?: (options: {
+    mutate: (
+      update: Partial<StateType> | ((prev: StateType) => Partial<StateType>)
+    ) => void;
+  }) => void;
+
+  /**
+   * The ID of the thread to fetch history and current values from.
+   */
+  threadId?: string | null;
+
+  /**
+   * Callback that is called when the thread ID is updated (ie when a new thread is created).
+   */
+  onThreadId?: (threadId: string) => void;
+
+  /** Will reconnect the stream on mount */
+  reconnectOnMount?: boolean | (() => RunMetadataStorage);
+
+  /**
+   * Initial values to display immediately when loading a thread.
+   * Useful for displaying cached thread data while official history loads.
+   * These values will be replaced when official thread data is fetched.
+   *
+   * Note: UI components from initialValues will render immediately if they're
+   * predefined in LoadExternalComponent's components prop, providing instant
+   * cached UI display without server fetches.
+   */
+  initialValues?: StateType | null;
+
+  /**
+   * Whether to fetch the history of the thread.
+   * If true, the history will be fetched from the server. Defaults to 10 entries.
+   * If false, only the last state will be fetched from the server.
+   * @default true
+   */
+  fetchStateHistory?: boolean | { limit: number };
+
+  /**
+   * Manage the thread state externally.
+   */
+  thread?: UseStreamThread<StateType>;
+
+  /**
+   * Throttle the stream.
+   * If a number is provided, the stream will be throttled to the given number of milliseconds.
+   * If `true`, updates are batched in a single macrotask.
+   * If `false`, updates are not throttled or batched.
+   * @default true
+   */
+  throttle?: number | boolean;
+}
+
+interface RunMetadataStorage {
+  getItem(key: `lg:stream:${string}`): string | null;
+  setItem(key: `lg:stream:${string}`, value: string): void;
+  removeItem(key: `lg:stream:${string}`): void;
+}
+
+type ConfigWithConfigurable<ConfigurableType extends Record<string, unknown>> =
+  Config & { configurable?: ConfigurableType };
+
+export interface SubmitOptions<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  ContextType extends Record<string, unknown> = Record<string, unknown>
+> {
+  config?: ConfigWithConfigurable<ContextType>;
+  context?: ContextType;
+  checkpoint?: Omit<Checkpoint, "thread_id"> | null;
+  command?: Command;
+  interruptBefore?: "*" | string[];
+  interruptAfter?: "*" | string[];
+  metadata?: Metadata;
+  multitaskStrategy?: MultitaskStrategy;
+  onCompletion?: OnCompletionBehavior;
+  onDisconnect?: DisconnectMode;
+  feedbackKeys?: string[];
+  streamMode?: Array<StreamMode>;
+  runId?: string;
+  optimisticValues?:
+    | Partial<StateType>
+    | ((prev: StateType) => Partial<StateType>);
+
+  /**
+   * Whether or not to stream the nodes of any subgraphs called
+   * by the assistant.
+   * @default false
+   */
+  streamSubgraphs?: boolean;
+
+  /**
+   * Mark the stream as resumable. All events emitted during the run will be temporarily persisted
+   * in order to be re-emitted if the stream is re-joined.
+   * @default false
+   */
+  streamResumable?: boolean;
+
+  /**
+   * Whether to checkpoint during the run (or only at the end/interruption).
+   * - `"async"`: Save checkpoint asynchronously while the next step executes (default).
+   * - `"sync"`: Save checkpoint synchronously before the next step starts.
+   * - `"exit"`: Save checkpoint only when the graph exits.
+   * @default "async"
+   */
+  durability?: Durability;
+
+  /**
+   * The ID to use when creating a new thread. When provided, this ID will be used
+   * for thread creation when threadId is `null` or `undefined`.
+   * This enables optimistic UI updates where you know the thread ID
+   * before the thread is actually created.
+   */
+  threadId?: string;
+}
+
+/**
+ * Transport used to stream the thread.
+ * Only applicable for custom endpoints using `toLangGraphEventStream` or `toLangGraphEventStreamResponse`.
+ */
+export interface UseStreamTransport<
+  StateType extends Record<string, unknown> = Record<string, unknown>,
+  Bag extends BagTemplate = BagTemplate
+> {
+  stream: (payload: {
+    input: GetUpdateType<Bag, StateType> | null | undefined;
+    context: GetConfigurableType<Bag> | undefined;
+    command: Command | undefined;
+    config: ConfigWithConfigurable<GetConfigurableType<Bag>> | undefined;
+    signal: AbortSignal;
+  }) => Promise<AsyncGenerator<{ id?: string; event: string; data: unknown }>>;
+}