|
<!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> |
