langchain-ai · dqbd · Sep 18, 2025 · Sep 14, 2025 · Sep 14, 2025 · Sep 14, 2025
diff --git a/examples/stream-transport-vite/.gitignore b/examples/stream-transport-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/stream-transport-vite/index.html b/examples/stream-transport-vite/index.html
@@ -0,0 +1,14 @@
+<!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" />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client.tsx"></script>
+  </body>
+</html>
diff --git a/examples/stream-transport-vite/package.json b/examples/stream-transport-vite/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "stream-transport-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev:client": "vite",
+    "dev:server": "tsx watch --env-file=.env --clear-screen=false src/server.mts",
+    "build:internal": "tsc -b && vite build",
+    "format": "prettier --write src",
+    "lint": "prettier --check src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.12.0",
+    "@langchain/core": "^1.0.0-alpha",
+    "@langchain/langgraph": "workspace:*",
+    "@langchain/langgraph-sdk": "workspace:*",
+    "@langchain/openai": "^1.0.0-alpha",
+    "hono": "^4.8.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "prettier": "^2.8.3",
+    "tsx": "^4.19.3",
+    "typescript": "~5.8.3",
+    "vite": "^6.0.0"
+  }
+}
diff --git a/examples/stream-transport-vite/src/client.css b/examples/stream-transport-vite/src/client.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/examples/stream-transport-vite/src/client.tsx b/examples/stream-transport-vite/src/client.tsx
@@ -0,0 +1,61 @@
+import "./client.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import {
+  useStream,
+  FetchStreamTransport,
+} from "@langchain/langgraph-sdk/react";
+
+export function App() {
+  const stream = useStream({
+    transport: new FetchStreamTransport({
+      apiUrl: "/api/stream",
+    }),
+  });
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <div className="flex flex-col gap-2">
+        {stream.messages.map((message) => (
+          <div key={message.id} className="whitespace-pre-wrap">
+            {message.content as string}
+          </div>
+        ))}
+      </div>
+      <form
+        className="grid grid-cols-[1fr_auto] gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          const form = e.target as HTMLFormElement;
+          const formData = new FormData(form);
+          const content = formData.get("content") as string;
+
+          form.reset();
+          stream.submit({ messages: [{ content, type: "human" }] });
+        }}
+      >
+        <textarea
+          name="content"
+          className="field-sizing-content"
+          onKeyDown={(e) => {
+            const target = e.target as HTMLTextAreaElement;
+
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              target.form?.requestSubmit();
+            }
+          }}
+        />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/examples/stream-transport-vite/src/server.mts b/examples/stream-transport-vite/src/server.mts
@@ -0,0 +1,42 @@
+import type { BaseMessage } from "@langchain/core/messages";
+import { StateGraph, MessagesZodMeta, START } from "@langchain/langgraph";
+import { toLangGraphEventStreamResponse } from "@langchain/langgraph/ui";
+import { registry } from "@langchain/langgraph/zod";
+import { ChatOpenAI } from "@langchain/openai";
+import { z } from "zod/v4";
+
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+
+const llm = new ChatOpenAI({ model: "gpt-4o-mini" });
+
+const graph = new StateGraph(
+  z.object({
+    messages: z.custom<BaseMessage[]>().register(registry, MessagesZodMeta),
+  })
+)
+  .addNode("agent", async ({ messages }) => ({
+    messages: await llm.invoke(messages),
+  }))
+  .addEdge(START, "agent")
+  .compile();
+
+export type GraphType = typeof graph;
+
+const app = new Hono();
+
+app.post("/api/stream", async (c) => {
+  type InputType = GraphType["~InputType"];
+  const { input } = await c.req.json<{ input: InputType }>();
+
+  return toLangGraphEventStreamResponse({
+    stream: graph.streamEvents(input, {
+      version: "v2",
+      streamMode: ["values", "messages"],
+    }),
+  });
+});
+
+serve({ fetch: app.fetch, port: 9123 }, (c) => {
+  console.log(`Server running at ${c.address}:${c.port}`);
+});
diff --git a/examples/stream-transport-vite/src/vite-env.d.ts b/examples/stream-transport-vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/stream-transport-vite/tsconfig.app.json b/examples/stream-transport-vite/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/stream-transport-vite/tsconfig.json b/examples/stream-transport-vite/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/examples/stream-transport-vite/tsconfig.node.json b/examples/stream-transport-vite/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/stream-transport-vite/turbo.json b/examples/stream-transport-vite/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
+    }
+  }
+}
diff --git a/examples/stream-transport-vite/vite.config.ts b/examples/stream-transport-vite/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  clearScreen: false,
+  server: { proxy: { "/api": "http://localhost:9123" } },
+});
diff --git a/libs/sdk/src/react/index.ts b/libs/sdk/src/react/index.ts
@@ -1,2 +1,10 @@
 export { useStream } from "./stream.js";
-export type { MessageMetadata, UseStream, UseStreamOptions } from "./types.js";
+export { FetchStreamTransport } from "./stream.custom.js";
+export type {
+  MessageMetadata,
+  UseStream,
+  UseStreamOptions,
+  UseStreamCustom,
+  UseStreamCustomOptions,
+  UseStreamTransport,
+} from "./types.js";