langchain-ai/langgraph
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraph.git synced 2026-07-15 12:35:43 -04:00
Code Issues 314 Packages Projects Releases 17 Wiki Activity

react-ui: useStreamContext must be used within a LoadExternalComponent #580

New Issue
Closed
opened 2026-02-20 17:40:49 -05:00 by yindo · 1 comment
yindo commented 2026-02-20 17:40:49 -05:00
Owner
Copy Link
Copy Source

Originally created by @nicobytes on GitHub (Apr 12, 2025).

Checked other resources

  • This is a bug, not a usage question. For questions, please use GitHub Discussions.
  • I added a clear and detailed title that summarizes the issue.
  • I read what a minimal reproducible example is (https://stackoverflow.com/help/minimal-reproducible-example).
  • I included a self-contained, minimal example that demonstrates the issue INCLUDING all the relevant imports. The code run AS IS to reproduce the issue.

Example Code

// weatherComponent.tsx

import { useStreamContext } from "@langchain/langgraph-sdk/react-ui";

const WeatherComponent: React.FunctionComponent<{ city: string }> = (props) => {
  const { submit } = useStreamContext();
  return (
    <>
      <div>Weather for {props.city}</div>

      <button
        onClick={() => {
          const newMessage = {
            type: "human",
            content: `What's the weather in ${props.city}?`,
          };

          submit({ messages: [newMessage] });
        }}
      >
        Retry
      </button>
    </>
  );
};

export default WeatherComponent;



// page.tsx
"use client";

import { useStream } from "@langchain/langgraph-sdk/react";
import type { Message } from "@langchain/langgraph-sdk";
import { LoadExternalComponent, UIMessage } from "@langchain/langgraph-sdk/react-ui";
import WeatherComponent from "./weatherComponent";

const clientComponents = {
  weather: WeatherComponent,
} as unknown as Record<string, React.FunctionComponent>;


export default function Chat() {
  const thread = useStream<{ messages: Message[], ui: UIMessage[] }>({
    apiUrl: "http://localhost:2024",
    assistantId: "ui",
    messagesKey: "messages",
  });

  return (
    <div>
      <div>
        {thread.messages
        .filter((message) => message.type === "human" || message.type === "ai")
        .map((message) => (
          <div key={message.id}>
            <p><strong>{message.type}:</strong>  {message.content as string}</p>
            {thread.values?.ui
            ?.filter((ui) => ui.metadata?.message_id === message.id)
            .map((ui) => (
              <LoadExternalComponent
                key={ui.id}
                stream={thread}
                message={ui}
                components={clientComponents}
                />
            ))}
          </div>
          
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();

          const form = e.target as HTMLFormElement;
          const message = new FormData(form).get("message") as string;

          form.reset();
          thread.submit({ messages: [{ type: "human", content: message }] });
        }}
      >
        <input type="text" name="message" />

        {thread.isLoading ? (
          <button key="stop" type="button" onClick={() => thread.stop()}>
            Stop
          </button>
        ) : (
          <button key="send" type="submit">
            Send
          </button>
        )}
      </form>
    </div>
  );
}

Error Message and Stack Trace (if applicable)

useStreamContext@http://localhost:3000/_next/static/chunks/node_modules_432c4f4b._.js:27037:15
WeatherComponent@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:19:228
LoadExternalComponent@http://localhost:3000/_next/static/chunks/node_modules_432c4f4b._.js:27129:174
[project]/src/app/chat/page.tsx [app-client] (ecmascript)/Chat/<.children<.children</<.children<@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:121:313
[project]/src/app/chat/page.tsx [app-client] (ecmascript)/Chat/<.children<.children<@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:121:101
Chat@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:99:112
ClientPageRoot@http://localhost:3000/_next/static/chunks/node_modules_next_dist_1a6ee436._.js:2061:50

Image

Description

I'm trying to use Generate UI with LangGraph, using Python on the backend and Next/React on the frontend. According to the documentation, it is possible to define my components on the frontend using the component prop.

Image

Refs:

However, when I use useStreamContext, it shows me the following error:

Image

System Info

System Information

OS: Linux
OS Version: #59-Ubuntu SMP PREEMPT_DYNAMIC Sat Mar 15 17:40:59 UTC 2025
Python Version: 3.13.2 | packaged by Anaconda, Inc. | (main, Feb 6 2025, 18:56:02) [GCC 11.2.0]

Package Information

langchain_core: 0.3.51
langsmith: 0.3.30
langchain_openai: 0.3.0
langgraph_api: 0.1.2
langgraph_cli: 0.2.3
langgraph_license: Installed. No version info available.
langgraph_runtime: Installed. No version info available.
langgraph_runtime_inmem: 0.0.3
langgraph_sdk: 0.1.61

Optional packages not installed

langserve

Other Dependencies

blockbuster: 1.5.24
click: 8.1.8
cloudpickle: 3.1.1
cryptography: 44.0.1
httpx: 0.28.1
jsonpatch<2.0,>=1.33: Installed. No version info available.
jsonschema-rs: 0.29.1
langgraph: 0.3.28
langgraph-checkpoint: 2.0.24
langsmith-pyo3: Installed. No version info available.
langsmith<0.4,>=0.1.125: Installed. No version info available.
openai: 1.72.0
openai-agents: Installed. No version info available.
opentelemetry-api: Installed. No version info available.
opentelemetry-exporter-otlp-proto-http: Installed. No version info available.
opentelemetry-sdk: Installed. No version info available.
orjson: 3.10.16
packaging: 24.2
packaging<25,>=23.2: Installed. No version info available.
pydantic: 2.11.3
pydantic<3.0.0,>=2.5.2;: Installed. No version info available.
pydantic<3.0.0,>=2.7.4;: Installed. No version info available.
pyjwt: 2.10.1
pytest: Installed. No version info available.
python-dotenv: 1.0.1
PyYAML>=5.3: Installed. No version info available.
requests: 2.32.3
requests-toolbelt: 1.0.0
rich: Installed. No version info available.
sse-starlette: 2.1.3
starlette: 0.41.3
structlog: 25.2.0
tenacity: 9.1.2
tenacity!=8.4.0,<10.0.0,>=8.1.0: Installed. No version info available.
tiktoken: 0.9.0
typing-extensions>=4.7: Installed. No version info available.
uvicorn: 0.34.0
watchfiles: 1.0.5
zstandard: 0.23.0

Originally created by @nicobytes on GitHub (Apr 12, 2025). ### Checked other resources - [x] This is a bug, not a usage question. For questions, please use GitHub Discussions. - [x] I added a clear and detailed title that summarizes the issue. - [x] I read what a minimal reproducible example is (https://stackoverflow.com/help/minimal-reproducible-example). - [x] I included a self-contained, minimal example that demonstrates the issue INCLUDING all the relevant imports. The code run AS IS to reproduce the issue. ### Example Code ```python // weatherComponent.tsx import { useStreamContext } from "@langchain/langgraph-sdk/react-ui"; const WeatherComponent: React.FunctionComponent<{ city: string }> = (props) => { const { submit } = useStreamContext(); return ( <> <div>Weather for {props.city}</div> <button onClick={() => { const newMessage = { type: "human", content: `What's the weather in ${props.city}?`, }; submit({ messages: [newMessage] }); }} > Retry </button> </> ); }; export default WeatherComponent; // page.tsx "use client"; import { useStream } from "@langchain/langgraph-sdk/react"; import type { Message } from "@langchain/langgraph-sdk"; import { LoadExternalComponent, UIMessage } from "@langchain/langgraph-sdk/react-ui"; import WeatherComponent from "./weatherComponent"; const clientComponents = { weather: WeatherComponent, } as unknown as Record<string, React.FunctionComponent>; export default function Chat() { const thread = useStream<{ messages: Message[], ui: UIMessage[] }>({ apiUrl: "http://localhost:2024", assistantId: "ui", messagesKey: "messages", }); return ( <div> <div> {thread.messages .filter((message) => message.type === "human" || message.type === "ai") .map((message) => ( <div key={message.id}> <p><strong>{message.type}:</strong> {message.content as string}</p> {thread.values?.ui ?.filter((ui) => ui.metadata?.message_id === message.id) .map((ui) => ( <LoadExternalComponent key={ui.id} stream={thread} message={ui} components={clientComponents} /> ))} </div> ))} </div> <form onSubmit={(e) => { e.preventDefault(); const form = e.target as HTMLFormElement; const message = new FormData(form).get("message") as string; form.reset(); thread.submit({ messages: [{ type: "human", content: message }] }); }} > <input type="text" name="message" /> {thread.isLoading ? ( <button key="stop" type="button" onClick={() => thread.stop()}> Stop </button> ) : ( <button key="send" type="submit"> Send </button> )} </form> </div> ); } ``` ### Error Message and Stack Trace (if applicable) ```shell useStreamContext@http://localhost:3000/_next/static/chunks/node_modules_432c4f4b._.js:27037:15 WeatherComponent@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:19:228 LoadExternalComponent@http://localhost:3000/_next/static/chunks/node_modules_432c4f4b._.js:27129:174 [project]/src/app/chat/page.tsx [app-client] (ecmascript)/Chat/<.children<.children</<.children<@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:121:313 [project]/src/app/chat/page.tsx [app-client] (ecmascript)/Chat/<.children<.children<@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:121:101 Chat@http://localhost:3000/_next/static/chunks/src_app_chat_c0a2b125._.js:99:112 ClientPageRoot@http://localhost:3000/_next/static/chunks/node_modules_next_dist_1a6ee436._.js:2061:50 ``` ![Image](https://github.com/user-attachments/assets/a7b3d6cd-28bb-41a3-afa7-d9c3d6553f86) ### Description I'm trying to use Generate UI with LangGraph, using Python on the backend and Next/React on the frontend. According to the documentation, it is possible to define my components on the frontend using the `component` prop. ![Image](https://github.com/user-attachments/assets/dc0d55d5-8f45-4fdf-8f4d-8dd4e50b6290) Refs: - https://langchain-ai.github.io/langgraph/cloud/how-tos/generative_ui_react/#provide-custom-components-on-the-client-side - https://langchain-ai.github.io/langgraph/cloud/how-tos/generative_ui_react/#access-and-interact-with-the-thread-state-from-the-ui-component However, when I use `useStreamContext`, it shows me the following error: ![Image](https://github.com/user-attachments/assets/a7b3d6cd-28bb-41a3-afa7-d9c3d6553f86) ### System Info System Information ------------------ > OS: Linux > OS Version: #59-Ubuntu SMP PREEMPT_DYNAMIC Sat Mar 15 17:40:59 UTC 2025 > Python Version: 3.13.2 | packaged by Anaconda, Inc. | (main, Feb 6 2025, 18:56:02) [GCC 11.2.0] Package Information ------------------- > langchain_core: 0.3.51 > langsmith: 0.3.30 > langchain_openai: 0.3.0 > langgraph_api: 0.1.2 > langgraph_cli: 0.2.3 > langgraph_license: Installed. No version info available. > langgraph_runtime: Installed. No version info available. > langgraph_runtime_inmem: 0.0.3 > langgraph_sdk: 0.1.61 Optional packages not installed ------------------------------- > langserve Other Dependencies ------------------ > blockbuster: 1.5.24 > click: 8.1.8 > cloudpickle: 3.1.1 > cryptography: 44.0.1 > httpx: 0.28.1 > jsonpatch<2.0,>=1.33: Installed. No version info available. > jsonschema-rs: 0.29.1 > langgraph: 0.3.28 > langgraph-checkpoint: 2.0.24 > langsmith-pyo3: Installed. No version info available. > langsmith<0.4,>=0.1.125: Installed. No version info available. > openai: 1.72.0 > openai-agents: Installed. No version info available. > opentelemetry-api: Installed. No version info available. > opentelemetry-exporter-otlp-proto-http: Installed. No version info available. > opentelemetry-sdk: Installed. No version info available. > orjson: 3.10.16 > packaging: 24.2 > packaging<25,>=23.2: Installed. No version info available. > pydantic: 2.11.3 > pydantic<3.0.0,>=2.5.2;: Installed. No version info available. > pydantic<3.0.0,>=2.7.4;: Installed. No version info available. > pyjwt: 2.10.1 > pytest: Installed. No version info available. > python-dotenv: 1.0.1 > PyYAML>=5.3: Installed. No version info available. > requests: 2.32.3 > requests-toolbelt: 1.0.0 > rich: Installed. No version info available. > sse-starlette: 2.1.3 > starlette: 0.41.3 > structlog: 25.2.0 > tenacity: 9.1.2 > tenacity!=8.4.0,<10.0.0,>=8.1.0: Installed. No version info available. > tiktoken: 0.9.0 > typing-extensions>=4.7: Installed. No version info available. > uvicorn: 0.34.0 > watchfiles: 1.0.5 > zstandard: 0.23.0
yindo closed this issue 2026-02-20 17:40:49 -05:00
yindo commented 2026-02-20 17:40:49 -05:00
Author
Owner
Copy Link
Copy Source

@nicobytes commented on GitHub (Apr 18, 2025):

This issue has solved in this PR https://github.com/langchain-ai/langgraph/pull/4338

@nicobytes commented on GitHub (Apr 18, 2025): This issue has solved in this PR https://github.com/langchain-ai/langgraph/pull/4338
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agents
awaiting author revision
bug
change
chat models
checkpointer
ci
code quality
code quality
dependencies
documentation
drawing
duplicate
enhancement
good first issue
help wanted
invalid
maintainer
meta
missing information
not maintained by langchain
open-swe-auto
open-swe-max
open-swe-max-auto
pending
performance
pull-request
Mirrored from GitHub Pull Request
 question
requires design
sdk
server
stale
studio
tests
type checking
usage question
v0.5
v1.1
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langchain-ai/langgraph#580
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?