Vercel AI SDK vs LangChain for Next.js: which should I use?

They serve different purposes. The Vercel AI SDK handles the hard parts of the UI layer, streaming responses to the browser, managing chat state, tool call round-trips in a streaming context. LangChain handles retrieval pipelines, chain composition, and agent orchestration on the backend. For a Next.js app with a chat interface backed by a RAG pipeline, you'd use both: the AI SDK for the API route and React hooks, LangChain for the retrieval chain the API route calls.

AI SDK vs raw fetch to the OpenAI API: what's the actual difference?

For a single non-streaming request, the difference is small, the SDK adds a thin wrapper around fetch. The value shows up with streaming (especially streaming tool calls), multi-turn conversations, and type safety. If you're building anything beyond a single static prompt, the SDK saves meaningful time. If you're making one-off API calls in a background job, use the OpenAI SDK directly.

How do you handle streaming errors in production?

Three layers: first, wrap the server-side `streamText` call in try/catch and return a proper error response if the model call fails before streaming begins. Second, use the `onError` callback in `useChat` to handle mid-stream errors (network drops, model errors after streaming starts). Third, implement retry logic with exponential backoff for transient errors, network issues and rate limit hits are common at scale. Log the error with enough context (model, prompt length, timestamp) to debug later.

Can you count tokens with the Vercel AI SDK?

The SDK returns token usage in the response from `generateText` and at the end of a `streamText` call (in the `onFinish` callback). You get `promptTokens`, `completionTokens`, and `totalTokens`. For streaming, the token count isn't available mid-stream, only in `onFinish`. If you need to estimate token count before sending (e.g., to check against context limits), use the tokenizer from the specific provider's SDK or the `tiktoken` library for OpenAI models.

Stack Guide · Vercel AI SDK

The Vercel AI SDK handles the hard parts of streaming AI responses in Next.js.

Getting text to stream from a language model to a browser is more work than it looks. The SDK abstracts the tricky parts: server-sent events, streaming tool calls, conversation state, multi-provider support. Without it you're writing and maintaining that infrastructure yourself.

These are the patterns that work, the cases where the SDK earns its place, and the cases where you should reach for something more direct.

SaaS MVP development All stacks →

Building an AI product in Next.js?

What the SDK actually solves.

Three concrete problems it handles well. Each one is non-trivial to build from scratch.

Streaming response handling

Without the SDK, streaming a response to the browser means setting up a ReadableStream, handling partial JSON, and wiring the client to consume it without blocking the UI. The SDK handles all of that. `streamText` on the server and `useChat` on the client connect cleanly. You write maybe 20 lines of code for a working streaming chat interface.

Tool call parsing

When a model returns a tool call in the middle of a stream, you need to interrupt the text stream, parse the tool call, execute the tool, and stream the result back. The SDK manages this state machine for you. Writing it from scratch is a weekend of work; the SDK turns it into a few dozen lines.

Model provider abstraction

The SDK uses a unified interface for OpenAI, Anthropic, Google, and a handful of other providers. Swapping the model in `generateText` or `streamText` is a single line change. This is particularly useful during development when you're evaluating models, and in production when you want to route different tasks to different providers.

When to use the SDK.

The SDK earns its overhead in specific situations. These are the three where the trade-off is clear.

Next.js apps with AI chat interfaces
The SDK is purpose-built for this pattern. The `useChat` hook handles optimistic UI, error states, loading indicators, and message history in a way that would take significant engineering to build from scratch. If you're building a chat interface in Next.js, using the SDK is the obvious choice.
Multi-model routing within one app
If your app uses Claude for document analysis, GPT-5 for coding tasks, and a smaller model for classification (all accessible through the same interface) the SDK's provider abstraction makes that manageable. One interface, multiple backends, clear TypeScript types throughout.
Teams that want TypeScript types for AI responses
The SDK provides typed response objects for text, structured data, tool results, and streaming states. Working with AI responses in an untyped way produces runtime surprises. The SDK's types make the contract explicit and let TypeScript catch errors before they reach production.

When to skip it.

The SDK adds a dependency and a layer of abstraction. There are cases where neither is worth it.

Pure server-side AI processing with no streaming UI
If you're running batch jobs, background enrichment, or any AI processing that doesn't involve a user watching a response appear on screen, the SDK's streaming and UI abstractions add nothing. Use the provider's SDK directly. It's less code and has fewer moving parts.
Python backends
The Vercel AI SDK is TypeScript-only. If your backend is Python (FastAPI, Django, or otherwise), you're not using this SDK. Use the OpenAI Python SDK, Anthropic Python SDK, or LangChain for Python-based AI backends.
Cases where you need deep control over request/response
The SDK wraps the underlying provider APIs. When you need to set specific headers, use a provider feature the SDK hasn't abstracted, or have precise control over retry behavior and timeouts, the abstraction is an obstacle. Drop down to the provider's SDK directly.

Streaming patterns that hold up in production.

Streaming UIs have more edge cases than non-streaming ones. These are the patterns we use to handle them reliably.

useChat for conversational interfaces

The `useChat` hook manages the full conversation state: message history, the current streaming response, loading state, and error state. It handles optimistic updates, the user's message appears immediately while the response streams in. For chat UIs, this is the starting point.

streamText for custom streaming

When you need more control than `useChat` provides (custom message transforms, non-chat streaming, server-side processing before streaming begins) `streamText` gives you a stream you can pipe or transform. Works in Next.js Route Handlers, Edge Functions, and Node.js.

Error handling in streaming

Streaming errors are different from regular API errors because the response has already started. Handle errors with the `onError` callback in `useChat` and by checking the `error` state in the UI. Don't assume the absence of an error means the stream completed successfully, check `finishReason` in the server handler.

UI skeleton states

Show a loading skeleton while waiting for the first token, not a generic spinner. Users perceive streaming UIs as faster when there's an immediate visual response, even before text starts appearing. The `isLoading` and `status` flags from `useChat` give you enough information to render appropriate states.

Tool use with the AI SDK.

The SDK integrates with Zod for tool schemas and handles the tool call loop automatically. Three things worth knowing.

generateText with tools

Pass a `tools` object to `generateText` or `streamText` with typed input schemas using Zod. The SDK validates tool call arguments against the schema before passing them to your `execute` function, runtime type safety without extra code.

Parallel tool calls

Models can call multiple tools in a single response. The SDK handles parallel tool execution and collects results before continuing. Define your tools to be independent when possible. Parallel execution is faster than sequential.

Tool result handling

Tool results flow back to the model automatically in the SDK's loop. If a tool call produces an error, return the error as the tool result rather than throwing, the model can use the error to adjust its next action. Throwing breaks the loop.

Multi-model routing in one app.

The SDK makes multi-model routing straightforward: different tasks in the same application can use different providers and models, all through the same `generateText` / `streamText` interface.

Long document analysis

Claude Sonnet 5 via Anthropic provider

200k context, strong instruction following

Code generation

GPT-5 via OpenAI provider

Better coding benchmarks

High-volume classification

Claude Haiku or GPT-5 mini

Cost: 10-16x cheaper for simple tasks

Frequently asked questions.

Vercel AI SDK vs LangChain for Next.js: which should I use?: They serve different purposes. The Vercel AI SDK handles the hard parts of the UI layer, streaming responses to the browser, managing chat state, tool call round-trips in a streaming context. LangChain handles retrieval pipelines, chain composition, and agent orchestration on the backend. For a Next.js app with a chat interface backed by a RAG pipeline, you'd use both: the AI SDK for the API route and React hooks, LangChain for the retrieval chain the API route calls.
AI SDK vs raw fetch to the OpenAI API: what's the actual difference?: For a single non-streaming request, the difference is small, the SDK adds a thin wrapper around fetch. The value shows up with streaming (especially streaming tool calls), multi-turn conversations, and type safety. If you're building anything beyond a single static prompt, the SDK saves meaningful time. If you're making one-off API calls in a background job, use the OpenAI SDK directly.
How do you handle streaming errors in production?: Three layers: first, wrap the server-side `streamText` call in try/catch and return a proper error response if the model call fails before streaming begins. Second, use the `onError` callback in `useChat` to handle mid-stream errors (network drops, model errors after streaming starts). Third, implement retry logic with exponential backoff for transient errors, network issues and rate limit hits are common at scale. Log the error with enough context (model, prompt length, timestamp) to debug later.
Can you count tokens with the Vercel AI SDK?: The SDK returns token usage in the response from `generateText` and at the end of a `streamText` call (in the `onFinish` callback). You get `promptTokens`, `completionTokens`, and `totalTokens`. For streaming, the token count isn't available mid-stream, only in `onFinish`. If you need to estimate token count before sending (e.g., to check against context limits), use the tokenizer from the specific provider's SDK or the `tiktoken` library for OpenAI models.

Building an AI product in Next.js?

Tell us what you're building. We can help you pick the right stack, design the AI architecture, and get a working product shipped faster than you'd expect.