Agent Chat UI
A deployable chat interface for Python and TypeScript LangGraph agents.
The workflow grants only contents: read, while the README distinguishes public client configuration from the server-only LANGSMITH_API_KEY and explains direct-client, proxy-injection, and custom-authentication data paths. This substantively supports least privilege, data-flow transparency, and secret handling. Dependency overrides show active mitigation of transitive issues, but no lockfile, security scan, or vulnerability-response process is present in the supplied evidence. The user clicks Continue before connecting, yet chat activity submits runs to the selected LangGraph server and no per-effect confirmation model for downstream agent actions is shown. No undo, recovery, or compensating-action mechanism is documented. Repository, package, and MIT copyright attribution are clear, but enterprise publisher identity is unverified and the maintainer identity chain is incomplete.
The README, package manifest, and CI are broadly consistent about Next.js, pnpm, and the principal commands; Node 22 and a fixed pnpm version improve environment availability. Many dependencies use caret ranges and no lockfile is supplied, while CI checks formatting, linting, and spelling but does not show a build check. The evidence contains no implementation of user-facing errors, retries, or timeout handling, so failure_messages scores zero without improperly transferring the absence of execution evidence to neighboring criteria.
Documentation covers local development, a deployed site, a production proxy, and custom authentication, with examples for both Python and TypeScript LangGraph agents. The principal boundary—that the LangGraph server must expose a messages key—is explicit, as is the distinction between suppressing streaming and permanently hiding messages. Connection triggering depends on URL, graph ID, auth selection, and an explicit Continue action, but the evidence does not show precise validation of invalid combinations, target environments, or potentially consequential downstream agent capabilities. Environment variables and two production authentication paths are well covered, although custom authentication still requires code modification.
The README is organized around setup, usage, environment variables, message visibility, artifact rendering, and production deployment. Installation instructions are concrete and complete enough for full marks. Naming is broadly stable across the README and package manifest, and numerous practical examples are supplied, though there is no dedicated FAQ and some API conventions are deferred to external documentation. Important limitations around direct production connections, key placement, and message hiding are stated, but browser security and compatibility limitations are not collected comprehensively. The full MIT license matches the metadata. The package remains at 0.0.0 and has no changelog or release policy. A copyright holder is named, but no CODEOWNERS, support route, or explicit maintenance ownership is provided.
Chat interaction, streaming controls, Markdown and math-related dependencies, and the artifact side-panel example support practical, usable output. A reusable UI for arbitrary compatible LangGraph servers offers clear marginal value over building a frontend from scratch. Local operation and documented deployment routes reduce adoption cost, but the evidence gives no performance, accessibility, operating-cost, hosting-cost, or quantified alternative comparison, preventing full scores.
Core claims map to README configuration details, package scripts and dependencies, and CI permissions and checks; these files corroborate the project shape and toolchain. The documentation distinguishes default development connectivity, production proxying, and advanced custom authentication, and explicitly separates nostream behavior from permanent message suppression. However, no architecture record, tests, release history, or dedicated security documentation provides stronger independent corroboration, so the criteria do not receive full marks.
- Do not place LANGSMITH_API_KEY in a NEXT_PUBLIC_ variable in production; use the server-side proxy or a reviewed custom-authentication design.
- The UI sends chat content to the user-configured LangGraph service. Deployers should independently verify that service's retention, logging, tool permissions, and external side effects.
- Message-hiding tags and ID prefixes are presentation controls, not access control, deletion, or confidentiality mechanisms.
- The supplied evidence includes no lockfile, security scanning, build test, rollback design, or failure-handling implementation; review these before production use.
- Publisher identity is unknown, not suspicious, but enterprise maintenance, update, incident-response, and support responsibility should not be assumed.
What does this agent do, and when should you use it?
Agent Chat UI is a Next.js application that connects to any LangGraph server whose state contains a `messages` key. Users supply a deployment URL, an Assistant or Graph ID, and, when required, a LangSmith API key before submitting conversations and viewing streamed responses. The interface can also render agent-produced artifacts in a panel beside the chat. It can run locally with `pnpm dev` or be used through the hosted site; production deployments require either an API Passthrough proxy or custom authentication. It is not an agent runtime and does not create graphs or select models, so adoption requires an existing compatible LangGraph service.
The app reads a Deployment URL, Assistant/Graph ID, authentication scheme, and optional LangSmith API key, then fetches and submits runs to the selected LangGraph server through a browser chat interface. useTypedStream, an extension of useStream, configures the apiUrl, assistantId, and optional authentication headers; the UI uses on_chat_model_stream events for live output and renders messages saved in graph state. A model tagged langsmith:nostream does not emit the events used for live display. To suppress a message permanently, its ID must be prefixed with do-not-render- before it enters state and the model must carry the langsmith:do-not-render tag. Components can obtain the artifact context from thread.meta.artifact and use Artifact to produce content in a right-hand panel. In production, langgraph-nextjs-api-passthrough can proxy requests to LANGGRAPH_API_URL and inject LANGSMITH_API_KEY on the server, or developers can modify useTypedStream to send a custom token through defaultHeaders.
- A LangGraph developer running a Python or TypeScript graph locally needs a working chat front end without building one from scratch.
- A team with a deployed LangGraph assistant wants to give internal users an interface configured by deployment URL and Assistant ID.
- A developer needs streamed agent output while selectively preventing internal model messages from appearing live or at all.
- A team building a writing or content-generation graph wants generated material displayed as an artifact beside the conversation.
- An engineering team productionizing a LangGraph app needs either a Next.js proxy that keeps the LangSmith key server-side or a path to custom token authentication.
What are this agent's strengths and limitations?
- One interface can connect to LangGraph services implemented in either Python or TypeScript, provided their state exposes a
messageskey. - It supports both an interactive setup form and fixed configuration through
NEXT_PUBLIC_API_URL,NEXT_PUBLIC_ASSISTANT_ID, and related environment variables. - Message visibility controls cover both suppressing live streams and permanently filtering selected messages through documented tags and ID conventions.
- The built-in artifact context lets components present non-chat content in a dedicated side panel.
- Production guidance covers both a ready-made Next.js API Passthrough route and a more flexible custom-authentication route.
- Core operation depends on a LangGraph server and its
messagesstate convention; no support for other agent runtimes or a generic chat protocol is documented. - The default direct-from-client connection is unsuitable for production because it requires each user to provide a LangSmith API key and LangGraph configuration.
- Production adoption adds work: teams must configure an API proxy or implement token acquisition, access control, and
useTypedStreamheader changes. - Deployed LangGraph connections ordinarily require a LangSmith API key, introducing secret-management and operational responsibilities.
- The installation material does not state supported Node.js or pnpm versions, resource requirements, or recovery behavior.
How do you install or deploy this agent?
A Next.js-capable environment and pnpm are required. Create an app directly with:
npx create-agent-chat-appAlternatively, clone and start the repository:
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
pnpm install
pnpm devOpen http://localhost:3000. Local use also requires a LangGraph server with a messages key in its state. The source does not specify exact supported Node.js or pnpm versions.
How do you use this agent?
Start the application or visit https://agentchat.vercel.app. Enter the LangGraph Deployment URL and Assistant/Graph ID. A LangSmith API key is additionally required for a deployed LangGraph server; enable Built with Agent Builder for Agent Builder deployments so the authentication scheme becomes langsmith-api-key. Select Continue to begin submitting messages.
To skip the setup form, copy .env.example to .env and set:
NEXT_PUBLIC_API_URL=http://localhost:2024
NEXT_PUBLIC_ASSISTANT_ID=agent
NEXT_PUBLIC_AUTH_SCHEME=Restart the application after editing the file. For LangSmith Agent Builder, use NEXT_PUBLIC_AUTH_SCHEME=langsmith-api-key.
For the documented production proxy path, configure:
NEXT_PUBLIC_ASSISTANT_ID="agent"
LANGGRAPH_API_URL="https://my-agent.default.us.langgraph.app"
NEXT_PUBLIC_API_URL="https://my-website.com/api"
LANGSMITH_API_KEY="lsv2_..."Do not give LANGSMITH_API_KEY a NEXT_PUBLIC_ prefix. The proxy injects it into LangGraph requests on the server.
How does this agent compare with similar options?
Compared with the default direct client connection, API Passthrough is the quicker production option: it proxies requests server-side and keeps the LangSmith API key away from users, but requires proxy configuration. Custom authentication offers more control and can support client requests with tailored access rules, but it requires an authentication flow in the LangGraph deployment plus UI changes for token retrieval and request headers.
FAQ
Does it run or create a LangGraph agent?
messages key.When is a LangSmith API key required?
LANGSMITH_API_KEY stays server-side and must not use the NEXT_PUBLIC_ prefix.Can internal model messages be hidden?
langsmith:nostream only prevents live streaming, so a saved message can still appear afterward. Permanent suppression requires both a do-not-render- ID prefix before state storage and the langsmith:do-not-render tag.Must I self-host the interface?
agentchat.vercel.app site is available, while npx create-agent-chat-app and the repository setup support local or self-managed deployment.Can production deployments use custom authentication?
useTypedStream to pass it through defaultHeaders.