Vercel AI SDK vs LangChain.js (2026): Two Ways to Build AI-Powered Apps

#ai #typescript #webdev #nextjs

Both let you build AI apps in TypeScript. The similarity ends there.

The AI SDK was designed for streaming AI responses into React UIs. It ships with useChat, useCompletion, and useObject hooks that handle streaming, loading states, and error handling automatically — React Query for AI responses.

LangChain.js was designed for orchestration. Chains, agents, memory, RAG, vector stores, tool calling — a framework for multi-step AI workflows where the AI reasons, retrieves, and acts before generating a final response.

Streaming Chat: AI SDK Wins Clearly

// AI SDK — 6 lines of UI logic handle everything
'use client'
import { useChat } from 'ai/react'

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat'
  })

  return (
    <form onSubmit={handleSubmit}>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
      {isLoading && <div>Thinking...</div>}
      <input value={input} onChange={handleInputChange} />
      <button disabled={isLoading}>Send</button>
    </form>
  )
}

// API route
import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

export async function POST(req: Request) {
  const { messages } = await req.json()
  return streamText({ model: openai('gpt-4o'), messages }).toDataStreamResponse()
}

LangChain.js has no React hooks. You build streaming consumption and state management yourself — significantly more code for the same result.

Structured Output

// AI SDK — streamObject with useObject hook
const { object, submit, isLoading } = useObject({
  api: '/api/analyze',
  schema: ProductSchema  // Zod schema
})
// object arrives token-by-token — partial objects render in real-time

// LangChain.js — one-shot structured extraction
const structuredModel = new ChatOpenAI({ model: 'gpt-4o' }).withStructuredOutput(ProductSchema)
const result = await structuredModel.invoke(`Analyze: "${text}"`)
// No streaming for partial objects

RAG Pipeline: LangChain.js Wins

// LangChain.js — full RAG in ~20 lines
import { PDFLoader } from '@langchain/community/document_loaders/fs/pdf'
import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter'
import { MemoryVectorStore } from 'langchain/vectorstores/memory'
import { createRetrievalChain } from 'langchain/chains/retrieval'

const docs = await new PDFLoader('docs.pdf').load()
const chunks = await new RecursiveCharacterTextSplitter({ chunkSize: 1000, chunkOverlap: 200 }).splitDocuments(docs)
const vectorStore = await MemoryVectorStore.fromDocuments(chunks, new OpenAIEmbeddings())
const chain = await createRetrievalChain({
  retriever: vectorStore.asRetriever({ k: 4 }),
  combineDocsChain: await createStuffDocumentsChain({ llm, prompt })
})

const result = await chain.invoke({ input: 'What is the refund policy?' })

AI SDK provides embedding primitives but no document loaders, text splitters, or vector store integrations. You assemble those pieces yourself.

Tool Calling

// AI SDK — clean tool definition with maxSteps for multi-turn
const { text } = await generateText({
  model: anthropic('claude-sonnet-4-6'),
  tools: {
    getWeather: tool({
      description: 'Get weather for a city',
      parameters: z.object({ location: z.string(), unit: z.enum(['celsius', 'fahrenheit']) }),
      execute: async ({ location, unit }) => weatherApi.getCurrent(location, unit)
    })
  },
  maxSteps: 5,  // allows model to call tools and see results before responding
  prompt: 'What is the weather in Paris right now?'
})

// LangChain.js — agent executor with built-in memory and step logging
const executor = new AgentExecutor({ agent, tools, verbose: true })
const result = await executor.invoke({ input: 'What is the weather in Paris?', chat_history: [] })

Both support multi-step tool use. LangChain's agent executor has more built-in patterns (ReAct, Plan-and-Execute). AI SDK's maxSteps is simpler for straightforward tool use.

Bundle Size and Edge Compatibility

	AI SDK	LangChain.js
Bundle size	~110kb	~800kb+
Edge deployment	✅ Works	❌ Too heavy
Cold start impact	Minimal	Significant

Decision Framework

Situation	Choose
Streaming chat UI in Next.js/React	AI SDK
useChat / useCompletion hooks needed	AI SDK
useObject — partial streaming objects	AI SDK
Edge deployment	AI SDK
RAG with document loaders	LangChain.js
Complex multi-step agents	LangChain.js
Vector store integrations	LangChain.js
Conversation memory	LangChain.js

Many production apps use both: AI SDK for the frontend streaming layer, LangChain.js for backend retrieval and agent logic.

Full article at stacknotice.com/blog/vercel-ai-sdk-vs-langchain-js-2026

DEV Community