Vercel AI SDK vs LangChain.js: Which for TypeScript?

// In plain English

If you build with TypeScript and want your app to talk to a large language model, two names dominate the conversation: the Vercel AI SDK and LangChain.js. Both let you call a model, stream tokens, define tools, and build AI agents — but they make opposite bets about how much the framework should do for you.

Think of two ways to furnish a kitchen. The AI SDK is a great set of sharp knives and a few core pans: a small, well-made toolkit you compose yourself. LangChain.js is a fully-stocked restaurant kitchen — every gadget, integration, and prebuilt workflow already on the shelf. The first is lighter and easier to reason about; the second saves you from buying tools one by one, at the cost of more cupboards to learn.

Concretely: the AI SDK is a thin, typed layer over model providers. You get a handful of functions — generateText, streamText, generateObject, tool — plus first-class React hooks for streaming UI. LangChain.js is a much larger framework: chains, agents, memory, document loaders, retrievers, vector-store integrations, and the LangGraph library for stateful agent graphs, all under one umbrella.

// Why it matters

Most framework-comparison articles are written for Python, where LangChain, LlamaIndex, and friends are the default. TypeScript developers face a different landscape. They usually ship to the browser or to edge and serverless runtimes (Vercel Functions, Cloudflare Workers, Deno), where bundle size, cold-start time, and streaming to a UI matter far more than they do on a long-lived Python server.

Picking the wrong foundation is expensive to undo. The framework decides how you structure your code, how hard it is to stream a response into a React component, how big your serverless bundle gets, and how much "magic" sits between your code and the raw model. Switching later means rewriting your agent layer.

• You're a frontend or full-stack TS dev shipping a chat UI, a copilot, or a structured-data feature. You care about streaming, React hooks, and a small bundle.
• You're building a heavier backend agent with RAG, long-term memory, many tool integrations, and complex multi-step workflows. You care about not reinventing those pieces.
• You're choosing a stack for a team and want a foundation that won't fight your deployment target or trap you in abstractions you can't see through.

The two libraries pull in different directions on exactly these axes, so a clear-eyed comparison saves real time. This is a more general question covered in how to choose an agent framework — here we focus on the TypeScript-specific tradeoff.

// How each one works

The clearest way to see the difference is the abstraction level each library asks you to think at. The AI SDK keeps you close to the model: you call a function, you get text or a typed object back, and the agent loop is something you assemble from small parts. LangChain.js gives you higher-level building blocks — chains, prebuilt agents, and graphs — that hide more of the wiring.

The AI SDK: a few sharp primitives

An agent in the AI SDK is a model call plus a tool loop. You hand it tools (each a name, a Zod schema, and a function), and the SDK runs the loop: the model picks a tool, the SDK executes it, feeds the result back, and repeats until the model produces a final answer. maxSteps (sometimes called stopWhen) caps the loop.

import { generateText, tool } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';
import { z } from 'zod';

const { text } = await generateText({
  model: anthropic('claude-sonnet-4-5'),
  maxSteps: 5, // let the model call tools, then answer
  tools: {
    getWeather: tool({
      description: 'Get the current weather for a city',
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => {
        const r = await fetch(`https://api.example.com/wx?q=${city}`);
        return await r.json();
      },
    }),
  },
  prompt: 'What should I wear in Berlin today?',
});

console.log(text);

Streaming to a UI is the SDK's signature strength. streamText on the server pairs with the useChat hook in React, and tokens flow into your component with almost no plumbing.

LangChain.js: composed chains and graphs

LangChain.js leans on the Runnable interface — every piece (a prompt, a model, a parser, a retriever) implements the same invoke / stream contract, so you pipe them together. For agents, the modern path is LangGraph: you describe an agent as a graph of nodes and edges with explicit state, which makes loops, branching, and human-in-the-loop pauses first-class.

import { ChatAnthropic } from '@langchain/anthropic';
import { createReactAgent } from '@langchain/langgraph/prebuilt';
import { tool } from '@langchain/core/tools';
import { z } from 'zod';

const getWeather = tool(
  async ({ city }) => {
    const r = await fetch(`https://api.example.com/wx?q=${city}`);
    return JSON.stringify(await r.json());
  },
  {
    name: 'getWeather',
    description: 'Get the current weather for a city',
    schema: z.object({ city: z.string() }),
  },
);

const agent = createReactAgent({
  llm: new ChatAnthropic({ model: 'claude-sonnet-4-5' }),
  tools: [getWeather],
});

const result = await agent.invoke({
  messages: [{ role: 'user', content: 'What should I wear in Berlin today?' }],
});

Same task, similar amount of code for this simple case. The difference shows up as the app grows: LangChain.js already ships memory, document loaders, dozens of vector-store and tool integrations, and graph state, while the AI SDK expects you to bring (or build) those yourself.

// Head to head: the axes that matter

For TypeScript apps specifically, these are the dimensions that usually decide the call. None is a knockout on its own — weight them by what you're building.

// Which to pick (and how to combine them)

Match the tool to the shape of your app rather than to hype. Here is a decision flow that holds up in practice.

Reach for the Vercel AI SDK when

• Your centerpiece is a streaming chat or copilot UI in React, Next.js, Svelte, or Vue.
• You deploy to edge or serverless and care about bundle size and cold starts.
• You want typed, structured output (generateObject with a Zod schema) with minimal ceremony.
• You prefer explicit, transparent code over framework abstractions you have to learn.
• Your agent is relatively simple: a tool loop, not a sprawling multi-step workflow.

Reach for LangChain.js when

• You need RAG out of the box: document loaders, splitters, retrievers, and vector-store integrations.
• Your agent is stateful and complex — branching, loops, human-in-the-loop — where LangGraph's explicit state earns its keep.
• You want prebuilt memory and a big catalog of ready integrations so you write less glue code.
• You value tight tracing/observability via LangSmith during development.
• You may share patterns with a Python team using the LangChain/LangGraph ecosystem.

// Going deeper

Once the basic choice is made, a few nuances separate a smooth project from a painful one.

Bundle size is a habit, not a constant. LangChain.js is modular — @langchain/core, @langchain/anthropic, @langchain/community, and so on. If you import narrowly and tree-shake, the footprint is far smaller than the monolithic reputation suggests. The AI SDK is small by default, but adding many provider packages and adapters adds up too. Measure your actual built bundle on your real deployment target rather than trusting a blog number.

Edge runtime gotchas. Edge environments (Cloudflare Workers, Vercel Edge) lack parts of Node — no full filesystem, limited native modules. The AI SDK is built with these constraints in mind. Some LangChain.js integrations assume Node APIs and will break on the edge; check that every loader, store client, and tool you pull in is edge-compatible before you commit, or keep those pieces on a Node runtime and only stream from the edge.

Mastra and the layered ecosystem. Don't read this as a strict two-horse race. Mastra builds on top of the AI SDK to add agents, workflows, memory, and RAG — so choosing the AI SDK doesn't mean building everything yourself. On the other side, the broader landscape includes provider-native options like the Claude Agent SDK. The TS agent ecosystem is layered: a low-level primitive (AI SDK), higher-level frameworks built on it (Mastra), and a separate batteries-included stack (LangChain.js / LangGraph).

Structured output is a quiet decider. Both support typed output via Zod, and for many apps reliable structured output matters more than the agent loop. The AI SDK's generateObject and streamObject make it a first-class, ergonomic path; LangChain.js does it via withStructuredOutput and output parsers. If your product is mostly "turn messy text into typed JSON," weigh how clean each path feels for your schemas.

Where to go next. Read the general agent framework comparison to see how these fit beside the Python options, and building an agent without a framework to understand what either library is actually doing for you under the hood. The durable takeaway: prototype your real core feature in both for an afternoon. The right choice usually becomes obvious the moment you try to stream a response or wire up your fifth integration.