> ## Documentation Index
> Fetch the complete documentation index at: https://langchain-docs-zh.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 代理聊天界面

> Agent Chat UI 可以连接到 本地 和 已部署的智能体。

[智能体聊天 UI](https://github.com/langchain-ai/agent-chat-ui) 是一个 Next.js 应用程序，为与任何 LangChain 智能体交互提供对话式界面。它支持实时聊天、工具可视化以及时间旅行调试和状态分支等高级功能。智能体聊天 UI 与使用@\[`create_agent`] 创建的智能体无缝兼容，无论本地运行还是部署在 [LangSmith](https://docs.langchain.com/langsmith/observability) 等环境中，都能为智能体提供交互式体验，且配置简单。

智能体聊天 UI 是开源的，可根据应用需求进行定制。

[Agent Chat UI](https://www.youtube.com/embed/lInrwVnZ83o?si=Uw66mPtCERJm0EjU)

> [!TIP]
>
> 您可以在智能体聊天 UI 中使用生成式 UI。更多详情请参阅 [使用 LangGraph 实现生成式用户界面](https://docs.langchain.com/langsmith/generative-ui-react)。

### 快速开始

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

1. **访问 [智能体聊天 UI](https://agentchat.vercel.app)**
2. **连接您的智能体**：输入部署 URL 或本地服务器地址
3. **开始聊天** - UI 会自动检测并渲染工具调用和中断

### 本地开发

如需定制或本地开发，可本地运行智能体聊天 UI：

```bash Use npx theme={null}
# Create a new Agent Chat UI project
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui

# Install dependencies and start
pnpm install
pnpm dev
```

```bash Clone repository theme={null}
# Clone the repository
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui

# Install dependencies and start
pnpm install
pnpm dev
```

### 连接到你的智能体

Agent Chat UI 可以连接到 [本地](https://langchain-docs-zh.mintlify.site/langchain/oss/langgraph/studio.md#设置本地智能体服务器) 和 [已部署的智能体](https://langchain-docs-zh.mintlify.site/langchain/oss/langgraph/deploy.md)。

启动 Agent Chat UI 后，你需要配置它以连接到你的智能体：

1. **图 ID**：输入你的图名称（在 `graphs` 下的 `langgraph.json` 文件中找到）
2. **部署 URL**：你的智能体服务器的端点（例如，`http://localhost:2024` 用于本地开发，或你的已部署智能体的 URL）
3. **LangSmith API 密钥（可选）**：添加你的 LangSmith API 密钥（如果你使用本地智能体服务器则无需此密钥）

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

> [!TIP]
>
> Agent Chat UI 对渲染工具调用和工具结果消息提供开箱即用的支持。要自定义显示的消息，请参阅 [在聊天中隐藏消息](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#hiding-messages-in-the-chat)。

***

> 官方原文：[src/oss/langgraph/ui.mdx](https://github.com/langchain-ai/docs/blob/main/src/oss/langgraph/ui.mdx) · 非官方翻译，译文由 AI 生成，以英文原文为准。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.