Agent Chat Ui
🦜💬 Web app for interacting with any LangGraph agent (PY & TS) via a chat interface.
Last verified:
What is Agent Chat Ui?
Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangGraph agent (Python or TypeScript). It enables developers to chat with their LangGraph agents through a clean, chat-based UI that automatically renders tool calls, tool results, and interrupts in an intuitive format. The tool supports both local development and deployed agents, making it versatile for testing during development and for production user-facing applications.
Key features include real-time chat functionality, tool visualization that displays tool calls and results beautifully, time-travel debugging to navigate through conversation history and fork from any point, state inspection to view and modify agent state at any time during execution, and built-in human-in-the-loop support for reviewing and responding to agent requests. It also supports generative UI, artifact rendering in a side panel, and automatic detection of interrupted threads.
Agent Chat UI is designed for developers building AI agents with LangChain and LangGraph. It's ideal for developers who want to quickly test and demo their agents, teams building production AI applications with conversational interfaces, and anyone who needs an open-source, customizable chat interface for LangGraph agents. With 1.7k GitHub stars and 381 forks, it has strong community adoption.
The tool is completely open source under the MIT license and can be self-hosted locally or deployed to platforms like Vercel. It works seamlessly with agents created using create_agent and requires minimal setup whether running locally or in a deployed context like LangSmith.
Agent Chat Ui pricing
Pricing model: Freemium
Agent Chat UI is completely free and open source under the MIT license. There are no paid plans or tiers. You can self-host it locally for free using pnpm dev, or deploy it to Vercel or other platforms at no cost. The only potential cost is infrastructure for hosting your LangGraph server (local development is free, deployed LangGraph servers may require LangSmith paid plans). A hosted demo is available free at agentchat.vercel.app for testing.
Agent Chat Ui pros
- Open source with MIT license - completely free to use and modify
- Works with any LangGraph agent (Python and TypeScript support)
- Real-time chat with streaming support
- Automatic tool call and tool result visualization
- Time-travel debugging to navigate conversation history
- State forking capability to branch from any conversation point
- State inspection to view and modify agent state during execution
- Built-in human-in-the-loop support for agent request approval
- Connects to both local and deployed LangGraph servers
- Automatically detects and displays interrupted threads
- Generative UI support for dynamic interface components
- Artifact rendering in side panel for rich content display
- Minimal setup required - works out of the box
- Can be self-hosted or deployed to Vercel easily
- npx create-agent-chat-app quickstart for instant project creation
- 1.7k GitHub stars showing strong community adoption
- Supports MessagesState for streamlined chat-focused agents
Agent Chat Ui cons
- Requires LangGraph server to be running separately
- Production deployment requires API passthrough or custom authentication setup
- LangSmith API key needed for deployed agents (not local)
- Client-side connection by default not secure for production without setup
- No built-in user authentication - must add custom auth for multi-user apps
- No built-in database - state management depends on your LangGraph server
- Primarily designed for LangGraph agents only (not other agent frameworks)
- No releases published yet - still in active development
- Requires configuration of Graph ID from langgraph.json file
- TypeScript-heavy (95.1% of codebase) may be challenging for Python-only developers
Frequently asked questions about Agent Chat Ui
What is Agent Chat UI?
Agent Chat UI is a Next.js application that provides a conversational interface for interacting with any LangGraph agent (Python or TypeScript). It enables chat-based interaction with your agents, automatically rendering tool calls, tool results, and interrupts in an intuitive interface. It is open source under the MIT license.
How do I get started with Agent Chat UI?
The fastest way is to use the hosted version at agentchat.vercel.app. Enter your deployment URL or local server address (e.g., http://localhost:2024), provide your Graph ID from langgraph.json, optionally add a LangSmith API key for deployed agents, and click Continue to start chatting. For local development, run npx create-agent-chat-app or clone the GitHub repository.
What agents does Agent Chat UI support?
Agent Chat UI works with any LangGraph server that has a messages key, including agents created with create_agent in both Python and TypeScript. It supports agents using MessagesState for chat-focused experiences and works seamlessly with LangGraph's core features like checkpoints and thread management.
Is Agent Chat UI free to use?
Yes, Agent Chat UI is completely free and open source under the MIT license. You can self-host it locally, deploy it to Vercel or other platforms, and use it in production without any licensing fees. The hosted demo at agentchat.vercel.app is also free to use.
How do I connect Agent Chat UI to my agent?
After starting Agent Chat UI, you need to configure three things: 1) Graph ID - the name of your graph from langgraph.json, 2) Deployment URL - your Agent server's endpoint (http://localhost:2024 for local or your deployed URL), and 3) LangSmith API key (optional, only required for deployed LangGraph servers, not local).
Can I use Agent Chat UI in production?
Yes, but you need to set up proper authentication. For production, use either the API Passthrough package (simplest option) which proxies requests and handles authentication, or implement custom authentication in your LangGraph deployment. Production setup requires environment variables like LANGGRAPH_API_URL, NEXT_PUBLIC_API_URL, and LANGSMITH_API_KEY.
What advanced debugging features does Agent Chat UI have?
Agent Chat UI includes time-travel debugging to navigate through conversation history and fork from any point, state inspection to view and modify agent state at any time during execution, and intermediate state visualization in Graph Mode. These features integrate with LangSmith for comprehensive agent debugging and evaluation.
How do I hide messages in the chat?
You can prevent live streaming by adding the langsmith:nostream tag to your chat model's configuration using .with_config() in Python or .withConfig() in TypeScript. To permanently hide messages, prefix the message ID with do-not-render- and add the langsmith:do-not-render tag to prevent both streaming and saved display.
Can I customize Agent Chat UI for my needs?
Yes, Agent Chat UI is open source and designed to be adapted. You can clone the repository, modify the TypeScript/React code, add custom authentication, implement custom message rendering, add artifact components, or integrate generative UI. The codebase is on GitHub at langchain-ai/agent-chat-ui with 381 forks showing active customization.
What is the difference between Agent Chat UI and LangSmith Studio?
Agent Chat UI is a user-facing conversational interface designed for chat-focused agents and production applications, while LangSmith Studio is a developer-focused interface for building and iterating on agent logic. Studio offers more detailed execution information and advanced debugging, while Agent Chat UI provides a streamlined chat-first experience that works with any LangGraph Server.