mirror of
https://github.com/langchain-ai/langgraph.git
synced 2026-09-08 18:57:52 +02:00
MauritsBrinkmanandTat Dat Duong
ac9b6c416e
Add onStop callback to useStream hook enabling developers to customize
UI behavior when streams are stopped. This is especially useful for
UI messages with loading states that need to show "stopped" status
instead of remaining in infinite loading state.
The callback provides the same mutate function as onCustomEvent for
immediate local state updates, while users can optionally update
server thread state using the threads client.
Example usage:
```typescript
const stream = useStream({
assistantId: "my-assistant",
onStop: async ({ mutate }) => {
// Immediate UI update - stop loading components
mutate((prev) => ({
...prev,
ui: prev.ui?.map(component =>
component.props?.isLoading
? {
...component,
props: {
...component.props,
isLoading: false,
isStopped: true
}
}
: component
)
}));
// Optional server thread state update
if (stream.threadId) {
await stream.client.threads.updateState(stream.threadId, {
values: {
ui: prev.ui // persist stopped state to server
}
});
}
}
});
```
This is especially useful for cases where gen UI components have loading states,
where we don't want the loading state to persist on cancellation.
LangGraph JS/TS SDK
This repository contains the JS/TS SDK for interacting with the LangGraph REST API.
Quick Start
To get started with the JS/TS SDK, install the package
yarn add @langchain/langgraph-sdk
You will need a running LangGraph API server. If you're running a server locally using langgraph-cli, SDK will automatically point at http://localhost:8123, otherwise
you would need to specify the server URL when creating a client.
import { Client } from "@langchain/langgraph-sdk";
const client = new Client();
// List all assistants
const assistants = await client.assistants.search({
metadata: null,
offset: 0,
limit: 10,
});
// We auto-create an assistant for each graph you register in config.
const agent = assistants[0];
// Start a new thread
const thread = await client.threads.create();
// Start a streaming run
const messages = [{ role: "human", content: "what's the weather in la" }];
const streamResponse = client.runs.stream(
thread["thread_id"],
agent["assistant_id"],
{
input: { messages },
}
);
for await (const chunk of streamResponse) {
console.log(chunk);
}
Documentation
To generate documentation, run the following commands:
-
Generate docs.
yarn typedoc -
Consolidate doc files into one markdown file.
npx concat-md --decrease-title-levels --ignore=js_ts_sdk_ref.md --start-title-level-at 2 docs > docs/js_ts_sdk_ref.md -
Copy
js_ts_sdk_ref.mdto MkDocs directory.cp docs/js_ts_sdk_ref.md ../../docs/docs/cloud/reference/sdk/js_ts_sdk_ref.md