Vercel AI SDK Free code examples in JavaScript

NODE 22 AND ESM ONLY. v7 dropped CommonJS entry points, so a project with `require()` needs that sorted before anything else here will run.

node --version     # must be >= 22

npm install ai @ai-sdk/openai @ai-sdk/react zod

export OPENAI_API_KEY="sk-your-key"

IT IS `instructions`, NOT `system`. That rename is the single most common reason a copied v5 snippet silently ignores its system prompt — the field is simply not read.

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

const { text } = await generateText({
  model: openai("gpt-5.4-mini"),
  instructions: "You are a concise technical assistant.",  // was `system`
  prompt: "Explain a database index in two sentences.",
});

console.log(text);

const result = streamText({
  model: openai("gpt-5.4-mini"),
  instructions: "You are a concise technical assistant.",
  prompt: "Explain B-trees in 200 words.",
});

for await (const delta of result.textStream) {
  process.stdout.write(delta);
}

generateObject is deprecated. The replacement is an `output` setting on generateText, which keeps one function for text, tools and schemas rather than three that drift apart.

import { generateText, Output } from "ai";
import * as z from "zod";

const { output } = await generateText({
  model: openai("gpt-5.4-mini"),
  prompt: "Summarise this ticket: the pump stalled with code E-4471.",
  output: Output.object({
    schema: z.object({
      summary: z.string(),
      errorCode: z.string().nullable(),
      severity: z.enum(["low", "medium", "high"]),
    }),
  }),
});

console.log(output.severity, output.errorCode);

toUIMessageStreamResponse() — `toDataStreamResponse` is gone. And convertToModelMessages IS ASYNC now: forgetting the await hands the model a Promise and produces an unhelpful validation error.

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages } from "ai";

export async function POST(request) {
  const { messages } = await request.json();

  const result = streamText({
    model: openai("gpt-5.4-mini"),
    instructions: "You are a concise technical assistant.",
    // await — this became async in v6 and stayed that way.
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

useChat did not change across v6 or v7, because the wire protocol did not. Messages arrive as typed PARTS — text, tool calls, reasoning — so rendering a tool call is a branch rather than a parser.

"use client";

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

export default function Chat() {
  const { messages, sendMessage, status } = useChat();

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <b>{message.role}</b>
          {message.parts.map((part, index) =>
            part.type === "text" ? (
              <span key={index}>{part.text}</span>
            ) : (
              // Tool calls and reasoning arrive as their own parts,
              // already structured. Nothing here parses a string.
              <pre key={index}>{part.type}</pre>
            ),
          )}
        </div>
      ))}

      <button
        disabled={status !== "ready"}
        onClick={() => sendMessage({ text: "How many X-17 are in stock?" })}
      >
        Ask
      </button>
    </div>
  );
}