diff --git a/examples/stream-transport-vite/.gitignore b/examples/stream-transport-vite/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ 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 new file mode 100644 index 000000000..45bd05603 --- /dev/null +++ b/examples/stream-transport-vite/index.html @@ -0,0 +1,14 @@ + + + + + + + + Vite + React + TS + + +
+ + + diff --git a/examples/stream-transport-vite/package.json b/examples/stream-transport-vite/package.json new file mode 100644 index 000000000..049486c8d --- /dev/null +++ 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 new file mode 100644 index 000000000..f1d8c73cd --- /dev/null +++ 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 new file mode 100644 index 000000000..f613b8171 --- /dev/null +++ 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 ( +
+
+ {stream.messages.map((message) => ( +
+ {message.content as string} +
+ ))} +
+
{ + 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" }] }); + }} + > +