当前位置: 首页 > news >正文

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

149beac610c07ea0ed4ed056c3aa080f28357052

 

生成式 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. Agent Chat showing a prompt about booking/lodging and a generated set of hotel listing cards (images, titles, prices, locations) rendered inline as UI components.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 响应进行调整。

Generative UI Sample

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()

 

 


 

http://www.hskmm.com/?act=detail&tid=20087

相关文章:

  • web服务器配置步骤有哪些?如何建立一个web服务器
  • 题解:P10005 [集训队互测 2023] 基础寄术练习题
  • 详细介绍:Linux----gcc、g++的使用以及一些问题
  • 同步和互斥的基本概念
  • Sep 28
  • 图像采集卡:连接镜头与机器的“视觉神经”,释放工业智能核心动力
  • 2025 年生态木厂商最新推荐榜单:TOP 前五企业实力解析及厂商选择指南生态木方通/户外地板/装饰线条/隔断/背景墙厂商推荐
  • 盲盒一番赏小应用用户需求分析:从行为动机到功能诉求的深度拆解
  • 解题报告-泥路(muddyroad.*)
  • 洛谷P10112 [GESP202312 八级] 奖品分配
  • P10400 『STA - R5』消失的计算机
  • 2025 地坪研磨机厂家推荐权威推荐排行榜:品牌深度解析及格力 / 宁德时代合作案例速递水磨石/遥控式/座驾式/小型地坪研磨机厂家推荐
  • 2025 年最新推荐铝塑膜源头厂家权威排行榜:聚焦 3000㎡厂房与完整产业链的优质企业盘点复合/防锈防潮/木箱包装/设备包装铝塑膜厂家推荐
  • 2025 年真空袋生产厂家最新权威推荐排行榜:TOP 级企业工艺、服务及适配场景全景对比指南木箱/设备/海运防潮/铝塑/电柜真空袋厂家推荐
  • 《码界飞升传II:数据星辰异界问道》
  • Win FAQ
  • 结论(数学)
  • loki收集容器日志
  • Xcode 火焰图
  • 完整教程:dlib库关键点定位和疲劳检测
  • 2025 长沙美食餐厅权威推荐排行榜:老店红记领衔新晋品牌,200 + 湘味与网红菜品深度解析,吃货必藏指南长沙美食湘菜馆 /大排档/网红店餐厅推荐
  • VKD233HH触控IC有两种输出方式“直接输出”和“锁存输出”单路触摸检测芯片
  • 打包present, but unavailable
  • 2025 年最新推荐环保门禁厂家权威排行榜:清洁运输 / 智能 / 移动源系统及电子台账厂商详析企业/智能环保门禁厂家推荐
  • 2025 年即时通讯公司推荐 小天互连:私有化部署即时通讯、信创即时通讯、国产化即时通讯、局域内网即时通讯、企业 IM 即时通讯解决方案解析
  • GJOI 模拟赛6、7部分题解
  • 【C++list】底层结构、迭代器核心原理与常用接口完成全解析
  • 完整教程:Flink Watermark机制解析
  • 2025 年北京湖南菜餐厅推荐:小湖南岸以湖湘本味与匠心服务,成京城湘菜口碑之选
  • Vector