Frontend Overview

Status: ACTIVE (pulled from docs.langchain.com) Source: https://docs.langchain.com/oss/python/langgraph/frontend/overview Timestamp: 2026-05-11

Build frontends that visualize LangGraph pipelines in real time. These patterns show how to render multi-step graph execution with per-node status and streaming content.

Architecture

LangGraph graphs are composed of named nodes connected by edges. Each node executes a step and writes output to a specific state key. On the frontend, useStream provides reactive access to node outputs, streaming tokens, and graph metadata.

graph LR
  FRONTEND["useStream()"]
  GRAPH["StateGraph"]
  N1["Node A"]
  N2["Node B"]
  N3["Node C"]

  GRAPH --"stream"--> FRONTEND
  FRONTEND --"submit"--> GRAPH
  GRAPH --> N1
  N1 --> N2
  N2 --> N3

Basic Setup

import { useStream } from "@langchain/react";

interface AgentState {
  messages: BaseMessage[];
  classification: string;
  research: string;
  analysis: string;
  synthesis: string;
}

function Pipeline() {
  const stream = useStream<typeof myAgent>({
    apiUrl: "http://localhost:2024",
    assistantId: "pipeline",
  });

  const classification = stream.values?.classification;
  const research = stream.values?.research;
}

Patterns

• Graph execution: Visualize multi-step graph pipelines with per-node status and streaming content
• Markdown messages: Render AI responses with full formatting
• Tool calling: Display tool invocations and results
• Optimistic updates: Show pending changes before server confirmation

Framework Support

Works with React (@langchain/react), Vue (@langchain/vue), Svelte (@langchain/svelte), and Angular (@langchain/angular).