Skip to content

Commit

Permalink
updated use in web env guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@bracesproul
bracesproul committed Aug 20, 2024
1 parent abd73ab commit 08b7cff
Showing 1 changed file with 66 additions and 71 deletions.
137 changes: 66 additions & 71 deletions examples/how-tos/use-in-web-environments.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<AgentState>[\"channels\"] = {\n",
" messages: {\n",
" value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n",
" default: () => [],\n",
" },\n",
"};\n",
"const GraphState = Annotation.Root({\n",
" messages: Annotation<BaseMessage[]>({\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<AgentState>({ channels: graphState })\n",
"const workflow = new StateGraph(GraphState)\n",
" .addNode(\"node\", nodeFn)\n",
" .addEdge(START, \"node\")\n",
" .addEdge(\"node\", END);\n",
Expand Down Expand Up @@ -118,10 +111,23 @@
"metadata": {},
"outputs": [
{
"name": "stdout",
"name": "stderr",
"output_type": "stream",
"text": [
"Received 0 events from the nested function\n"
"evalmachine.<anonymous>: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"
]
}
],
Expand All @@ -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<AgentState>[\"channels\"] = {\n",
" messages: {\n",
" value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n",
" default: () => [],\n",
" },\n",
"};\n",
"const GraphState2 = Annotation.Root({\n",
" messages: Annotation<BaseMessage[]>({\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",
Expand All @@ -160,27 +159,27 @@
"};\n",
"\n",
"// Define a new graph\n",
"const workflow = new StateGraph<AgentState>({ 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`);"
]
},
{
Expand All @@ -195,7 +194,7 @@
},
{
"cell_type": "code",
"execution_count": 3,
"execution_count": null,
"metadata": {},
"outputs": [
{
Expand Down Expand Up @@ -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<AgentState>[\"channels\"] = {\n",
" messages: {\n",
" value: (x: HumanMessage[], y: HumanMessage[]) => x.concat(y),\n",
" default: () => [],\n",
" },\n",
"};\n",
"const GraphState3 = Annotation.Root({\n",
" messages: Annotation<BaseMessage[]>({\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",
Expand All @@ -274,27 +266,27 @@
"};\n",
"\n",
"// Define a new graph\n",
"const workflow = new StateGraph<AgentState>({ 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`);"
]
},
{
Expand All @@ -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,
Expand Down

0 comments on commit 08b7cff

Please sign in to comment.