Top AI Repos β open-source AI, indexed and scored
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
Top AI Repos tracks AI repositories on GitHub and answers two different questions about each one: is it moving right now, and would you bet a product on it.
π¦π¬ Web app for interacting with any LangGraph agent (PY & TS) via a chat interface.
| Date | Stars |
|---|---|
| 2026-07-31 | 3025 |
| 2026-08-01 | 3028 |
| 2026-08-02 | 3031 |
| 2026-08-03 | 3032 |
| 2026-08-04 | 3032 |
| 2026-08-05 | 3037 |
| 2026-08-06 | 3039 |
Today
+2 stars today
This week
β stars this week
This month
β stars this month
Momentum
8.0
growth rate 0.00%/day
# 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):
```bash
npx create-agent-chat-app
```
or
```bash
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
```
Install dependencies:
```bash
pnpm install
```
Run the app:
```bash
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:
```bash
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, read the [Going to Production](#going-to-production) section.
To use these variables:
1. Copy the `.env.example` file to a new file named `.env`
2. Fill in the values in the `.env` file
3. Restart the application
When these environment variables are set, the application will use them instead of showing the setup form.
## Hiding Messages in the Chat
You can control the visibility of messages within the Agent Chat UI in two main ways:
**1. Prevent Live Streaming:**
To stop messages from being displayed _as they stream_ from an LLM call, add the `langsmith:nostream` tag to the chat model's configuration. The UI normally uses `on_chat_model_stream` events to render streaming messages; this tag prevents those events from being emitted for the tagged model.
_Python Example:_
```python
from langchain_anthropic import ChatAnthropic
# Add tags via the .with_config method
model = ChatAnthropic().with_config(
config={"tags": ["langsmith:nostream"]}
)
```
_TypeScript Example:_
```typescript
import { ChatAnthropic } from "@langchain/anthropic";
const model = new ChatAnthropic()
// Add tags via the .withConfig method
.withConfig({ tags: ["langsmith:nostream"] });
```
**Note:** Even if streaming is hidden this way, the message will still appear after the LLM call completes if it's saved to the graph's state without further modification.
**2. Hide Messages Permanently:**
To ensure a message is _never_ displayed in the chat UI (neither during streaming nor after being saved to state), prefix its `id` field with `do-not-render-` _before_ adding it to the graph's state, along with adding the `langsmith:do-not-render` tag to the chat model's configuration. The UI explicitly filters out any message whose `id` starts with this prefix.
_Python Example:_
```python
result = model.invoke([messages])
# Prefix the ID before saving to state
result.id = f"do-not-render-{result.id}"
return {"messages": [result]}
```
_TypeScript Example:_
```typescript
const result = awExcerpt of 10,323 characters
Read on GitHub
Brace Sproul Β· @langchain-ai
212
David Duong Β· Czech Republic
78
Dylan Boudro Β· Azerbaijan
41
29
John Kennedy Β· @langchain-ai
7
3
choi sung keun Β· FreeLance Β· South Korea
2
2
Sanjeed Β· Oman
1
Sam Crowder Β· Harvard Β· United States
1
1
1
1
ε°ε°ε°δΈ Β· nil Β· China
1
SUBHADIP JANA Β· Docunexus Β· India
1
Victor Moreira
1
Would you bet a product on this? Bounded 0β100 and slow moving.
matched fp:9e499f355c23cbb1, topic:llm
matched fp:9e499f355c23cbb1, topic:langgraph
matched fp:9e499f355c23cbb1, desc:chat interface, name:chat ui