#Introduction to the AI SDK

#What is the AI SDK?

The Vercel AI SDK is a TypeScript toolkit for wiring LLMs into React, Next.js, Vue, Svelte, Node.js, and more. It is not “another Python agent framework”. The job is unified model calls + streaming protocols + UI hooks, so you spend time on the product instead of each vendor’s HTTP quirks.

Docs live at sdk.vercel.ai/docs (same site as ai-sdk.dev). This tutorial tracks AI SDK 7.x.

#Why it exists

OpenAI, Anthropic, and xAI disagree on request bodies, stream chunks, and tool-call shapes. AI SDK Core hides that behind a language model spec: the same generateText / streamText APIs, and you mostly change model.

In 7.x the default global provider is Vercel AI Gateway. You can pass strings such as "openai/gpt-4.1-mini" or "xai/grok-4.6" (provider/model) without importing a vendor package. The official App Router quickstart currently demos xai/grok-4.6. Model IDs change. This tutorial uses the more stable-looking Gateway string openai/gpt-4.1-mini—swap it for whatever your account actually exposes.

#Three surfaces

┌─────────────────────────────────────────────────────────────┐
│                      AI SDK 7.x                              │
└─────────────────────────────────────────────────────────────┘
   ┌──────────────┐   ┌──────────────┐   ┌──────────────┐
   │  Core        │   │  UI          │   │  Harnesses   │
   │  generateText│   │  useChat     │   │  HarnessAgent│
   │  streamText  │   │  useObject   │   │  Claude/Codex│
   └──────────────┘   └──────────────┘   └──────────────┘
         ▲                    ▲                    │
         └──── shared stream / UIMessage primitives ┘

HarnessAgent (brief): it implements the SDK Agent interface and delegates to Claude Code, Codex, Pi, and similar harnesses. Conversation state lives inside the harness. Do not replay the full UI messages array the way you would for streamText. Persist and resume a HarnessAgentSession on HTTP routes. The rest of this tutorial focuses on Core + UI. Read HarnessAgent when you need a coding agent.

AI SDK RSC (streamUI in @ai-sdk/rsc) streams React Server Components from the model. Official docs mark it experimental; prefer AI SDK UI in production. See RSC and streamUI.

#Two Core functions you will use constantly

Both accept messages, instructions (system prompt), tools, and output. For useChat, pass result.stream through toUIMessageStream and createUIMessageStreamResponse.

#Versus LangChain

Pick AI SDK for Next.js / React products with streaming chat and tools. Pick LangChain for Python agents, graphs, and eval. They can coexist: Python retrieves, Next.js talks with the AI SDK.

#Good fit / poor fit

Good fit: App Router chatbots, tool-using assistants, switching Gateway / OpenAI / Anthropic with the same Core calls, attaching streams to an existing React layout.

Be careful: a single non-streaming HTTP call may not need a framework; never put API keys in the browser; do not treat RSC streamUI as the production default.

#7.x reading rules

• Node 22+, ESM only ("type": "module" or .mjs)—no require('ai')
• Chat messages are UIMessage + parts; do not rely on a legacy content string
• System text is instructions (older posts still say system)
• toDataStreamResponse is gone; use createUIMessageStreamResponse + toUIMessageStream

#Next

• Installation
• Quick start
• Providers