SKILL PROCEDURE

AI SDK

Vercel AI SDK — provider-agnostic TypeScript toolkit for building streaming AI applications and agents. Use when generating or streaming text with LLMs, wiring model providers (OpenAI, Anthropic, Google), implementing tool calling, producing structured output with Zod, building chat UIs with useChat, or composing multi-step agents with ToolLoopAgent.

aillmstreamingtool-callingtypescript
BEGINNER GUIDE

Understand AI SDK before using it

WHAT IT COVERS

Vercel AI SDK — provider-agnostic TypeScript toolkit for building streaming AI applications and agents. Use when generating or streaming text with LLMs, wiring model providers (OpenAI, Anthropic, Google), implementing tool calling, producing structured output with Zod, building chat UIs with useChat, or composing multi-step agents with ToolLoopAgent.

START HERE WHEN

Your work repeatedly involves one or more of these concepts. Open the full procedure below when the current task matches them.

aillmstreamingtool-callingtypescript

Compare related skills

SKILLCATEGORYSHARED CONCEPTSEXPLANATION
AI SDKAI and agentsCurrent skillVercel AI SDK — provider-agnostic TypeScript toolkit for building streaming AI applications and agents. Use when generating or streaming text with LLMs, wiring model providers (OpenAI, Anthropic, Google), implementing tool calling, producing structured output with Zod, building chat UIs with useChat, or composing multi-step agents with ToolLoopAgent.
Assistant UIAI and agents
aistreaming
assistant-ui — React components for building AI chat interfaces. Use when building a chat UI (thread list, message composer, markdown rendering, tool-call parts, streaming), wiring it to a model runtime (Vercel AI SDK, LangChain, custom), using the CLI to scaffold and add components, adapting a shadcn/Radix/Base UI style, or running it on web, React Native, or the terminal.
OllamaAI and agents
llm
Ollama — run open large language models locally or through Ollama Cloud, via a CLI and an OpenAI-compatible REST API. Use when running models like Gemma, Qwen, GLM, Kimi, or Llama on your own hardware, building a Modelfile, calling the /api/generate and /api/chat endpoints, using Ollama as a drop-in OpenAI replacement at /v1, pointing a library at OLLAMA_HOST, or choosing between a local server and Ollama Cloud.
AngularWeb frameworks
typescript
Angular — Google's component-based web application framework for building client, mobile, and desktop apps with TypeScript. Use when building or upgrading Angular apps — components, templates and bindings, signals and computed state, dependency injection, RxJS interop, routing, forms, standalone components, zoneless change detection, or migrating from NgModules and the legacy module-based model.

Vercel AI SDK

The AI SDK is a provider-agnostic TypeScript toolkit for building AI-powered applications and agents. It runs on React, Next.js, Vue, Svelte, Node.js, and other JavaScript runtimes. A model call stays the same shape whether the provider is OpenAI, Anthropic, Google, Mistral, or a custom one.

Mental model

Two layers, kept deliberately separate:

| Layer | Package | What it does | | --------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | AI SDK Core | ai | Server-side model calls: generateText, streamText, generateObject, streamObject, tools, embeddings, providers. | | AI SDK UI | @ai-sdk/react, @ai-sdk/svelte, @ai-sdk/vue | Framework hooks for chat and generative UI: useChat, useCompletion, useObject. |

A provider package (@ai-sdk/openai, @ai-sdk/anthropic, …) plugs a vendor's models into Core. UI talks to a route handler that calls Core; it never imports a provider directly.

Resolving versions

Resolve the current SDK and model versions from the registry rather than recalling one. Training-data versions are reliably wrong.

npm view ai version          # Core
npm view @ai-sdk/react version
npm view @ai-sdk/openai version

The major version of ai and the provider/adapter packages move together on a release. When upgrading, bump ai, the provider packages, and the UI adapter as a set — a mixed set is the most common source of breakage.

Core calls

import { generateText, streamText } from "ai";
import { openai } from "@ai-sdk/openai";

// One-shot
const { text } = await generateText({
  model: openai("gpt-4o"),
  prompt: "Summarise the AI SDK in one sentence.",
});

// Streaming
const result = streamText({
  model: openai("gpt-4o"),
  prompt: "Tell me a story.",
});
for await (const delta of result.textStream) {
  process.stdout.write(delta);
}

Structured output

Constrain output to a schema with generateObject / streamObject and a Zod definition:

import { generateObject } from "ai";
import { z } from "zod";

const { object } = await generateObject({
  model: openai("gpt-4o"),
  schema: z.object({
    name: z.string(),
    rating: z.number().min(0).max(10),
  }),
  prompt: "Describe the AI SDK.",
});

Tool calling

Define tools with tool and a Zod parameters schema; the model decides when to call them and you return a result it consumes:

import { generateText, tool } from "ai";
import { z } from "zod";

const { text } = await generateText({
  model: openai("gpt-4o"),
  tools: {
    weather: tool({
      description: "Get the weather for a city",
      parameters: z.object({ city: z.string() }),
      execute: async ({ city }) => fetchWeather(city),
    }),
  },
  maxSteps: 5, // lets the model call a tool and use the result
  prompt: "What is the weather in Hanoi?",
});

maxSteps (previously maxToolRoundtrips) enables multi-step loops where the model calls a tool, reads the result, and continues.

Chat UI

useChat from @ai-sdk/react connects a React component to a route handler that streams Core output. Use DefaultChatTransport to point it at your endpoint:

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";

const { messages, sendMessage, status } = useChat({
  transport: new DefaultChatTransport({ api: "/api/chat" }),
});

Messages are UIMessage objects made of typed parts (TextUIPart, ToolUIPart, FileUIPart, …) — render by part type rather than treating message.content as a plain string.

Agents

ToolLoopAgent runs a model that can call tools across multiple steps with stop conditions, human-in-the-loop approval, and an MCP client for external tool servers. Reach for it when a single maxSteps loop is not enough — you need guarded execution, sub-agents, or dynamic tool selection.

Error handling

Catch provider errors by type rather than sniffing strings:

  • APICallError — the provider rejected the request (auth, quota, bad input).
  • NoSuchToolError — the model returned a tool you did not define.
  • UIMessageStreamError — a UI stream surfaced an error part.

Current vs deprecated

  • Use maxSteps for multi-step tool calls; maxToolRoundtrips is the old name.
  • UI messages are part-based (UIMessage); the legacy string content model is gone in v4+.
  • Prefer streamText over manual chunked generation; prefer generateObject over prompt-engineering JSON.

References

Hardgraph / curated knowledge for agents.

STATIC EXPORT · CANONICAL SOURCE