Frontend Overview

Purpose and Scope

This page orients application developers who are building user interfaces for LangChain-style agent systems, especially deep agents that decompose a task across a coordinator and specialist subagents. The official frontend guidance describes these UIs as more than a flat chat transcript: a good interface should make planning, delegation, streaming output, tool activity, and sandbox-backed artifacts visible while the work is happening. In practice, that means the frontend needs structured agent state, not just final assistant text, so users can inspect progress and understand why a long-running task is taking a particular path.

The frontend material is JavaScript and TypeScript focused, while this repository is the LangChain Python monorepo. The direct source touchpoint included for this page is a classic Python module that preserves access to a JavaScript language parser by dynamically re-exporting JavaScriptSegmenter from langchain_community. That matters for frontend-oriented systems because agent products often need to ingest, split, or inspect JavaScript application code as documents before presenting or modifying it in an agent UI. Sources: libs/langchain/langchain_classic/document_loaders/parsers/language/javascript.py

Relevant Source Files

• libs/langchain/langchain_classic/document_loaders/parsers/language/javascript.py — defines the compatibility surface for JavaScriptSegmenter, using create_importer and DEPRECATED_LOOKUP to resolve the implementation from langchain_community.document_loaders.parsers.language.javascript while keeping the classic import path available.

Core Frontend Primitives

The official frontend docs center on deep agents created with createDeepAgent and rendered through v1 frontend SDK packages such as @langchain/react. A deep agent uses a coordinator-worker architecture: the main agent plans and delegates, while named subagents run specialized work in isolation. The UI should mirror that structure. Instead of combining all tokens into one assistant bubble, render the coordinator conversation separately and expose subagent cards, task lists, intermediate files, tool calls, and final synthesis in places that match the user’s mental model of the workflow.

The main frontend connection primitive is useStream. The docs show connecting to an assistant with an API URL and assistant ID, then reading a stream handle that contains messages, subagent discovery snapshots, and custom state. A typical React entry point passes a type parameter for the agent so state projections are type-safe. The coordinator’s messages remain on stream.messages; subagent identities and statuses appear through stream.subagents; and custom state such as stream.values.todos can drive progress panels, planning checklists, or workspace sidebars.

import { useStream } from "@langchain/react";
 
function App() {
  const stream = useStream<typeof agent>({
    apiUrl: "http://localhost:2024",
    assistantId: "agent",
  });
 
  const todos = stream.values?.todos;
  const subagents = [...stream.subagents.values()];
}

System-to-Code Mapping

For the frontend SDK, the most important architectural boundary is the boundary between root stream state and subagent-scoped state. The root stream is for the coordinator: high-level planning, user-facing conversation, and final synthesis. Subagents are represented as discovery snapshots with identity, namespace, status, messages, tool-call metadata, values, errors, and results exposed through selector helpers such as useMessages(stream, subagent). That selector-based approach prevents the UI from interleaving every worker’s tokens into one unreadable transcript, while still allowing expanded audit views when the user needs them.

The repository file mapped to this page sits on the ingestion side rather than the browser rendering side. It imports TYPE_CHECKING and Any, conditionally exposes JavaScriptSegmenter for type checkers, registers a deprecated lookup for the old classic path, and implements __getattr__ by delegating to an importer created with create_importer. The public export list contains only JavaScriptSegmenter. This is a narrow but important compatibility pattern: older Python code can continue importing the JavaScript segmenter from the classic namespace while the actual implementation is resolved from the community package. Sources: libs/langchain/langchain_classic/document_loaders/parsers/language/javascript.py

That mapping is useful when an agent UI is backed by a code-aware workflow. For example, a deep agent that reviews a JavaScript frontend project may load source files as documents, segment them by language-aware boundaries, delegate analysis to a researcher subagent, and stream findings back to the browser. The frontend renders the work as coordinator planning plus scoped subagent progress; the backend may rely on language parsers and loaders to prepare the source context that powers those subagents. The two layers are separate, but they support the same end-user goal: explain and operate on a real project safely and visibly.

Execution Flow for Agent UIs

A practical frontend flow starts by creating or deploying the agent, then connecting the UI stream to that agent endpoint. The coordinator receives the user’s task and emits root-level messages that describe the plan or ask clarifying questions. When the coordinator starts specialist work, the stream exposes subagent discovery snapshots. The UI can mount cards for those specialists, use selector helpers to read their scoped messages, and place the cards near the coordinator turn or tool call that spawned them. This keeps delegation visible without forcing every user to read every intermediate event.

For long-running or artifact-heavy tasks, the official docs recommend surfacing more than chat messages. Deep agent examples include task planning, custom state, sandbox-backed artifacts, and IDE-like experiences. A content builder agent, for instance, can load behavior from AGENTS.md and skill folders, delegate web research to a specialized subagent, draft blog or social content, generate images, and save files under a project directory. A frontend for that workflow should show the plan, research worker progress, generated files, and final content rather than treating the entire process as one opaque response.

Implementation Details and Constraints

The source compatibility module demonstrates a repository-wide pattern that is relevant when maintaining agent applications across package generations: public import paths can be preserved while implementations move. DEPRECATED_LOOKUP maps JavaScriptSegmenter to the community parser module, _import_attribute centralizes the lookup and warning behavior, and __getattr__ performs dynamic attribute resolution. Consumers that still import from langchain_classic.document_loaders.parsers.language.javascript therefore get a stable symbol, while the source of truth lives elsewhere. Sources: libs/langchain/langchain_classic/document_loaders/parsers/language/javascript.py

Frontend code should follow a similar separation of concerns. Keep rendering logic focused on stream projections and user interaction, not on backend orchestration internals. Let the agent runtime own planning, subagent execution, tool calls, and sandbox file operations; let the UI decide how to display coordinator messages, specialist progress, approvals, artifacts, and errors. When working with deep agents, avoid flattening subagent output into the root transcript unless the user explicitly asks for a compact view. Selector-based rendering is the intended shape because it keeps the coordinator’s reasoning separate from specialists’ work.

Next Steps

Start with a minimal useStream integration that renders stream.messages, then add subagent cards from stream.subagents and scoped selectors such as useMessages(stream, subagent). Once the basic transcript is reliable, expose custom state like todos, render tool-call status, and add artifact panels for sandbox-backed files. If your UI works with JavaScript codebases, keep the ingestion layer in mind: the classic JavaScriptSegmenter compatibility path can support code-aware document preparation while the frontend SDK presents the live agent workflow to users. Sources: libs/langchain/langchain_classic/document_loaders/parsers/language/javascript.py