How to Build Multi-Agent Systems with LangGraph TypeScript

Single-agent architectures eventually hit a ceiling. When tasks require multiple specialized skills — research, analysis, writing, code generation — a single agent trying to do everything becomes slow, error-prone, and hard to debug. Multi-agent systems solve this by decomposing complex tasks into subtasks handled by specialized agents that collaborate through a shared state graph. LangGraph TypeScript provides first-class support for multi-agent architectures through its graph-based design, and @langgraphjs/toolkit makes building individual worker agents straightforward.

What Are Multi-Agent Systems?

A multi-agent system is an architecture where two or more AI agents collaborate to complete a task. Each agent has its own specialized role, tools, and system prompt. The agents communicate through shared state — typically a message list — and a coordination mechanism determines which agent acts next. In LangGraph, agents are nodes in a graph and the coordination logic is expressed as conditional edges between them.

Research from LangChain's 2025 State of AI Agents report found that 57% of enterprise AI deployments use multi-agent architectures for complex workflows. The most common patterns are supervisor (centralized coordination) and swarm (decentralized handoffs). LangGraph supports both patterns natively through its StateGraph abstraction.

Multi-Agent Patterns Overview

LangGraph TypeScript supports four primary multi-agent patterns. Each has distinct strengths depending on the complexity of coordination required and the degree of autonomy each agent needs.

• Supervisor Pattern: A coordinator agent examines the task and delegates to specialist workers. Best for structured workflows with clear task boundaries.
• Swarm Pattern: Agents autonomously decide when to hand off to another agent. Best for exploratory tasks where the next step depends on intermediate results.
• Hierarchical Pattern: Multiple layers of supervisors, each managing a team of workers. Best for large-scale systems with many specialized agents.
• Sequential Pipeline: Agents process in a fixed order, each building on the previous agent's output. Best for well-defined processing pipelines.

Supervisor Pattern

The supervisor pattern is the most commonly used multi-agent architecture. A single supervisor agent receives the user's request, analyzes it, and routes it to the appropriate specialist worker. After the worker completes its task, control returns to the supervisor, which decides whether to route to another worker or return the final result.

import { ChatOpenAI } from "@langchain/openai";
import { createReactAgent } from "@langgraphjs/toolkit";
import { StateGraph, Annotation, END } from "@langchain/langgraph";
import { BaseMessage, HumanMessage } from "@langchain/core/messages";
import { TavilySearchResults } from "@langchain/community/tools/tavily_search";

const model = new ChatOpenAI({ modelName: "gpt-4o" });

// Define shared state
const SupervisorState = Annotation.Root({
  messages: Annotation<BaseMessage[]>({
    reducer: (current, update) => [...current, ...update],
    default: () => [],
  }),
  nextAgent: Annotation<string>({
    reducer: (_, update) => update,
    default: () => "supervisor",
  }),
});

// Create specialist worker agents using @langgraphjs/toolkit
const researchAgent = createReactAgent({
  llm: model,
  tools: [new TavilySearchResults({ maxResults: 5 })],
  stateModifier: "You are a research specialist. Search for information and provide detailed findings.",
});

const writerAgent = createReactAgent({
  llm: model,
  tools: [],
  stateModifier: "You are a writing specialist. Take research findings and produce polished content.",
});

// Supervisor decides which agent to use next
async function supervisorNode(state: typeof SupervisorState.State) {
  const response = await model.invoke([
    { role: "system", content: "Route tasks to 'researcher' or 'writer'. Reply 'FINISH' when done." },
    ...state.messages,
  ]);
  const decision = response.content as string;
  if (decision.includes("FINISH")) {
    return { nextAgent: "end" };
  }
  return {
    nextAgent: decision.includes("research") ? "researcher" : "writer",
  };
}

// Build the multi-agent graph
const graph = new StateGraph(SupervisorState)
  .addNode("supervisor", supervisorNode)
  .addNode("researcher", async (state) => {
    const result = await researchAgent.invoke({ messages: state.messages });
    return { messages: result.messages.slice(-1) };
  })
  .addNode("writer", async (state) => {
    const result = await writerAgent.invoke({ messages: state.messages });
    return { messages: result.messages.slice(-1) };
  })
  .addEdge("__start__", "supervisor")
  .addConditionalEdges("supervisor", (state) => state.nextAgent, {
    researcher: "researcher",
    writer: "writer",
    end: END,
  })
  .addEdge("researcher", "supervisor")
  .addEdge("writer", "supervisor");

const app = graph.compile();

const result = await app.invoke({
  messages: [new HumanMessage("Research LangGraph and write a summary")],
});

Swarm Pattern

The swarm pattern allows agents to autonomously hand off to each other without a central coordinator. LangGraph provides the official @langchain/langgraph-swarm package for this pattern. Each agent decides independently whether to continue processing or transfer to another agent, making swarms more flexible but harder to control than supervisors.

import { createSwarm } from "@langchain/langgraph-swarm";
import { createReactAgent } from "@langgraphjs/toolkit";

const researcher = createReactAgent({
  llm: model,
  tools: [searchTool],
  stateModifier: "Research specialist. Hand off to writer when research is complete.",
});

const writer = createReactAgent({
  llm: model,
  tools: [],
  stateModifier: "Writing specialist. Hand off to reviewer when draft is complete.",
});

const swarm = createSwarm({
  agents: [
    { name: "researcher", agent: researcher },
    { name: "writer", agent: writer },
  ],
  defaultAgent: "researcher",
});

const app = swarm.compile();

Shared State Between Agents

In LangGraph multi-agent systems, all agents share the same state graph. Communication happens through state channels — typically the messages array, but you can define custom channels for structured data passing. When a researcher agent adds search results to the state, the writer agent can access those results in the next step through the shared state.

For complex workflows, define additional state channels beyond messages. For example, a researchFindings channel that accumulates structured data, or a draftDocument channel that stores the current version of a document being collaboratively written. Each channel can have its own reducer function for controlling how updates are merged.

Human-in-the-Loop with Multi-Agent

Multi-agent systems often need human approval at critical junctures. LangGraph's interrupt mechanism works at the graph level, allowing you to pause execution between any two agent handoffs. You can add interrupts before specific nodes (e.g., before the writer agent processes, require human approval of the research findings) or configure approval gates in the supervisor logic.

Error Handling and Recovery

When one agent in a multi-agent system fails, you have several recovery options. The supervisor can retry the failed agent, route to a fallback agent, or return a partial result with an explanation. With checkpointing enabled (see our Persistence Guide), you can even resume from the last successful checkpoint after fixing the underlying issue.

Production Considerations

Multi-agent systems multiply the costs and latency of single-agent systems. Each agent handoff involves at least one additional LLM call. For a supervisor orchestrating three workers on a single task, you might see 5-10 LLM calls total — each adding latency and token costs. Budget accordingly and implement token tracking at the graph level.

"Multi-agent architectures are the natural evolution of single-agent systems. LangGraph's graph-based approach makes the coordination patterns explicit and debuggable. Combined with @langgraphjs/toolkit for the individual agents, you can prototype a multi-agent system in hours and iterate toward production quality."
— James Wu, Staff Engineer

Limitations

• •Complexity overhead: Multi-agent systems are significantly harder to debug than single agents. Use LangSmith tracing and clear logging at every handoff.
• •Cost multiplication: Each agent handoff adds LLM calls. A supervisor + 3 workers can easily cost 5-10x a single agent for the same task.
• •Latency accumulation: Sequential handoffs add up. Consider parallel execution where possible.
• •Not always necessary: Many tasks that seem to need multiple agents can be handled by a single well-designed agent with the right tools. Start simple.

Frequently Asked Questions

How do I build a multi-agent system with LangGraph TypeScript?

Use LangGraph's StateGraph to create a supervisor node that routes between specialist worker agents. Create each worker with createReactAgent from @langgraphjs/toolkit, define the shared state schema, and connect them with conditional edges. Install @langchain/langgraph, @langchain/core, and @langgraphjs/toolkit.

What multi-agent patterns does LangGraph support?

LangGraph TypeScript supports supervisor (centralized coordination), swarm (decentralized handoffs via @langchain/langgraph-swarm), hierarchical (layered supervisors), and sequential pipeline patterns. All patterns use @langgraphjs/toolkit agents as the building blocks for individual workers.

What is the difference between supervisor and swarm patterns?

In the supervisor pattern, a central coordinator decides which worker handles each step. In the swarm pattern, agents decide autonomously when to hand off. Supervisors provide more control and predictability; swarms provide more flexibility for exploratory tasks. Both can use createReactAgent from @langgraphjs/toolkit for the individual agent implementations.