Agent Chat Ui

Agent Chat UI

Agent Chat UI is a Next.js application which enables chatting with any LangGraph server with a `messages` key through a chat interface.

[!NOTE] 🎥 Watch the video setup guide [here](https://youtu.be/lInrwVnZ83o).

Setup

[!TIP] Don't want to run the app locally? Use the deployed site here: [agentchat.vercel.app](https://agentchat.vercel.app)!

First, clone the repository, or run the [`npx` command](https://www.npmjs.com/package/create-agent-chat-app):

npx create-agent-chat-app

or

git clone https://github.com/langchain-ai/agent-chat-ui.git

cd agent-chat-ui

Install dependencies:

pnpm install

Run the app:

pnpm dev

The app will be available at `http://localhost:3000`.

Usage

Once the app is running (or if using the deployed site), you'll be prompted to enter:

• Deployment URL: The URL of the LangGraph server you want to chat with. This can be a production or development URL.
• Assistant/Graph ID: The name of the graph, or ID of the assistant to use when fetching, and submitting runs via the chat interface.
• LangSmith API Key: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers.
• Built with Agent Builder: Toggle this on for Agent Builder deployments. This automatically sets the auth scheme to langsmith-api-key.

After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.

Environment Variables

You can bypass the initial setup form by setting the following environment variables:

NEXT_PUBLIC_API_URL=http://localhost:2024
NEXT_PUBLIC_ASSISTANT_ID=agent
NEXT_PUBLIC_AUTH_SCHEME=

[!NOTE] If you are connecting to a LangSmith Agent Builder deployment, set `NEXT_PUBLIC_AUTH_SCHEME=langsmith-api-key`.

[!TIP] If you want to connect to a production LangGraph server,