Kenhuang Academy
  • English

      • Vercel AI SDK Tutorial

      Welcome to the Vercel AI SDK tutorial. It follows the official AI SDK docs (7.x) so you can wire LLMs into Next.js, React, and Node.js: streaming chat, tool calling, structured output, and (experimental) generative UI.

      The SDK standardizes vendor APIs. The default global provider is Vercel AI Gateway (one AI_GATEWAY_API_KEY, then model strings). You can also install @ai-sdk/openai and talk to OpenAI directly. This tutorial uses openai/gpt-4.1-mini as the Gateway-style default. Model IDs change—always check the official docs and your provider console.

      Table of contents

      Basics

      1. Introduction — Positioning, three surfaces, vs LangChain
      2. Installation — Node 22+, pnpm, env vars, ESM
      3. Quick start — generateText and your first streaming chat

      Development

      1. useChat — @ai-sdk/react, parts, sendMessage, status
      2. Streaming — streamText, UI Message Stream, text streams
      3. Tools — tool(), Zod, stopWhen, multi-step loops
      4. RSC and streamUI — Experimental generative UI and Server Actions

      Integration

      1. Providers — Gateway vs direct, OpenAI-compatible, Ollama
      2. Next.js — App Router route handlers, maxDuration, deploy

      Practice

      1. Practical examples — Chat, multi-tool assistant, structured extract
      2. Resources — Official docs and related courses on this site

      Learning path

      StageGoalChapters
      Day 1Streaming chat worksIntro → Install → Quick start
      Days 2–3Chat UI and streamsuseChat → Streaming
      Week 1Tools and modelsTools → Providers → Next.js
      Week 2Ship and extrasExamples → RSC (optional)

      Prerequisites

      • TypeScript basics (import, types, async/await)
      • React components and hooks; chat pages need 'use client'
      • Next.js App Router (app/api/.../route.ts)
      • Node.js 22+ and pnpm (official quickstart)

      Three surfaces (mental model)

      SurfacePackageWhat you use it for
      AI SDK CoreaigenerateText / streamText, tools, structured output
      AI SDK UI@ai-sdk/react and friendsHooks such as useChat that attach streams to the UI
      HarnessAgent@ai-sdk/harness/*Run existing agent harnesses (Claude Code, Codex, …)—covered briefly here

      AI SDK RSC (streamUI in @ai-sdk/rsc) is still experimental. Prefer AI SDK UI in production.

      TutorialHow it relates
      Next.jsApp Router, route handlers, env vars
      ReactClient components, useState, the hooks useChat sits on
      TypeScriptTypes and Zod schemas
      OllamaLocal models; OpenAI-compatible baseURL into the AI SDK
      LangChainPython agents / RAG; this course is the TypeScript full-stack path

      What you will be able to do

      • Call generateText once via a Gateway string and once via @ai-sdk/openai
      • Build realtime chat in Next.js with streamText + useChat
      • Define Zod tools and run multi-step calls with isStepCount
      • Point @ai-sdk/openai-compatible at Ollama /v1

      Canonical sources: sdk.vercel.ai/docs, ai-sdk.dev/llms.txt. This tutorial does not invent undocumented APIs.

      Next

      评论