index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="LangGraph Agent Chat UI provides a React/Vite-based interface for interacting with LangGraph agents, supporting chat, tool rendering, and human-in-the-loop features.">
  <meta name="keywords" content="LangGraph, Agent Chat, React, Vite, Human-in-the-Loop">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LangGraph Agent Chat UI</title>

  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
  <link rel="stylesheet" href="./static/css/bulma.min.css">
  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
  <link rel="stylesheet" href="./static/css/index.css">
  <link rel="icon" href="./static/images/favicon.svg">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script defer src="./static/js/fontawesome.all.min.js"></script>
  <script src="./static/js/bulma-carousel.min.js"></script>
  <script src="./static/js/bulma-slider.min.js"></script>
  <script src="./static/js/index.js"></script>
</head>
<body>

<section class="hero">
  <div class="hero-body">
    <div class="container is-max-desktop">
      <div class="columns is-centered">
        <div class="column has-text-centered">
          <h1 class="title is-1 publication-title">LangGraph Agent Chat UI</h1>
          <div class="is-size-5 publication-authors">
            <span class="author-block">A React/Vite Interface for LangGraph Agents</span>
          </div>
          <div class="column has-text-centered">
            <div class="publication-links">
              <span class="link-block">
                <a href="https://agentchat.vercel.app/" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fas fa-globe"></i></span>
                  <span>Deployed Site</span>
                </a>
              </span>
              <span class="link-block">
                <a href="https://github.com/langchain-ai/agent-chat-ui" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fab fa-github"></i></span>
                  <span>GitHub</span>
                </a>
              </span>
              <span class="link-block">
                <a href="https://python.langchain.com/docs/langgraph" target="_blank" class="external-link button is-normal is-rounded is-dark">
                  <span class="icon"><i class="fas fa-book"></i></span>
                  <span>LangGraph Docs</span>
                </a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="hero teaser">
  <div class="container is-max-desktop">
    <div class="hero-body">
      <h2 class="subtitle has-text-centered">
        Your Gateway to Seamless Agent Interaction with <span class="dnerf">LangGraph</span>
      </h2>
    </div>
  </div>
</section>

<section class="section">
  <div class="container is-max-desktop">
    <div class="columns is-centered has-text-centered">
      <div class="column is-four-fifths">
        <h2 class="title is-3">Overview</h2>
        <div class="content has-text-justified">
          <p>
            The <strong>Agent Chat UI</strong> is a React/Vite application that provides a clean, chat-based interface for interacting with your LangGraph agents. It’s designed to work seamlessly with LangGraph’s core features, including checkpoints, thread management, and human-in-the-loop capabilities.
          </p>
          <p>Here’s why it’s a valuable tool:</p>
          <ul>
            <li><strong>Easy Connection:</strong> Connect to local or deployed LangGraph agents with a simple URL and graph ID.</li>
            <li><strong>Intuitive Chat:</strong> Interact naturally with your agents in a familiar chat format.</li>
            <li><strong>Visualize Agent Actions:</strong> See tool calls and their results rendered directly in the UI.</li>
            <li><strong>Human-in-the-Loop Made Easy:</strong> Seamlessly integrate human input using LangGraph’s <code>interrupt</code> feature.</li>
            <li><strong>Explore Execution Paths:</strong> Travel through time, inspect checkpoints, and fork conversations.</li>
            <li><strong>Debug and Understand:</strong> Inspect the full state of your LangGraph thread at any point.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container is-max-desktop">
    <h2 class="title is-3 has-text-centered">Get Started</h2>
    <div class="columns is-centered">
      <div class="column is-four-fifths">
        <div class="content">
          <h3 class="title is-4">1. Try the Deployed Version (No Setup Required!)</h3>
          <ul>
            <li><strong>Visit:</strong> <a href="https://agentchat.vercel.app/" target="_blank">agentchat.vercel.app</a></li>
            <li><strong>Connect:</strong> Enter your LangGraph deployment URL and graph ID (the <code>path</code> set with <code>langserve.add_routes</code>). For production, include your LangSmith API key.</li>
            <li><strong>Chat!</strong> Start interacting with your agent.</li>
          </ul>

          <h3 class="title is-4">2. Run Locally (Development & Customization)</h3>
          <p><strong>Option A: Clone the Repository</strong></p>
          <pre><code>git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
pnpm install # Or npm install/yarn install
pnpm dev     # Or npm run dev/yarn dev</code></pre>

          <p><strong>Option B: Quickstart with <code>npx</code></strong></p>
          <pre><code>npx create-agent-chat-app
cd agent-chat-app
pnpm install # Or npm install/yarn install
pnpm dev     # Or npm run dev/yarn dev</code></pre>
          <p>Open your browser to <code>http://localhost:5173</code>.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container is-max-desktop">
    <h2 class="title is-3 has-text-centered">Features</h2>
    <div class="columns is-centered">
      <div class="column is-four-fifths">
        <div class="content has-text-justified">
          <ul>
            <li><strong>Easy Connection:</strong> Connect to local or production LangGraph deployments with a URL and graph ID.</li>
            <li><strong>Chat Interface:</strong> Real-time messaging with automatic checkpoint persistence.</li>
            <li><strong>Tool Call Rendering:</strong> Visualize tool calls and results, compatible with LangGraph’s <a href="https://python.langchain.com/docs/guides/tools/custom_tools" target="_blank">tool calling</a>.</li>
            <li><strong>Human-in-the-Loop Support:</strong> Review, edit, and respond to interrupts using LangGraph’s <code>interrupt</code> function.</li>
            <li><strong>Thread History:</strong> Navigate past interactions with checkpointing.</li>
            <li><strong>Time Travel and Forking:</strong> Explore execution paths with LangGraph’s <a href="https://python.langchain.com/docs/modules/agents/concepts#checkpointing" target="_blank">checkpointing</a>.</li>
            <li><strong>State Inspection:</strong> Debug by examining the full LangGraph thread state.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container is-max-desktop">
    <h2 class="title is-3 has-text-centered">LangGraph Setup Examples</h2>
    <div class="columns is-centered">
      <div class="column is-four-fifths">
        <div class="content">
          <h3 class="title is-4">Basic LangGraph Agent</h3>
          <pre><code class="language-python"># agent.py
from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
from langchain_openai import ChatOpenAI
from langgraph.prebuilt import create_agent_executor
from langserve import add_routes
from fastapi import FastAPI

prompt = ChatPromptTemplate.from_messages([
    ("system", "You are a helpful assistant"),
    MessagesPlaceholder(variable_name="messages"),
    MessagesPlaceholder(variable_name="agent_scratchpad"),
])
model = ChatOpenAI(temperature=0)
agent = {"messages": lambda x: x["messages"], "agent_scratchpad": lambda x: []} | prompt | model
app = create_agent_executor(agent, [])
fastapi_app = FastAPI(title="LangGraph Agent")
add_routes(fastapi_app, app, path="/chat")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(fastapi_app, host="localhost", port=2024)
</code></pre>
          <p>Run at <code>http://localhost:2024/chat</code> with graph ID <code>chat</code>.</p>

          <h3 class="title is-4">Human-in-the-Loop Example</h3>
          <pre><code class="language-python"># agent.py
from langgraph.prebuilt import create_agent_executor, interrupt
from langchain_core.tools import tool

@tool
def write_email(subject: str, body: str, to: str):
    return f"Draft email to {to} with subject {subject} sent."

tools = [write_email]
model = ChatOpenAI(model="gpt-4-turbo-preview").bind_tools(tools)

def handle_interrupt(state):
    messages = state["messages"]
    if isinstance(messages[-1].content, list):
        for msg in messages[-1].content:
            if isinstance(msg, ToolInvocation) and msg.name == "write_email":
                return interrupt(messages, {"type": "interrupt", "args": {"type": "response", "studio": msg.args}})
    return {"messages": messages}

agent = {"messages": lambda x: x["messages"], "agent_scratchpad": lambda x: []} | prompt | model | handle_interrupt
app = create_agent_executor(agent, tools)
fastapi_app = FastAPI(title="LangGraph Agent")
add_routes(fastapi_app, app, path="/email_agent")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(fastapi_app, host="localhost", port=2024)
</code></pre>
          <p>Run at <code>http://localhost:2024/email_agent</code> with graph ID <code>email_agent</code>.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="BibTeX">
  <div class="container is-max-desktop content">
    <h2 class="title">BibTeX</h2>
    <pre><code>@misc{langgraph2023agentchat,
  title = {LangGraph Agent Chat UI},
  author = {LangChain Team},
  year = {2023},
  url = {https://github.com/langchain-ai/agent-chat-ui}
}</code></pre>
  </div>
</section>

<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      <a class="icon-link" href="https://github.com/langchain-ai/agent-chat-ui" target="_blank">
        <i class="fab fa-github"></i>
      </a>
    </div>
    <div class="columns is-centered">
      <div class="column is-8">
        <div class="content">
          <p>
            This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
</footer>

</body>
</html>