langgraph-genui

langgraph-genui

https://github.com/fanqingsong/langgraph-genui

LangGraph GenUI 微服务架构

这是一个基于 LangGraph 的微服务架构项目，包含智能体服务和前端对话界面两个独立的微服务。

项目结构

langgraph-genui/
├── agent/                    # 智能体微服务
│   ├── src/                 # 智能体源代码
│   ├── langgraph.json       # LangGraph 配置
│   ├── pyproject.toml       # Python 项目配置
│   ├── requirements.txt     # Python 依赖
│   ├── Dockerfile          # 智能体 Docker 配置
│   ├── docker-compose.yml  # 智能体 Docker Compose 配置
│   ├── start.sh            # 智能体启动脚本
│   └── README.md           # 智能体服务说明
├── chatui/                  # 前端对话界面微服务
│   ├── src/                 # 前端源代码
│   ├── public/              # 静态资源
│   ├── package.json         # Node.js 项目配置
│   ├── Dockerfile          # 前端 Docker 配置
│   ├── docker-compose.yml  # 前端 Docker Compose 配置
│   ├── start.sh            # 前端启动脚本
│   └── README.md           # 前端服务说明
└── README.md               # 项目总体说明

 

微服务说明

1. Agent 服务 (端口 8123)

• 功能: LangGraph 智能体后端服务
• 技术栈: Python + LangGraph + Docker
• API: 提供智能体 API 接口
• Studio: 支持 LangGraph Studio 可视化界面

2. ChatUI 服务 (端口 3000)

• 功能: 前端对话界面
• 技术栈: Next.js + React + TypeScript + Docker
• 特性: 基于 agent-chat-ui 项目

 

参考：

Agent Chat UI

https://github.com/langchain-ai/agent-chat-ui

 Agent Chat UI is a Next.js application which enables chatting with any LangGraph server with a messages key through a chat interface.

Usage

Once the app is running (or if using the deployed site), you'll be prompted to enter:

• Deployment URL: The URL of the LangGraph server you want to chat with. This can be a production or development URL.
• Assistant/Graph ID: The name of the graph, or ID of the assistant to use when fetching, and submitting runs via the chat interface.
• LangSmith API Key: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers.

After entering these values, click Continue. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.

 

LangChain 和 Vercel AI SDK 协同打造生成式 UI

https://www.bilibili.com/opus/944968117423964169

 

生成式 UI 实现流程

为了理解 LangChain 和 Vercel AI SDK 如何协同创建流式 UI，让我们按图中的箭头逐步分析。

请求流程（蓝色箭头）

1. 用户互动：用户与前端的对话组件进行互动，进行提问（及文件上传）。
2. 请求逻辑：用户互动触发客户端 UI 组件向服务端 RSC 逻辑模块发送请求，该模块包含处理请求所需的逻辑。（通常 RSC 逻辑模块会先向 Next.js React 前端回传准备好的各类加载界面，前端接收后渲染加载界面）
3. 请求 LangChain.js：RSC 逻辑模块将请求发送给 LangChain.js，作为和后端 LangChain Python 服务之间的桥梁。
4. 请求 LangServe：LangChain.js 将请求发送给 LangServe（通过 FastAPI），调用请求中指定的模型或工具；并开始接收流失数据回传。

响应流程（紫色箭头）

1. 调用应用逻辑：LangServe 处理请求，调用指定的 LLM 应用逻辑。该过程由 LangGraph 管理，按需执行应用的推理逻辑，或者模型上所绑定的工具（例如 Foo 和 Bar）。
2. 数据流回传：LangServe 将模型或工具执行的结果通过数据流的方式，经过 LangChain.js 的 Remote Runnable 对象传输回服务端的 RSC 逻辑模块。
3. 流传输 UI: RSC 逻辑模块基于响应数据创建或更新可流式传输回前端的流式组件，并将服务端渲染得到的 UI 内容回传给前端。
4. UI 更新：Next.js React 客户端接收到新的可渲染内容后动态更新前端 UI（如渲染 Foo 工具的组件界面），以新的数据提供无缝和互动的用户体验。

总结

LangChain 和 Vercel AI SDK 的结合为构建生成式 UI 应用提供了强大的工具包。通过利用这两种技术的优势，开发人员可以创建高度个性化和互动的用户界面，实时适应用户行为和偏好。这种集成不仅增强了用户参与度，还简化了开发过程，使得构建复杂的 AI 驱动应用变得更加容易。

 

LangChain Generative UI（生成式UI）

 

https://www.bilibili.com/video/BV1T4421D7pR/?vd_source=57e261300f39bf692de396b55bf8c41b&spm_id_from=333.788.player.switch

Gen UI Python: https://github.com/bracesproul/gen-ui-python

Gen UI JS: https://github.com/bracesproul/gen-ui Vercel

AI SDK RSC: https://sdk.vercel.ai/docs/ai-sdk-rsc/overview

 

 

How to implement generative user interfaces with LangGraph

https://docs.langchain.com/langgraph-platform/generative-ui-react

Generative user interfaces (Generative UI) allows agents to go beyond text and generate rich user interfaces. This enables creating more interactive and context-aware applications where the UI adapts based on the conversation flow and AI responses. LangGraph Platform supports colocating your React components with your graph code. This allows you to focus on building specific UI components for your graph while easily plugging into existing chat interfaces such as Agent Chat and loading the code only when actually needed.

 

Agent Chat UI

https://docs.langchain.com/oss/python/langchain/ui

LangChain provides a powerful prebuilt user interface that work seamlessly with agents created using create_agent(). This UI is designed to provide rich, interactive experiences for your agents with minimal setup, whether you’re running locally or in a deployed context (such as LangGraph Platform).

​

 

Agent Chat UI

Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangChain agent. It supports real-time chat, tool visualization, and advanced features like time-travel debugging and state forking. Agent Chat UI is open source and can be adapted to your application needs.

 

Connect to your agent

Agent Chat UI can connect to both local and deployed agents. After starting Agent Chat UI, you’ll need to configure it to connect to your agent:

1. Graph ID: Enter your graph name (find this under graphs in your langgraph.json file)
2. Deployment URL: Your LangGraph server’s endpoint (e.g., http://localhost:2024 for local development, or your deployed agent’s URL)
3. LangSmith API key (optional): Add your LangSmith API key (not required if you’re using a local LangGraph server)

 

Once configured, Agent Chat UI will automatically fetch and display any interrupted threads from your agent.

 

🧲 Claude Code 演练：LangGraph 构建生成式 UI 界面开发演示 🦜

https://www.bilibili.com/video/BV1jZ37zoEgc/?vd_source=57e261300f39bf692de396b55bf8c41b

GAC平台：https://gaccode.com/signup?ref=UWDADYQI

最佳实践：https://www.youware.com/project/12j7l4bqao

LangGraph GenUI：https://langchain-ai.github.io/langgraph/cloud/how-tos/generative_ui_react/

 

如何使用 LangGraph 实现生成式用户界面

https://github.langchain.ac.cn/langgraphjs/cloud/how-tos/generative_ui_react/#learn-more

生成式用户界面（Generative UI）允许 Agent 超越文本，生成丰富的用户界面。这使得创建更具交互性和上下文感知能力的应用成为可能，其中 UI 会根据对话流程和 AI 响应进行调整。

LangGraph 平台支持将您的 React 组件与您的图代码并置。这使您能够专注于为您的图构建特定的 UI 组件，同时轻松插入到现有的聊天界面中，例如 Agent Chat，并仅在实际需要时才加载代码。

 

import uuid
from typing import Annotated, Sequence, TypedDictfrom langchain_core.messages import AIMessage, BaseMessage
from langchain_openai import ChatOpenAI
from langgraph.graph import StateGraph
from langgraph.graph.message import add_messages
from langgraph.graph.ui import AnyUIMessage, ui_message_reducer, push_ui_messageclass AgentState(TypedDict):  # noqa: D101
    messages: Annotated[Sequence[BaseMessage], add_messages]ui: Annotated[Sequence[AnyUIMessage], ui_message_reducer]async def weather(state: AgentState):class WeatherOutput(TypedDict):city: strweather: WeatherOutput = (await ChatOpenAI(model="gpt-4o-mini").with_structured_output(WeatherOutput).with_config({"tags": ["nostream"]}).ainvoke(state["messages"]))message = AIMessage(id=str(uuid.uuid4()),content=f"Here's the weather for {weather['city']}",)# Emit UI elements associated with the messagepush_ui_message("weather", weather, message=message)return {"messages": [message]}workflow = StateGraph(AgentState)
workflow.add_node(weather)
workflow.add_edge("__start__", "weather")
graph = workflow.compile()