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

# 用户界面（UI）

<警告>
  **Alpha 版本提示：** 本文档涵盖的是 **v1-alpha** 版本。内容尚不完整，且可能随时更改。

  如需查阅最新稳定版本，请参阅当前的 [LangGraph Python 文档](https://langchain-ai.github.io/langgraph/) 或 [LangGraph JavaScript 文档](https://langchain-ai.github.io/langgraphjs/)。
</警告>

您可以通过 [Agent Chat UI](https://github.com/langchain-ai/agent-chat-ui) 使用预构建的聊天界面与任意 LangGraph 代理进行交互。使用[已部署版本](https://agentchat.vercel.app) 是最快上手的方式，支持与本地或已部署的图结构进行交互。

## 在 UI 中运行代理

首先，请在本地设置 LangGraph API 服务器（参见[本地部署指南](/oss/python/langgraph/local-server)），或将您的代理部署到 [LangGraph 平台](/langgraph-platform/quick-start-studio)。

然后，访问 [Agent Chat UI](https://agentchat.vercel.app)，或者克隆仓库并在本地[启动开发服务器](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#setup)。

<Tip>
  该 UI 默认支持渲染工具调用及工具结果消息。如需自定义显示哪些消息，请参阅 Agent Chat UI 文档中的 [“在聊天中隐藏消息”](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#hiding-messages-in-the-chat) 章节。
</Tip>

## 添加人在回路（Human-in-the-loop）

Agent Chat UI 完全支持[人在回路](/oss/python/langgraph/add-human-in-the-loop) 工作流。要体验此功能，请将 `src/agent/graph.py` 文件（来自[部署指南](/oss/python/langgraph/local-server)）中的代理代码替换为[此代理实现](/oss/python/langgraph/add-human-in-the-loop#add-interrupts-to-any-tool)。

<Warning>
  Agent Chat UI 在您的 LangGraph 代理使用 \[`@HumanInterrupt` 模式]\[HumanInterrupt] 进行中断时效果最佳。如果您未使用该模式，UI 仍可渲染传递给 `interrupt` 函数的输入内容，但将无法完全支持图的恢复执行。
</Warning>

## 生成式 UI（Generative UI）

您也可以在 Agent Chat UI 中使用生成式 UI 功能。

生成式 UI 允许您定义 [React](https://react.dev/) 组件，并从 LangGraph 服务器推送至前端界面。有关构建支持生成式 UI 的 LangGraph 代理的详细文档，请阅读[此处文档](/langgraph-platform/generative-ui-react)。