Agent Chat UI

Status: ACTIVE (pulled from docs.langchain.com) Source: https://docs.langchain.com/oss/python/langgraph/ui Timestamp: 2026-05-11

Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangChain agent. Supports real-time chat, tool visualization, time-travel debugging, and state forking.

Quick Start

Visit agentchat.vercel.app for the hosted version.

1. Enter your deployment URL or local server address
2. The UI automatically detects and renders tool calls and interrupts
3. Start chatting

Local Development

# Create new project
npx create-agent-chat-app --project-name my-chat-ui
cd my-chat-ui
pnpm install
pnpm dev

# Or clone repository
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
pnpm install
pnpm dev

Connect to Your Agent

After starting Agent Chat UI, configure:

1. Graph ID: Your graph name (from langgraph.json graphs key)
2. Deployment URL: Agent server endpoint (e.g., http://localhost:2024 for local)
3. LangSmith API key (optional): Not required for local agent server

Features

• Real-time chat: Stream responses token-by-token
• Tool visualization: See tool calls and results inline
• Time-travel debugging: Rewind and replay from any checkpoint
• State forking: Branch from any point with modified state
• Interrupted thread detection: Automatically shows paused threads
• Generative UI: Custom component rendering for tool outputs

Customizing

To hide specific messages from the chat, see Hiding Messages in the Chat.