agent-chat-ui

连接 LangGraph 代理，快速生成聊天界面

agent-chat-ui 是一个基于 TypeScript 构建的 Web 应用，旨在为 LangGraph 代理（支持 Python 和 TypeScript 版本）提供一个开箱即用的聊天界面。它解决了开发者构建代理应用时，需要从零搭建前端交互界面的痛点，让开发者可以专注于代理逻辑本身。其核心能力包括：通过简单的配置即可连接任意 LangGraph 代理，提供流式响应、消息历史、工具调用展示等丰富的聊天交互功能，并支持自定义主题和布局。项目采用现代前端技术栈，界面美观且易于集成，是 LangGraph 生态中重要的可视化交互组件。

开源 free 开源模型

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 3177

维护状态活跃

是否开源是

定价模式 free

项目数据

分类开源模型

开发团队langchain-ai

所属国家

官网地址https://agentchat.vercel.app

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

定价模式free

价格说明开源项目，MIT许可证，可自行部署使用，完全免费。

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型agent,chat,langgraph,llm

GitHub 星标★ 3177

30天Star增速

HF 下载量

上线时间2025-02-18 00:00:00

最近更新2026-09-23 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数5

使用教程

难度：入门约 10 分钟部署方式：本地安装 6 步

环境要求

Node.js 与 pnpm 包管理器（README 使用 pnpm install / pnpm dev）
一个可访问的 LangGraph 服务器地址（本地或部署的均可）
若连接已部署的 LangGraph 服务器，需准备 LangSmith API Key
浏览器（用于访问 http://localhost:3000）

安装与启动步骤

1创建项目

二选一：用 npx 脚手架直接生成项目，或克隆官方仓库后进入目录。
```
npx create-agent-chat-app
```
2或克隆仓库

若不用 npx，则克隆仓库并进入 agent-chat-ui 目录。
```
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
```
3安装依赖

在项目目录下安装前端依赖，需已安装 pnpm。
```
pnpm install
```
4启动开发服务

运行开发服务器，启动后应用监听 3000 端口。
```
pnpm dev
```
5填写连接信息

打开页面后依次填入 Deployment URL、Assistant/Graph ID，已部署服务还需填 LangSmith API Key，然后点 Continue 进入聊天界面。
6生产环境配置

生产化需在服务端代理请求：设置好环境变量（如 NEXT_PUBLIC_ASSISTANT_ID、LANGGRAPH_API_URL），或改用自定义鉴权方式。

关键配置

配置项	必填	说明	示例
`LANGGRAPH_API_URL`	否	LangGraph 服务器的部署地址，供 API Passthrough 代理使用	`https://my-agent.default.us.langgraph.app`
`NEXT_PUBLIC_ASSISTANT_ID`	否	聊天时使用的 assistant/graph ID	`agent`
`NEXT_PUBLIC_API_URL`	否	自定义鉴权方案下，指向生产环境的 LangGraph 部署 URL	`https://your-langgraph-deployment.com`

如何确认成功

浏览器打开 http://localhost:3000 出现配置页，填入三个字段并点 Continue 后跳转到聊天界面并能发送消息。

常见问题

Q：不想在本地运行可以吗？

A：可以，README 提供了已部署站点 https://agentchat.vercel.app，直接使用即可，无需本地安装。

Q：LangSmith API Key 是必须的吗？

A：仅在连接已部署（生产）的 LangGraph 服务器时需要；连接本地开发服务器时不必填写。

Q：生产环境如何避免用户各自填 API Key？

A：使用 API Passthrough 代理方式，在服务端附加 LangSmith API Key，并配置 LANGGRAPH_API_URL 与 NEXT_PUBLIC_ASSISTANT_ID。

Q：Built with Agent Builder 开关是做什么的？

A：用于 Agent Builder 部署，打开后会自动把鉴权方案设置为 langsmith-api-key。

Q：API Passthrough 会帮我做用户鉴权吗？

A：不会。README 明确说明它不校验代理调用方身份，部署前应先按文档的 Authenticating the API Passthrough 部分补充鉴权。

注意事项

README 要求使用 pnpm 安装依赖，请先确保本机已安装 pnpm。
生产部署时 API Passthrough 不会验证调用方身份，直接上线可能导致你的 LangSmith API Key 被滥用，务必先配置鉴权。
自定义鉴权方案需修改 src/providers/Stream.tsx 中的 useTypedStream 钩子，通过 defaultHeaders 传入 Bearer token。
本项目针对任何带 messages 键的 LangGraph 服务器，若服务端没有该键将无法正常对话。

核心亮点

无缝对接 LangGraph 代理，支持 Python 和 TS 双版本，降低集成门槛
内置流式输出和工具调用可视化，交互体验流畅且直观
界面现代美观，支持自定义配置，可快速嵌入现有项目

不足之处

依赖 LangGraph 框架，非该生态用户无法直接使用
文档/社区待观察

适用场景

快速为 LangGraph 代理搭建演示或生产级聊天界面
在开发调试阶段可视化查看代理的推理过程和工具调用
作为 LangChain/LangGraph 应用的前端标准组件

替代项目

Chainlit、Streamlit、LangServe

项目介绍

agent-chat-ui 是智能体领域的开源项目，由 langchain-ai 开发，2025 年首次发布。

在全站 13,014 个收录项目中，它的 GitHub 星标数（3,177）位列前 30%，在智能体分类的 2,499 个项目里位列前 13%。

近 42 天，它的 GitHub 星标从 3,051 增加到 3,177，净增 126。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-23。MIT许可证，可自行部署使用，完全免费。

它主要面向的使用场景是：快速为LangGraph代理搭建演示或生产级聊天界面。同类可对比的替代方案包括 Chainlit、Streamlit、LangServe。

上一篇：LLMAgentPapers

下一篇：AutoGPT-Next-Web