How to build a Frontend for LangChain Deep Agents with CopilotKit

LangChain recently introduced Deep Agents: a new way to build structured, multi-agent systems that can plan, delegate, and reason across multiple steps.

LangChain recently introduced Deep Agents: a new way to build structured, multi-agent systems that can plan, delegate, and reason across multiple steps.

It comes with built-in planning, a filesystem for context, and subagent spawning. But connecting that agent to a real frontend is still surprisingly hard.

Today, we will build a Deep Agents powered job search assistant and connect it to a live Next.js UI with CopilotKit, so the frontend stays in sync with the agent in real time.

You will find architecture, the key patterns, how state flows between the UI ↔ agent, and the step-by-step guide to building this from scratch.

Let's build it.

Check out CopilotKit's GitHub ⭐️

1. What are Deep Agents?

Most agents today are just “LLM in a loop + tools”. That works, but it tends to be shallow: no explicit plan, weak long-horizon execution, and messy state as runs get longer.

Popular agents like Claude Code, Deep Research, and Manus get around this by following a common pattern: they plan first, externalize working context (often via files or a shell), and delegate isolated pieces of work to sub-agents.

Deep Agents package those primitives into a reusable agent runtime.

Instead of designing your own agent loop from scratch, you call create_deep_agent(...) and get a pre-wired execution graph that already knows how to plan, delegate, and manage state across many steps.

__wf_reserved_inherit

At a practical level, a Deep Agent created via create_deep_agent is just a LangGraph graph. There’s no separate runtime or hidden orchestration layer.

That means standard LangGraph features work as-is:

• streaming
• checkpoints and interrupts
• human-in-the-loop controls

The mental model (how it runs)

Conceptually, the execution flow looks like this:

User goal ↓ Deep Agent (LangGraph StateGraph) ├─ Plan: write_todos → updates "todos" in state ├─ Delegate: task(...) → runs a subagent with its own tool loop ├─ Context: ls/read_file/write_file/edit_file → persists working notes/artifacts ↓ Final answer

That gives you a usable structure for “plan → do work → store intermediate artifacts → continue” without inventing your own plan format, memory layer, or delegation protocol.

You can read more at blog.langchain.com/deep-agents and check official docs.

Where CopilotKit Fits

Deep Agents push key parts into explicit state (e.g. todos + files + messages), which makes runs easier to inspect. That explicit state is also what makes Copilotkit integration possible.

CopilotKit is a frontend runtime that keeps UI state in sync with agent execution by streaming agent events and state updates in real time (using AG-UI under the hood).

This middleware (CopilotKitMiddleware) is what allows the frontend to stay in lock-step with the agent as it runs. You can read the docs at docs.copilotkit.ai/langgraph/deep-agents.

agent = create_deep_agent( model="openai:gpt-4o", tools=[get_weather], middleware=[CopilotKitMiddleware()], # for frontend tools and context system_prompt="You are a helpful research assistant." )

The diagram below shows how a user action in the UI is sent via AG-UI to any agent backend, and responses flow back as standardized events.