assistant-ui.
https://langgraph.com.cn/cloud/how-tos/use_stream_react/index.html
useStream()
React hook 提供了一种将 LangGraph 无缝集成到 React 应用程序中的方式。它处理了流式传输、状态管理和分支逻辑的所有复杂性,让你专注于构建出色的聊天体验。主要功能
- 消息流:处理消息块流以形成完整消息
- 消息、中断、加载状态和错误的自动状态管理
- 对话分支:从聊天历史中的任何点创建备用对话路径
- 与 UI 无关的设计:使用你自己的组件和样式
让我们探讨如何在你的 React 应用程序中使用
useStream()
。
useStream()
为创建定制聊天体验提供了坚实的基础。对于预构建的聊天组件和界面,我们还建议查看 CopilotKit 和 assistant-ui。
https://docs.langchain.com/langgraph-platform/use-stream-react
How to integrate LangGraph into your React application
Prerequisites
- LangGraph Platform
- LangGraph Server
The
useStream()
React hook provides a seamless way to integrate LangGraph into your React applications. It handles all the complexities of streaming, state management, and branching logic, letting you focus on building great chat experiences. Key features:
- Messages streaming: Handle a stream of message chunks to form a complete message
- Automatic state management for messages, interrupts, loading states, and errors
- Conversation branching: Create alternate conversation paths from any point in the chat history
- UI-agnostic design: bring your own components and styling
Let’s explore how to use
useStream()
in your React application. TheuseStream()
provides a solid foundation for creating bespoke chat experiences. For pre-built chat components and interfaces, we also recommend checking out CopilotKit and assistant-ui.
https://www.npmjs.com/package/@langchain/langgraph-sdk
To get started with the JS/TS SDK, install the package
yarn add @langchain/langgraph-sdkYou will need a running LangGraph API server. If you're running a server locally using
langgraph-cli
, SDK will automatically point athttp://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); }
https://github.com/assistant-ui/assistant-ui
assistant-ui is an open source TypeScript/React library to build production-grade AI chat experiences fast.
- Handles streaming, auto-scrolling, accessibility, and real-time updates for you
- Fully composable primitives inspired by shadcn/ui and cmdk — customize every pixel
- Works with your stack: AI SDK, LangGraph, Mastra, or any custom backend
- Broad model support out of the box (OpenAI, Anthropic, Mistral, Perplexity, AWS Bedrock, Azure, Google Gemini, Hugging Face, Fireworks, Cohere, Replicate, Ollama) with easy extension to custom APIs
- Fast to production: battle-tested primitives, built-in streaming and attachments
- Designed for customization: composable pieces instead of a monolithic widget
- Great DX: sensible defaults, keyboard shortcuts, a11y, and strong TypeScript
- Enterprise-ready: optional chat history and analytics via Assistant Cloud
https://www.assistant-ui.com/docs/getting-started
UX of ChatGPT in your own app
assistant-ui is the TypeScript/React library for AI Chat.
Built on shadcn/ui and Tailwind.
About assistant-ui
assistant-ui helps you create beautiful, enterprise-grade AI chat interfaces in minutes. Whether you're building a chatGPT clone, a customer support chatbot, an AI assistant, or a complex multi agent application, assistant-ui provides the frontend primative components and state management layers to focus on what makes your application unique.
Key Features
Instant Chat UI
Pre-built beautiful, customizable chat interfaces out of the box. Easy to quickly iterate on your idea.
Chat State Management
Powerful state management for chat interactions, optimized for streaming responses and efficient rendering.
High Performance
Optimized for speed and efficiency with minimal bundle size, ensuring your AI chat interfaces remain responsive.
Framework Agnostic
Easily integrate with any backend system, whether using Vercel AI SDK, direct LLM connections, or custom solutions. Works with any React-based framework.
https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-langgraph
Hosted Demo
This example demonstrates how to use LangChain LangGraph with assistant-ui.
It is meant to be used with the backend found at LangGraph's Stockbroker example: https://github.com/bracesproul/langgraphjs-examples/tree/main/stockbroker
You need to set the following environment variables:
NEXT_PUBLIC_API_URL=https://stockbrokeragent-bracesprouls-projects.vercel.app/api
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
To run the example, run the following commands:
npm install
npm run dev
langgraph例子:
https://github.com/fanqingsong/assistant-ui-langgraph-fastapi
https://github.com/fanqingsong/assistant-ui-langgraph-interrupt/tree/main/backend
https://github.com/fanqingsong/assistant-ui-stockbroker
The code for the Stockbroker Human in the Loop video can be found in this directory. It's setup as a monorepo-style project, with
frontend
andbackend
directories. Thefrontend
directory contains a Next.js application which allows you to interact with the Stockbroker agent via a chat interface. The backend contains a LangGraph agent which powers the core functionality of the stockbroker.
https://github.com/fanqingsong/open-canvas?tab=readme-ov-file