README.md

metadata

title: README
emoji: 🏆
colorFrom: blue
colorTo: yellow
sdk: static
pinned: false

LangGraph Agent Chat UI

This project provides a simple, intuitive user interface (UI) for interacting with LangGraph agents. It's built with React and Vite, offering a responsive chat-like experience for testing and demonstrating your LangGraph deployments. It's designed to work seamlessly with LangGraph's core concepts, including checkpoints, thread management, and human-in-the-loop capabilities.

Features

• Easy Connection: Connect to both local and production LangGraph deployments by simply providing the deployment URL and graph ID (the path used when defining the graph).
• Chat Interface: Interact with your agents through a familiar chat interface, sending and receiving messages in real-time. The UI manages the conversation thread, automatically using checkpoints for persistence.
• Tool Call Rendering: The UI automatically renders tool calls and their results, making it easy to visualize the agent's actions. This is compatible with LangGraph's tool calling and function calling capabilities.
• Human-in-the-Loop Support: Seamlessly integrate human intervention using LangGraph's interrupt function. The UI presents a dedicated interface for reviewing, editing, and responding to interrupt requests (e.g., for approval or modification of agent actions), following the standardized schema.
• Thread History: View and navigate through past chat threads, enabling you to review previous interactions. This leverages LangGraph's checkpointing for persistent conversation history.
• Time Travel and Forking: Leverage LangGraph's powerful state management features, including checkpointing and thread manipulation. Run the graph from specific checkpoints, explore different execution paths, and edit previous messages.
• State Inspection: Examine the current state of your LangGraph thread for debugging and understanding the agent's internal workings. This allows you to inspect the full state object managed by LangGraph.
• Multiple Deployment Options:
  • Deployed Site: Use the hosted version at agentchat.vercel.app
  • Local Development: Clone the repository and run it locally for development and customization.
  • Quick Setup: Use npx create-agent-chat-app for a fast, streamlined setup.
• Langsmith API key: When utilizing a product deployment you must provide an Langsmith API key.

Getting Started

There are three main ways to use the Agent Chat UI:

1. Using the Deployed Site (Easiest)

1. Navigate: Go to agentchat.vercel.app.
2. Enter Details:
   • Deployment URL: The URL of your LangGraph deployment (e.g., http://localhost:2024 for a local deployment using LangServe, or the URL provided by LangSmith for a production deployment).
   • Assistant / Graph ID: The path of the graph you want to interact with (e.g., chat, email_agent). This is defined when adding routes with add_routes(..., path="/your_path").
   • LangSmith API Key (Production Deployments Only): If you are connecting to a deployment hosted on LangSmith, you will need to provide your LangSmith API key for authentication. This is NOT required for local LangGraph servers. The key is stored locally in your browser's storage.
3. Click "Continue": You'll be taken to the chat interface, ready to interact with your agent.

2. Local Development (Full Control)

1. Clone the Repository:

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

2. Install Dependencies:

   pnpm install  # Or npm install, or yarn install
   

3. Start the Development Server:

   pnpm dev  # Or npm run dev, or yarn dev
   

4. Open in Browser: The application will typically be available at http://localhost:5173 (the port may vary; check your terminal output). Follow the instructions in "Using the Deployed Site" to connect to your LangGraph.

3. Quick Setup with npx create-agent-chat-app

This method creates a new project directory with the Agent Chat UI already set up.

1. Run the Command:

   npx create-agent-chat-app
   

2. Follow Prompts: You'll be prompted for a project name (default is agent-chat-app).

3. Navigate to Project Directory:

   cd agent-chat-app
   

4. Install and Run:

   pnpm install # Or npm install, or yarn install
   pnpm dev     # Or npm run dev, or yarn dev
   

5. Open in Browser: The application will be available at http://localhost:5173. Follow the instructions in "Using the Deployed Site" to connect.

LangGraph Setup (Prerequisites)

Before using the Agent Chat UI, you need a running LangGraph agent served via LangServe. Below are examples using both a simple agent and an agent with human-in-the-loop.

Basic LangGraph Example (Python)

# agent.py (Example LangGraph agent - Python)
from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
from langchain_core.runnables import chain
from langchain_openai import ChatOpenAI
from langchain_core.messages import AIMessage, HumanMessage
from langgraph.prebuilt import create_agent_executor
from langchain_core.tools import tool

# FastAPI and LangServe for serving the graph
from fastapi import FastAPI
from langserve import add_routes


@tool
def get_weather(city: str):
    """
    Gets the weather for a specified city
    """
    if city.lower() == "new york":
        return "The weather in New York is nice today with a high of 75F."
    else:
        return "The weather for that city is not supported"


# Define the tools
tools = [get_weather]

prompt = ChatPromptTemplate.from_messages(
    [
        ("system", "You are a helpful assistant"),
        MessagesPlaceholder(variable_name="messages"),
        MessagesPlaceholder(variable_name="agent_scratchpad"),
    ]
)

model = ChatOpenAI(temperature=0).bind_tools(tools)


@chain
def transform_messages(data):
    messages = data["messages"]
    if not isinstance(messages[-1], HumanMessage):
        messages.append(
            AIMessage(
                content="I don't know how to respond to messages other than a final answer"
            )
        )
    return {"messages": messages}


agent = (
    {
        "messages": transform_messages,
        "agent_scratchpad": lambda x: [],  # No tools in this simple example
    }
    | prompt
    | model
)

# Wrap the agent in a RunnableGraph
app = create_agent_executor(agent, tools)

# Serve the graph using FastAPI and langserve
fastapi_app = FastAPI(
    title="LangGraph Agent",
    version="1.0",
    description="A simple LangGraph agent server",
)

# Mount LangServe at the /agent endpoint
add_routes(
    fastapi_app,
    app,
    path="/chat",  # Matches the graph ID we'll use in the UI
)

if __name__ == "__main__":
    import uvicorn

    uvicorn.run(fastapi_app, host="localhost", port=2024)

To run this example:

1. Save the code as agent.py.
2. Install necessary packages: pip install langchain langchain-core langchain-openai langgraph fastapi uvicorn "langserve[all]" (add any other packages for your tools).
3. Set your OpenAI API key: export OPENAI_API_KEY="your-openai-api-key"
4. Run the script: python agent.py
5. Your LangGraph agent will be running at http://localhost:2024/chat, and the graph ID to enter into the ui is chat.

LangGraph with Human-in-the-Loop Example (Python)

from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
from langchain_core.runnables import chain
from langchain_openai import ChatOpenAI
from langchain_core.messages import AIMessage, HumanMessage
from langgraph.prebuilt import create_agent_executor, ToolInvocation, interrupt
from langchain_core.tools import tool
from fastapi import FastAPI
from langserve import add_routes


@tool
def write_email(subject: str, body: str, to: str):
    """
    Drafts an email with a specified subject, body and recipient
    """
    print(f"Writing email with subject '{subject}' to '{to}'")  # Debugging
    return f"Draft email to {to} with subject {subject} sent."


tools = [write_email]

prompt = ChatPromptTemplate.from_messages(
    [
        ("system", "You are a helpful assistant that drafts emails."),
        MessagesPlaceholder(variable_name="messages"),
        MessagesPlaceholder(variable_name="agent_scratchpad"),
    ]
)


model = ChatOpenAI(temperature=0, model="gpt-4-turbo-preview").bind_tools(tools)


@chain
def transform_messages(data):
    messages = data["messages"]
    if not isinstance(messages[-1], HumanMessage):
        messages.append(
            AIMessage(
                content="I don't know how to respond to messages other than a final answer"
            )
        )
    return {"messages": messages}



def handle_interrupt(state):
    """Handles human-in-the-loop interruptions."""
    print("---INTERRUPT---")  # Debugging
    messages = state["messages"]
    last_message = messages[-1]

    if isinstance(last_message, AIMessage) and isinstance(
        last_message.content, list
    ):
        # Find the tool call
        for msg in last_message.content:
            if isinstance(msg, ToolInvocation):
                tool_name = msg.name
                tool_args = msg.args
                if tool_name == "write_email":
                    # Construct the human interrupt request
                    interrupt_data = {
                        "type": "interrupt",
                        "args": {
                            "type": "response",
                            "studio": {  # optional
                                "subject": tool_args["subject"],
                                "body": tool_args["body"],
                                "to": tool_args["to"],
                            },
                            "description": "Response Instruction: \n\n- **Response**: Any response submitted will be passed to an LLM to rewrite the email.  It can rewrite the email body, subject, or recipient.\n\n- **Edit or Accept**: Editing/Accepting the email.",
                        },
                    }
                    # Call the interrupt function and return the new state
                    return interrupt(messages, interrupt_data)
    return {"messages": messages}


agent = (
    {
        "messages": transform_messages,
        "agent_scratchpad": lambda x: x.get("agent_scratchpad", []),
    }
    | prompt
    | model
    | handle_interrupt  # Add the interrupt handler
)

# Wrap the agent in a RunnableGraph
app = create_agent_executor(agent, tools)

# Serve the graph using FastAPI and langserve
fastapi_app = FastAPI(
    title="LangGraph Agent",
    version="1.0",
    description="A simple LangGraph agent server",
)

# Mount LangServe at the /agent endpoint
add_routes(
    fastapi_app,
    app,
    path="/email_agent",  # Matches the graph ID we'll use in the UI
)

if __name__ == "__main__":
    import uvicorn

    uvicorn.run(fastapi_app, host="localhost", port=2024)

To run this example:

1. Save the code as agent.py.
2. Install necessary packages: pip install langchain langchain-core langchain-openai langgraph fastapi uvicorn "langserve[all]" (add any other packages for your tools).
3. Set your OpenAI API key: export OPENAI_API_KEY="your-openai-api-key"
4. Run the script: python agent.py
5. Your LangGraph agent will be running at http://localhost:2024/email_agent, and the graph ID to enter into the ui is email_agent.

Key Concepts (LangGraph Integration)

• Messages Key: The Agent Chat UI expects your LangGraph state to include a messages key, which holds a list of langchain_core.messages.BaseMessage instances (e.g., HumanMessage, AIMessage, SystemMessage, ToolMessage). This is standard practice in LangChain and LangGraph for conversational agents.
• Checkpoints: The UI automatically utilizes LangGraph's checkpointing mechanism to save and restore the conversation state. This ensures that you can resume conversations and explore different branches without losing progress.
• add_routes and path: The path argument in add_routes (from langserve) determines the "Graph ID" that you'll enter in the UI. This is crucial for the UI to connect to the correct LangGraph endpoint.
• Tool Calling: If you use bind_tools with your LLM, tool calls and tool results will be rendered in the UI, with clear labels showing the function call and the response.

Human-in-the-Loop Details

The Agent Chat UI supports human-in-the-loop interactions using the standard LangGraph interrupt schema. Here's how it works:

1. Interrupt Schema: Your LangGraph agent should call the interrupt function (from langgraph.prebuilt) with a specific schema to pause execution and request human input. The schema should include:

   • type: interrupt.
   • args: A dictionary containing information about the interruption. This is where you provide the data the human needs to review (e.g., a draft email, a proposed action).
     • type: Can be one of "response", "accept", or "ignore". This indicates the type of human interaction expected.
     • args: Further arguments specific to the interrupt type. For instance, if the interrupt type is response, the args could contain a message to give to the user.
     • studio: Optional. If included, this must contain subject, body, and to keys for interrupt requests.
     • description: Optional. If used, this provides a static prompt to the user that displays the fields the human needs to complete.
   • name (optional): A name for the interrupt.
   • id (optional): A unique identifier for the interrupt.

2. UI Rendering: When the Agent Chat UI detects an interrupt with this schema, it will automatically render a user-friendly interface for human interaction. This interface allows the user to:

   • Inspect: View the data provided in the args of the interrupt (e.g., the content of a draft email).
   • Edit: Modify the data (if the interrupt schema allows for it).
   • Respond: Provide a response (if the interrupt type is "response").
   • Accept/Reject: Approve or reject the proposed action (if the interrupt type is "accept").
   • Ignore: Ignore the interrupt (if the interrupt type is "ignore").

3. Resuming Execution: After the human interacts with the interrupt, the UI sends the response back to the LangGraph via LangServe, and execution resumes.

Contributing

Contributions are welcome! Please see the GitHub repository for issues and pull requests.

License

This organisation is an opensource community project, always check the licences in the repositories + report any ambiguities.