> ## Documentation Index
> Fetch the complete documentation index at: https://cndoc-langchain.site/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`](https://reference.langchain.com/python/langchain/agents/factory/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 中使用生成式用户界面。更多信息，请参阅[使用 LangGraph 实现生成式用户界面](/langsmith/generative-ui-react)。
</Tip>

### 快速开始

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

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

### 本地开发

如需自定义或本地开发，您可以在本地运行 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/javascript/langchain/studio)和[已部署的代理](/oss/javascript/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="terminal-2">
    [连接这些文档](/use-these-docs)到 Claude、VSCode 等，通过 MCP 获取实时答案。
  </Callout>

  <Callout icon="edit">
    [在 GitHub 上编辑此页面](https://github.com/langchain-ai/docs/edit/main/src/oss/langchain/ui.mdx) 或 [提交问题](https://github.com/langchain-ai/docs/issues/new/choose)。
  </Callout>
</div>