Repolode
提交项目
langchain-ai

langchain-ai/agent-chat-ui

一个基于 Next.js 的聊天界面，用于与任意带 messages 字段的 LangGraph 服务对话。

在 GitHub 查看官网
Star
3,237
Fork
694
未关闭 Issue
90
最近提交
3天前

这是什么？

Agent Chat UI 是一个基于 Next.js 的网页应用，可连接 LangGraph 服务并与其中的智能体进行聊天。你只需填写部署地址和 assistant 或 graph ID，应用就会发送消息，并以流式方式在聊天界面中展示回复。它同时支持 Python 和 TypeScript 编写的 LangGraph 服务，前提是图中使用了 messages 字段。

除基础对话外，应用支持通过流式标签或 do-not-render 前缀隐藏特定消息，也可以在聊天界面右侧的侧边栏中展示 artifact。配置既可以通过页面表单完成，也可以通过环境变量跳过表单。项目提供在线演示，本地可用 pnpm dev 启动。

用于生产环境时，项目自带 API 代理路由，可在服务端附加 LangSmith API Key，使终端用户无需自备密钥。但该代理不会对调用方做身份验证，因此上线前应在 LangGraph 部署上配置自定义认证。

核心功能

  • 01可与任意带 messages 字段的 Python 或 TypeScript LangGraph 服务对话。
  • 02支持通过页面表单或环境变量进行配置。
  • 03可在流式输出期间或永久隐藏指定消息。
  • 04可在聊天旁的侧边栏中渲染 artifact。
  • 05内置 API 代理路由，将 LangSmith API Key 保留在服务端。

适用场景

  • 在开发阶段通过现成的聊天界面测试 LangGraph 智能体。
  • 为团队内部的 LangGraph 智能体提供浏览器端访问界面。
  • 以这个可运行的 Next.js 示例为基础，改造出定制化的聊天前端。

快速上手

  1. 1

    使用 npx 命令创建项目

    npx create-agent-chat-app
  2. 2

    使用 pnpm 安装依赖

    pnpm install
  3. 3

    运行应用并访问 http://localhost:3000

    pnpm dev

使用前须知

  • 连接已部署的 LangGraph 服务器需要 LangSmith API 密钥。
  • README 警告，API 透传方案不会对调用者进行身份验证，部署前必须自行加固。

标签

#langgraph#chat-ui#nextjs#typescript#llm#agent#react#chat

常见问题

agent-chat-ui 是什么？
一个基于 Next.js 的聊天界面，用于与任意带 messages 字段的 LangGraph 服务对话。 Agent Chat UI 是一个基于 Next.js 的网页应用，可连接 LangGraph 服务并与其中的智能体进行聊天。你只需填写部署地址和 assistant 或 graph ID，应用就会发送消息，并以流式方式在聊天界面中展示回复。它同时支持 Python 和 TypeScript 编写的 LangGraph 服务，前提是图中使用了 messages 字段。
agent-chat-ui 可以免费使用吗？用的什么许可证？
agent-chat-ui 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
agent-chat-ui 还在维护吗？
活跃维护中。agent-chat-ui 最近一次提交是在 2026年10月19日。
agent-chat-ui 适合用来做什么？
在开发阶段通过现成的聊天界面测试 LangGraph 智能体。 为团队内部的 LangGraph 智能体提供浏览器端访问界面。 以这个可运行的 Next.js 示例为基础，改造出定制化的聊天前端。
agent-chat-ui 怎么安装和运行？
使用 npx 命令创建项目: npx create-agent-chat-app 使用 pnpm 安装依赖: pnpm install 运行应用并访问 http://localhost:3000: pnpm dev
在哪里获取 agent-chat-ui？
源代码和安装说明在 GitHub 上：https://github.com/langchain-ai/agent-chat-ui

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目