Agent Chat UI 使用教程

最新推荐文章于 2025-04-23 10:32:15 发布

卫颂耀Armed

最新推荐文章于 2025-04-23 10:32:15 发布

阅读量656

点赞数 7

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00710/article/details/147021050

Agent Chat UI 是一个基于 Vite 和 React 的应用程序，它允许用户通过聊天界面与任何具有 messages 键的 LangGraph 服务器进行交流。这个项目旨在提供一个简单的界面，让用户可以轻松地与 LangGraph 服务器进行交互。

在开始之前，请确保您的系统中已安装以下依赖：

您可以选择以下任一方式克隆项目：

npx create-agent-chat-app

或者使用 Git 命令克隆：

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

在项目根目录下执行以下命令安装依赖：

pnpm install

安装完依赖后，执行以下命令启动开发服务器：

pnpm dev

项目启动后，您可以通过浏览器访问 http://localhost:5173 查看应用。

当应用运行后，您需要输入以下信息：

如果您连接到的是部署的 LangGraph 服务器，则需要提供 LangSmith API Key 进行身份验证。

您可以通过设置环境变量来跳过初始设置表单：

VITE_API_URL=http://localhost:2024
VITE_ASSISTANT_ID=agent
VITE_LANGSMITH_API_KEY=your_api_key_if_needed

将 .env.example 文件复制为 .env 文件，并填入相应的值。重启应用后，应用将使用这些变量而不是显示设置表单。

您可以通过以下两种方式控制聊天信息在 Agent Chat UI 中的可见性：

阻止实时流：在聊天模型的配置中添加 langsmith:nostream 标签，以阻止消息在 LLM 调用期间显示。
永久隐藏消息：在将消息添加到图的状态之前，将 id 字段前缀为 do-not-render-，并在聊天模型的配置中添加 langsmith:do-not-render 标签。