How and where to pass, SubGraph streming as True ?

[shailesh-numaai]

I am using Supervisor complied graph in Python like this

workflow = create_supervisor(
    [agent_add, agent_subtract, agent_multiply],
    model=ChatOpenAI(model="gpt-4o", temperature=0.2),
    prompt=supervisor_prompt,
)

graph = workflow.compile()

this is exposed via langgraph.json to frontend

{
  "dependencies": ["."],
  "graphs": {
    "supervisor": "./agents/supervisor.py:graph"
  },
  "env": ".env"
}

But I am struggling on how to enable custom message streaming from Tools called vai subgraph / agents to main chat UI. I suspect I am not sending subgraph = true for streaming from subgraph but not sure where to configure this in my case?

Already tried passing it hear

const handleSubmitEdit = () => {
    setIsEditing(false);

    const newMessage: Message = { type: "human", content: value };
    thread.submit(
      { messages: [newMessage] },
      {
        checkpoint: parentCheckpoint,
        streamMode: ["values"],
        **// @ts-ignore
        subgraphs: true,**
        optimisticValues: (prev) => {
          const values = meta?.firstSeenState?.values;
          if (!values) return prev;

          return {
            ...values,
            messages: [...(values.messages ?? []), newMessage],
          };
        },
      },
    );
  };

but no luck, anyone knows?

[michael-tomala]

I'm facing the same issue and have been investigating this. So far, here's what I've found:

1. Update your package.json
   First, you need to update to a newer version of @langchain/langgraph-sdk - the older versions didn't have support for stream_subgraphs functionality.
2. Add the parameter to all thread.submit() calls
   The parameter should be streamSubgraphs: true and you need to add it to all your thread.submit() calls throughout your application:

const handleSubmitEdit = () => {
    setIsEditing(false);

    const newMessage: Message = { type: "human", content: value };
    thread.submit(
      { messages: [newMessage] },
      {
        checkpoint: parentCheckpoint,
        streamMode: ["values"],
        streamSubgraphs: true, // Add this to all thread.submit() calls
        optimisticValues: (prev) => {
          const values = meta?.firstSeenState?.values;
          if (!values) return prev;

          return {
            ...values,
            messages: [...(values.messages ?? []), newMessage],
          };
        },
      },
    );
  };

3. UI rendering needs updating
   From what I can see, the events with message chunks are actually coming through, but they're not being displayed in the UI properly. The streaming is happening but the display mechanism isn't handling the subgraph events correctly.
   I'm still working on figuring out exactly what needs to be changed in the UI rendering logic. Will update once I locate the specific changes needed for displaying the subgraph streaming events.

[michael-tomala]

You can apply this patch via patch-package from npm:

diff --git a/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs b/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
index f730d4b..c15c79c 100644
--- a/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
+++ b/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
@@ -410,7 +410,8 @@ function useStream(options) {
                     }
                     setStreamValues(data);
                 }
-                if (event === "messages") {
+                if (event === "messages" || String(event).trim().startsWith("messages|")) {
                     const [serialized] = data;
                     const messageId = messageManagerRef.current.add(serialized);
                     if (!messageId) {
diff --git a/node_modules/@langchain/langgraph-sdk/dist/react/stream.js b/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
index f747b34..49a7031 100644
--- a/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
+++ b/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
@@ -407,7 +407,8 @@ export function useStream(options) {
                     }
                     setStreamValues(data);
                 }
-                if (event === "messages") {
+                if (event === "messages" || String(event).trim().startsWith("messages|")) {
                     const [serialized] = data;
                     const messageId = messageManagerRef.current.add(serialized);
                     if (!messageId) {

[shailesh-numaai]

Hi, thanks for the response.

I upgraded the SDK and added below in index.tsx and it worked :)

streamSubgraphs: true, // Add this to all thread.submit() calls

reg. the rendering itself.
i need to set

streamMode: ["values","custom"] //added custom to be able to get custom streamed data from subgraphs

I see the challenge is onCustomEvent is not fired though I can now see custom messages in response.
and i suspect the issues is subgraph messages are returned with event type in different format vs what SDK expected them to be

non-subgraph events

event: custom
data
id

with subgraphs true

event: custom|agent_name:id
data
id

and perhaps onCustomEvent cannot catch them correctly to then render custom UI elements on chat.

[michael-tomala]

I have updated patch for custom events also:

diff --git a/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs b/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
index f730d4b..33cae49 100644
--- a/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
+++ b/node_modules/@langchain/langgraph-sdk/dist/react/stream.cjs
@@ -393,7 +393,7 @@ function useStream(options) {
                 }
                 if (event === "updates")
                     options.onUpdateEvent?.(data);
-                if (event === "custom")
+                if (event === "custom" || String(event).trim().startsWith("custom|"))
                     options.onCustomEvent?.(data, {
                         mutate: getMutateFn("stream", historyValues),
                     });
@@ -410,7 +410,7 @@ function useStream(options) {
                     }
                     setStreamValues(data);
                 }
-                if (event === "messages") {
+                if (event === "messages" || String(event).trim().startsWith("messages|")) {
                     const [serialized] = data;
                     const messageId = messageManagerRef.current.add(serialized);
                     if (!messageId) {
diff --git a/node_modules/@langchain/langgraph-sdk/dist/react/stream.js b/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
index f747b34..8ebe638 100644
--- a/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
+++ b/node_modules/@langchain/langgraph-sdk/dist/react/stream.js
@@ -390,7 +390,7 @@ export function useStream(options) {
                 }
                 if (event === "updates")
                     options.onUpdateEvent?.(data);
-                if (event === "custom")
+                if (event === "custom" || String(event).trim().startsWith("custom|"))
                     options.onCustomEvent?.(data, {
                         mutate: getMutateFn("stream", historyValues),
                     });
@@ -407,7 +407,7 @@ export function useStream(options) {
                     }
                     setStreamValues(data);
                 }
-                if (event === "messages") {
+                if (event === "messages" || String(event).trim().startsWith("messages|")) {
                     const [serialized] = data;
                     const messageId = messageManagerRef.current.add(serialized);
                     if (!messageId) {