?? Introducing Agent Chat UI: Interact with LangGraph Applications via Chat! ????

LangChain has launched Agent Chat UI, an open-source web app that makes interacting with any LangGraph application easy and seamless. Whether you’re testing a model or connecting to your LangGraph server, this intuitive interface lets you chat with your AI-powered agents, make tool calls, and even incorporate human-in-the-loop interactions.

?? Key Features of Agent Chat UI

1. Human-AI Conversations

• Chat with AI: Easily interact with your LangGraph server via a chat interface.
• Human-in-the-loop: Combine human and AI inputs for more controlled, interactive conversations.

2. Supports Tool Calls

• Seamless integration: Make tool calls directly within the chat interface, bringing your AI-powered application to life.

3. Local or Deployed Use

• Run Locally or Use Deployed Site: You can run the app on your own machine or use the deployed version available online at agentchat.vercel.app.

?? How to Set Up Agent Chat UI

1?? Clone the Repository or Run the npx Command

You can either clone the repository or use the npx command to create your app.

# Option 1: Use npx to create the app
npx create-agent-chat-app

# Option 2: Clone the repository
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui        

2?? Install Dependencies

Make sure you have pnpm installed and run the following command to install the required dependencies:

pnpm install        

3?? Run the App

Now, you can start the app locally with:

pnpm dev        

Your Agent Chat UI will be available at https://localhost:5173.

??? How to Use Agent Chat UI

Once the app is running (or if you’re using the deployed version), you will be prompted to enter the following:

1?? Deployment URL:

• This is the URL of the LangGraph server you want to chat with. It can be either a production or development URL.

2?? Assistant/Graph ID:

• Enter the name of the graph or ID of the assistant you want to interact with through the chat interface.

3?? LangSmith API Key (only required for connecting to deployed LangGraph servers):

• You’ll need your LangSmith API key to authenticate requests made to LangGraph servers.

Once you’ve entered these values, simply click Continue, and you’ll be redirected to the chat interface, where you can start chatting with your LangGraph server!

?? Watch the Video Setup Guide

Prefer visual guides? Watch the setup video to get started with Agent Chat UI.

?? Why Use Agent Chat UI?

• Flexible & Interactive: It’s easy to interact with LangGraph servers, whether you're working on a personal project or collaborating with a team.
• Human-in-the-Loop Capabilities: Incorporating human input alongside AI makes it easier to fine-tune responses and ensure higher-quality outputs.
• Open-Source: As part of LangChain’s open-source offerings, you can contribute and customize the application to fit your needs.

?? Get Started with Agent Chat UI

Ready to take your LangGraph server to the next level? Whether you want to test your models, interact with agents, or automate tasks, Agent Chat UI is the perfect interface to make it all happen.

?? Start chatting with your LangGraph server today and explore the endless possibilities!

#LangChain #AgentChatUI #AI #OpenSource #LangGraph #Automation #MachineLearning #HumanInTheLoop #AIChatbot #React #Vite