Repolode
Submit
langchain-ai

langchain-ai/agent-chat-ui

A Next.js chat interface for talking with any LangGraph server that exposes a messages key, in Python or TypeScript.

View on GitHubWebsite
Stars
3,237
Forks
694
Open issues
90
Last commit
3 days ago

What is it?

Agent Chat UI is a Next.js web app that connects to a LangGraph server and lets you chat with the agent it hosts. You point it at a deployment URL and an assistant or graph ID, and it sends messages and renders the streamed responses in a chat view. It works with LangGraph servers written in Python or TypeScript, as long as the graph uses a messages key.

Beyond basic chat, the app can hide messages from the UI using a streaming tag on the model or a do-not-render ID prefix, and it can display artifacts in a side panel next to the conversation. Setup can be done through an on-screen form or through environment variables that skip the form. A deployed demo is available, and a local copy runs with pnpm dev.

For production, the project includes an API passthrough route that attaches a LangSmith API key on the server so end users do not need one. The docs warn that this route does not authenticate callers, so custom authentication on the LangGraph deployment is recommended before going live.

Key features

  • 01Chats with any LangGraph server that has a messages key, in Python or TypeScript.
  • 02Configurable via an on-screen setup form or environment variables.
  • 03Hides messages from display, either during streaming or permanently.
  • 04Renders artifacts in a side panel beside the chat.
  • 05Includes an API passthrough route that keeps the LangSmith API key on the server.

Use cases

  • Testing a LangGraph agent through a ready-made chat interface during development.
  • Giving a team a browser front end for an internal LangGraph agent.
  • Starting a custom chat UI by forking a working Next.js example.

Quick start

  1. 1

    Create the project with the npx command

    npx create-agent-chat-app
  2. 2

    Install dependencies with pnpm

    pnpm install
  3. 3

    Run the app and open http://localhost:3000

    pnpm dev

Things to know

  • Connecting to deployed LangGraph servers requires a LangSmith API key.
  • The README warns that the API passthrough setup does not authenticate callers and must be secured before deployment.

Topics

#langgraph#chat-ui#nextjs#typescript#llm#agent#react#chat

FAQ

What is agent-chat-ui?
A Next.js chat interface for talking with any LangGraph server that exposes a messages key, in Python or TypeScript. Agent Chat UI is a Next.js web app that connects to a LangGraph server and lets you chat with the agent it hosts. You point it at a deployment URL and an assistant or graph ID, and it sends messages and renders the streamed responses in a chat view. It works with LangGraph servers written in Python or TypeScript, as long as the graph uses a messages key.
Is agent-chat-ui free to use? What license does it have?
agent-chat-ui is open source under the MIT license. Check the license terms before using it in commercial products.
Is agent-chat-ui still maintained?
Actively maintained. The last commit to agent-chat-ui was on Oct 19, 2026.
What can I use agent-chat-ui for?
Testing a LangGraph agent through a ready-made chat interface during development. Giving a team a browser front end for an internal LangGraph agent. Starting a custom chat UI by forking a working Next.js example.
How do I install agent-chat-ui?
Create the project with the npx command: npx create-agent-chat-app Install dependencies with pnpm: pnpm install Run the app and open http://localhost:3000: pnpm dev
Where can I get agent-chat-ui?
The source code and installation instructions are on GitHub: https://github.com/langchain-ai/agent-chat-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects