diff --git a/examples/how-tos/use-in-web-environments.ipynb b/examples/how-tos/use-in-web-environments.ipynb index a4612e89..7df80dca 100644 --- a/examples/how-tos/use-in-web-environments.ipynb +++ b/examples/how-tos/use-in-web-environments.ipynb @@ -42,29 +42,22 @@ " END,\n", " START,\n", " StateGraph,\n", - " StateGraphArgs,\n", + " Annotation,\n", "} from \"@langchain/langgraph/web\";\n", - "import { HumanMessage } from \"@langchain/core/messages\";\n", + "import { BaseMessage, HumanMessage } from \"@langchain/core/messages\";\n", "\n", - "// Define the state interface\n", - "interface AgentState {\n", - " messages: HumanMessage[];\n", - "}\n", - "\n", - "// Define the graph state\n", - "const graphState: StateGraphArgs[\"channels\"] = {\n", - " messages: {\n", - " value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n", - " default: () => [],\n", - " },\n", - "};\n", + "const GraphState = Annotation.Root({\n", + " messages: Annotation({\n", + " reducer: (x, y) => x.concat(y),\n", + " }),\n", + "});\n", "\n", - "const nodeFn = async (_state: AgentState) => {\n", + "const nodeFn = async (_state: typeof GraphState.State) => {\n", " return { messages: [new HumanMessage(\"Hello from the browser!\")] };\n", "};\n", "\n", "// Define a new graph\n", - "const workflow = new StateGraph({ channels: graphState })\n", + "const workflow = new StateGraph(GraphState)\n", " .addNode(\"node\", nodeFn)\n", " .addEdge(START, \"node\")\n", " .addEdge(\"node\", END);\n", @@ -118,10 +111,23 @@ "metadata": {}, "outputs": [ { - "name": "stdout", + "name": "stderr", "output_type": "stream", "text": [ - "Received 0 events from the nested function\n" + "evalmachine.:41\n", + "for await (const event of eventStream2) {\n", + " ^^^^^\n", + "\n", + "SyntaxError: Unexpected reserved word\n", + " at new Script (node:vm:116:7)\n", + " at createScript (node:vm:268:10)\n", + " at Object.runInThisContext (node:vm:316:10)\n", + " at Object.execute (/Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/executor.js:160:38)\n", + " at JupyterHandlerImpl.handleExecuteImpl (/Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/jupyter.js:250:38)\n", + " at /Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/jupyter.js:208:57\n", + " at async JupyterHandlerImpl.handleExecute (/Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/jupyter.js:208:21)\n", + " at async ZmqServer.handleExecute (/Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/jupyter.js:406:25)\n", + " at async ZmqServer.handleShellMessage (/Users/bracesproul/code/lang-chain-ai/langgraphjs/examples/node_modules/tslab/dist/jupyter.js:351:21)\n" ] } ], @@ -131,26 +137,19 @@ " END,\n", " START,\n", " StateGraph,\n", - " StateGraphArgs,\n", + " Annotation,\n", "} from \"@langchain/langgraph/web\";\n", - "import { HumanMessage } from \"@langchain/core/messages\";\n", + "import { BaseMessage } from \"@langchain/core/messages\";\n", "import { RunnableLambda } from \"@langchain/core/runnables\";\n", "import { type StreamEvent } from \"@langchain/core/tracers/log_stream\";\n", "\n", - "// Define the state interface\n", - "interface AgentState {\n", - " messages: HumanMessage[];\n", - "}\n", - "\n", - "// Define the graph state\n", - "const graphState: StateGraphArgs[\"channels\"] = {\n", - " messages: {\n", - " value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n", - " default: () => [],\n", - " },\n", - "};\n", + "const GraphState2 = Annotation.Root({\n", + " messages: Annotation({\n", + " reducer: (x, y) => x.concat(y),\n", + " }),\n", + "});\n", "\n", - "const nodeFn = async (_state: AgentState) => {\n", + "const nodeFn2 = async (_state: typeof GraphState2.State) => {\n", " // Note that we do not pass any `config` through here\n", " const nestedFn = RunnableLambda.from(async (input: string) => {\n", " return new HumanMessage(`Hello from ${input}!`);\n", @@ -160,27 +159,27 @@ "};\n", "\n", "// Define a new graph\n", - "const workflow = new StateGraph({ channels: graphState })\n", - " .addNode(\"node\", nodeFn)\n", + "const workflow2 = new StateGraph(GraphState2)\n", + " .addNode(\"node\", nodeFn2)\n", " .addEdge(START, \"node\")\n", " .addEdge(\"node\", END);\n", "\n", - "const app = workflow.compile({});\n", + "const app2 = workflow2.compile({});\n", "\n", "// Stream intermediate steps from the graph\n", - "const eventStream = await app.streamEvents(\n", + "const eventStream2 = app2.streamEvents(\n", " { messages: [] },\n", " { version: \"v2\" },\n", " { includeNames: [\"nested\"] },\n", ");\n", "\n", - "const events: StreamEvent[] = [];\n", - "for await (const event of eventStream) {\n", + "const events2: StreamEvent[] = [];\n", + "for await (const event of eventStream2) {\n", " console.log(event);\n", - " events.push(event);\n", + " events2.push(event);\n", "}\n", "\n", - "console.log(`Received ${events.length} events from the nested function`);" + "console.log(`Received ${events2.length} events from the nested function`);" ] }, { @@ -195,7 +194,7 @@ }, { "cell_type": "code", - "execution_count": 3, + "execution_count": null, "metadata": {}, "outputs": [ { @@ -242,27 +241,20 @@ " END,\n", " START,\n", " StateGraph,\n", - " StateGraphArgs,\n", + " Annotation,\n", "} from \"@langchain/langgraph/web\";\n", - "import { HumanMessage } from \"@langchain/core/messages\";\n", + "import { BaseMessage } from \"@langchain/core/messages\";\n", "import { type RunnableConfig, RunnableLambda } from \"@langchain/core/runnables\";\n", "import { type StreamEvent } from \"@langchain/core/tracers/log_stream\";\n", "\n", - "// Define the state interface\n", - "interface AgentState {\n", - " messages: HumanMessage[];\n", - "}\n", - "\n", - "// Define the graph state\n", - "const graphState: StateGraphArgs[\"channels\"] = {\n", - " messages: {\n", - " value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n", - " default: () => [],\n", - " },\n", - "};\n", + "const GraphState3 = Annotation.Root({\n", + " messages: Annotation({\n", + " reducer: (x, y) => x.concat(y),\n", + " }),\n", + "});\n", "\n", "// Note the second argument here.\n", - "const nodeFn = async (_state: AgentState, config?: RunnableConfig) => {\n", + "const nodeFn3 = async (_state: typeof GraphState3.State, config?: RunnableConfig) => {\n", " // If you need to nest deeper, remember to pass `_config` when invoking\n", " const nestedFn = RunnableLambda.from(\n", " async (input: string, _config?: RunnableConfig) => {\n", @@ -274,27 +266,27 @@ "};\n", "\n", "// Define a new graph\n", - "const workflow = new StateGraph({ channels: graphState })\n", - " .addNode(\"node\", nodeFn)\n", + "const workflow3 = new StateGraph(GraphState3)\n", + " .addNode(\"node\", nodeFn3)\n", " .addEdge(START, \"node\")\n", " .addEdge(\"node\", END);\n", "\n", - "const app = workflow.compile({});\n", + "const app3 = workflow3.compile({});\n", "\n", "// Stream intermediate steps from the graph\n", - "const eventStream = await app.streamEvents(\n", + "const eventStream3 = app3.streamEvents(\n", " { messages: [] },\n", " { version: \"v2\" },\n", " { includeNames: [\"nested\"] },\n", ");\n", "\n", - "const events: StreamEvent[] = [];\n", - "for await (const event of eventStream) {\n", + "const events3: StreamEvent[] = [];\n", + "for await (const event of eventStream3) {\n", " console.log(event);\n", - " events.push(event);\n", + " events3.push(event);\n", "}\n", "\n", - "console.log(`Received ${events.length} events from the nested function`);" + "console.log(`Received ${events3.length} events from the nested function`);" ] }, { @@ -315,17 +307,20 @@ ], "metadata": { "kernelspec": { - "display_name": "Deno", + "display_name": "TypeScript", "language": "typescript", - "name": "deno" + "name": "tslab" }, "language_info": { + "codemirror_mode": { + "mode": "typescript", + "name": "javascript", + "typescript": true + }, "file_extension": ".ts", - "mimetype": "text/x.typescript", + "mimetype": "text/typescript", "name": "typescript", - "nb_converter": "script", - "pygments_lexer": "typescript", - "version": "5.3.3" + "version": "3.7.2" } }, "nbformat": 4,