Agent Chat UI - Docs by LangChain中文

Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangChain agent. It supports real-time chat, tool visualization, and advanced features like time-travel debugging and state forking. Agent Chat UI works seamlessly with agents created using create_agent and provides interactive experiences for your agents with minimal setup, whether you’re running locally or in a deployed context (such as LangSmith). Agent Chat UI is open source and can be adapted to your application needs.

You can use generative UI in the Agent Chat UI. For more information, see Implement generative user interfaces with LangGraph.

Quick start

The fastest way to get started is using the hosted version:

Visit Agent Chat UI
Connect your agent by entering your deployment URL or local server address
Start chatting - the UI will automatically detect and render tool calls and interrupts

Local development

For customization or local development, you can run Agent Chat UI locally:

# 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

连接到你的代理

Agent Chat UI 可以连接到本地代理和已部署的代理。启动 Agent Chat UI 后，需要配置它来连接你的代理：

Graph ID：输入你的图名称（可在 langgraph.json 文件的 graphs 下找到）
Deployment URL：你的 Agent server 端点（例如本地开发使用 http://localhost:2024，或使用已部署代理的 URL）
LangSmith API key（可选）：添加你的 LangSmith API 密钥（如果使用本地 Agent server，则不需要）

配置完成后，Agent Chat UI 会自动获取并显示代理中任何已中断的线程。