agent-chat-ui

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署开源模型 🍴 复刻 701 🐛 待处理 93 👀 关注 19 ⚠️ 作者已归档（停止维护）

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 3253

维护状态较活跃

是否开源开源

定价模式 🏷️完全免费开源项目，MIT许可证，可自行部署使用，完全免费。

项目预览

agent-chat-ui 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类开源模型

开发团队langchain-ai

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

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

定价模式🏷️完全免费

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

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言TypeScript

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

GitHub 星标★ 3253

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

代码更新2026-11-03

仓库体积1.2 MB

本站数据更新2026-11-10

维护状态较活跃

收录时间2026-08-09

浏览次数6

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 3253

技术标签

agent chat langgraph llm

使用教程

难度：入门约 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 服务器，若服务端没有该键将无法正常对话。