langchain-ai/agent-chat-ui

What it solves

It provides a ready-to-use chat interface for interacting with LangGraph servers. This removes the need for developers to build a custom frontend from scratch when they want to deploy or test an AI agent built with LangGraph.

How it works

Built as a Next.js application, the UI connects to a LangGraph server using a deployment URL, an assistant or graph ID, and authentication (via LangSmith API keys or custom auth). It handles the communication between the user and the server, supporting live streaming of LLM responses and the rendering of "artifacts" (special content displayed in a side panel).

Who it’s for

Developers building AI agents with LangGraph who need a professional chat interface for their agents without spending time on frontend development.

Highlights

• Quick Deployment: Can be launched via npx create-agent-chat-app or used as a hosted demo.
• Message Control: Allows developers to hide specific messages from the user by using tags like langsmith:nostream or prefixing IDs with do-not-render-.
• Artifact Support: Includes a side-panel system for rendering structured content (artifacts) alongside the chat.
• Production Ready: Supports multiple authentication paths, including an API passthrough proxy for secure API key management and custom authentication schemes.