Skip to content

30-langchain-ui.md

Latest commit

 

History

History
72 lines (45 loc) · 2.37 KB

30-langchain-ui.md

File metadata and controls

72 lines (45 loc) · 2.37 KB

30. 智能体聊天界面（Agent Chat UI）

原文链接: https://docs.langchain.com/oss/python/langchain/ui

Agent Chat UI 是一个 Next.js 应用，为与任何 LangChain 智能体交互提供对话式界面。它支持：

  • 实时聊天
  • 工具可视化
  • 高级功能，如时间旅行调试（time-travel debugging）和状态分叉（state forking）

Agent Chat UI 与使用 create_agent 创建的智能体无缝协作，只需最少的设置即可为你的智能体提供交互体验，无论你是在本地运行还是在已部署环境（如 LangSmith）中运行。

Agent Chat UI 是开源的，可以根据你的应用需求进行定制。

你可以在 Agent Chat UI 中使用生成式 UI（generative UI）。更多信息请参见“使用 LangGraph 实现生成式用户界面”。

快速开始（Quick start）

最快的方式是使用托管版本：

  1. 访问 Agent Chat UI
  2. 连接你的智能体：输入你的部署 URL 或本地服务器地址
  3. 开始聊天：UI 会自动检测并渲染工具调用和中断（interrupts）

本地开发（Local development）

要进行定制或本地开发，你可以在本地运行 Agent Chat UI：

使用 npx

# 创建一个新的 Agent Chat UI 项目
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

# 安装依赖并启动
pnpm install
pnpm dev

克隆仓库

你也可以直接克隆 Agent Chat UI 仓库进行开发。

连接到你的智能体（Connect to your agent）

Agent Chat UI 可以连接到本地和已部署的智能体。启动 Agent Chat UI 后，需要配置它以连接到你的智能体：

  1. Graph ID：

    • 输入你的图名称（可在 langgraph.json 文件的 graphs 下找到）

  2. Deployment URL：

    • 你的智能体服务器端点
    • 例如：本地开发使用 http://localhost:2024
    • 或已部署智能体的 URL

  3. LangSmith API key（可选）：

    • 添加你的 LangSmith API key
    • 如果使用本地智能体服务器，则不需要

配置完成后，Agent Chat UI 会自动获取并显示来自你智能体的任何中断线程（interrupted threads）。

Agent Chat UI 开箱即用地支持渲染工具调用和工具结果消息。要自定义显示哪些消息，请参见“在聊天中隐藏消息（Hiding Messages in the Chat）”。

本文档由 LangChain 官方文档翻译而来