LangChain Learning — Skill Tree

The layers

Your App

DeepAgents Harness — predefined tools, prompts, subagents

LangGraph Runtime — durable execution, streaming, HITL, persistence

LangChain Framework — abstractions & integrations

Vercel AI SDK Streaming + React hooks useChat(), createUI…

LLM Provider API (Anthropic, OpenAI, etc.)

Observability (side-car): LangSmith · Langfuse

LangChain `langchain` `@langchain/core`

Framework — abstractions & integrations for LLMs.

Chat models (ChatAnthropic, ChatOpenAI) — unified interface to call any LLM
Messages (HumanMessage, AIMessage, SystemMessage, ToolMessage)
Tools (tool()) — define tools with Zod schemas that LLMs can call
Callbacks (on_llm_start, on_tool_start…) — hooks to intercept the LLM lifecycle
Output parsers — parse LLM output into structured data

When to use: Getting started quickly · Standardizing how a team builds

Alternatives: AI SDK, LlamaIndex, CrewAI, Google SDK, OpenAI Agents SDK

LangGraph `@langchain/langgraph`

Runtime — durable execution, streaming, HITL, and persistence for stateful agents.

Durable execution — agents survive crashes and restarts via checkpointing
Streaming — real-time token-by-token output through the agent loop
Human-in-the-loop (HITL) — pause the agent, wait for user input, resume
Persistence — save/restore agent state between interactions
StateGraph — nodes (functions) + edges (transitions) forming the agent's decision loop
createAgent() — pre-built ReAct agent (reason + act loop)

When to use: Low-level control · Long running, stateful workflows and agents

Alternatives: Temporal, Inngest

DeepAgents `deepagents`

Harness — predefined tools, prompts, and subagents on top of LangGraph.

Predefined tools — filesystem tools (ls, read, write, edit, glob, grep) out of the box
Prompts — skills (SKILL.md) that guide agent behavior via natural language
Subagents — task tool for delegating work to child agents
createDeepAgent() — one function: model, tools, skills, store, backend

When to use: More autonomous agents · Agents faced with complex, non-deterministic tasks

Alternative: Claude Agent SDK

Vercel AI SDK `ai` `@ai-sdk/react`

Frontend integration — streaming UI, React bridge.

Backend: createUIMessageStream() — transform any stream into a UI-compatible format
Frontend: useChat() — React hook for messages, loading, streaming
Adapters: @ai-sdk/langchain — bridge between LangChain and Vercel AI SDK

It's the plumbing between your backend agent and your React UI — framework-agnostic.

How they connect

User types message → useChat() [Vercel AI SDK] → POST /api/chat → ChatAnthropic [LangChain] inside createDeepAgent() [DeepAgents/LangGraph] → agent.stream() with Langfuse callbacks [LangChain callbacks] → parseLangChainStream() → createUIMessageStream() [Vercel AI SDK] → useChat() renders streaming response

npm packages

Package	What	Layer
`@langchain/core`	Messages, tools, callbacks, base classes	LangChain
`@langchain/anthropic`	ChatAnthropic model	LangChain
`langchain`	High-level utilities, tool() helper	LangChain
`@langchain/langgraph`	StateGraph, nodes/edges	LangGraph
`@langchain/langgraph-checkpoint`	InMemoryStore, checkpointing	LangGraph
`deepagents`	createDeepAgent, FilesystemBackend, skills	DeepAgents
`ai`	createUIMessageStream, server utilities	Vercel AI SDK
`@ai-sdk/react`	useChat(), useCompletion()	Vercel AI SDK
`@ai-sdk/langchain`	Bridge LangChain ↔ Vercel AI SDK	Bridge

LangChain Learning Path

The layers

LangChain langchain @langchain/core

LangGraph @langchain/langgraph