Menu
Language
Theme
Provides a shared useStream instance to all descendants via React Context.
Use StreamProvider when multiple components in a subtree need access to the
same stream state (messages, loading status, errors, interrupts, etc.) without
prop drilling.
StreamProvider<
T = Record<string, unknown>,
Bag extends BagTemplate = BagTemplate
>(props: StreamProviderProps<T, Bag> | StreamProviderCustomProps<T, Bag>): ReactNode| Name | Type | Description |
|---|---|---|
props* | StreamProviderProps<T, Bag> | StreamProviderCustomProps<T, Bag> |
import { StreamProvider, useStreamContext } from "@langchain/react";
function App() {
return (
<StreamProvider assistantId="agent" apiUrl="http://localhost:2024">
<ChatHeader />
<MessageList />
<MessageInput />
</StreamProvider>
);
}
function ChatHeader() {
const { isLoading, error } = useStreamContext();
return (
<header>
{isLoading && <span>Thinking...</span>}
{error && <span>Error</span>}
</header>
);
}
function MessageList() {
const { messages } = useStreamContext();
return messages.map((msg, i) => <div key={msg.id ?? i}>{msg.content}</div>);
}
function MessageInput() {
const { submit } = useStreamContext();
return (
<button onClick={() => submit({ messages: [{ type: "human", content: "Hi" }] })}>
Send
</button>
);
}<StreamProvider assistantId="researcher" apiUrl="http://localhost:2024">
<ResearchPanel />
</StreamProvider>
<StreamProvider assistantId="writer" apiUrl="http://localhost:2024">
<WriterPanel />
</StreamProvider>