48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# Agent Chat UI
|
|
|
|
Agent Chat UI is a Vite + React 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:5173`.
|
|
|
|
## 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.
|
|
|
|
After entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.
|