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

# 智能体聊天界面

[Agent Chat UI](https://github.com/langchain-ai/agent-chat-ui) 是一个 Next.js 应用程序，提供用于与任何 LangChain 代理进行交互的对话界面。它支持实时聊天、工具可视化以及高级功能，如时间旅行调试和状态分叉。Agent Chat UI 与使用 \[`create_agent`] 创建的代理无缝协作，无论您是在本地运行还是在部署环境中（例如 [LangSmith](/langsmith/home)），都能以最小配置为您的代理提供交互式体验。

Agent Chat UI 是开源的，可以根据您的应用需求进行调整。

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/lInrwVnZ83o?si=Uw66mPtCERJm0EjU" title="Agent Chat UI" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

<Tip>
  您可以在 Agent Chat UI 中使用生成式 UI。更多信息，请参阅 [使用 LangGraph 实现生成式用户界面](/langsmith/generative-ui-react)。
</Tip>

### 快速开始

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

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

### 本地开发

为了自定义或本地开发，您可以在本地运行 Agent Chat UI：

<CodeGroup>
  ```bash 使用 npx theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  # 创建一个新的 Agent Chat UI 项目
  npx create-agent-chat-app --project-name my-chat-ui
  cd my-chat-ui

  # 安装依赖并启动
  pnpm install
  pnpm dev
  ```

  ```bash 克隆仓库 theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}}
  # 克隆仓库
  git clone https://github.com/langchain-ai/agent-chat-ui.git
  cd agent-chat-ui

  # 安装依赖并启动
  pnpm install
  pnpm dev
  ```
</CodeGroup>

### 连接到你的智能体

智能体聊天界面可以连接到[本地](/oss/python/langchain/studio#set-up-local-agent-server)和[已部署的智能体](/oss/python/langchain/deploy)。

启动智能体聊天界面后，你需要配置它以连接到你的智能体：

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

配置完成后，智能体聊天界面将自动获取并显示智能体中任何中断的对话线程。

<Tip>
  智能体聊天界面开箱即用地支持渲染工具调用和工具结果消息。要自定义显示哪些消息，请参阅[隐藏聊天中的消息](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#hiding-messages-in-the-chat)。
</Tip>

***

<div className="source-links">
  <Callout icon="edit">
    [Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/i18n\zh-CN\oss\langchain\ui.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose).
  </Callout>

  <Callout icon="terminal-2">
    [Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers.
  </Callout>
</div>