Vercel AI SDK Basics

pnpm create next-app@latest my-ai-app
cd my-ai-app
pnpm add ai @ai-sdk/react zod
# optional direct provider package:
# pnpm add @ai-sdk/openai

# .env.local (names vary by provider - verify at build)
AI_GATEWAY_API_KEY=...
# or OPENAI_API_KEY=... / OPENROUTER_API_KEY=...

import {
  streamText,
  convertToModelMessages,
  type UIMessage,
} from "ai";
 
export const maxDuration = 30;
 
export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();
 
  const result = streamText({
    model: "openai/gpt-4o-mini", // gateway string or provider model - verify at build
    messages: await convertToModelMessages(messages),
    instructions: "You are a concise product assistant.",
  });
 
  return result.toUIMessageStreamResponse();
}

"use client";
 
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { useState } from "react";
 
export default function ChatPage() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });
 
  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}: </strong>
          {message.parts.map((part, i) =>
            part.type === "text" ? <span key={i}>{part.text}</span> : null,
          )}
        </div>
      ))}
 
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim()) return;
          sendMessage({ text: input });
          setInput("");
        }}
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={status !== "ready"}
          placeholder="Say something..."
        />
        <button type="submit" disabled={status !== "ready"}>
          Send
        </button>
      </form>
    </div>
  );
}

const { messages, sendMessage, status, stop, error, regenerate } = useChat({
  transport: new DefaultChatTransport({ api: "/api/chat" }),
});
 
// In JSX:
{(status === "submitted" || status === "streaming") && (
  <button type="button" onClick={() => stop()}>
    Stop
  </button>
)}
{error && (
  <button type="button" onClick={() => regenerate()}>
    Retry
  </button>
)}

import { streamText, tool, convertToModelMessages, isStepCount } from "ai";
import { z } from "zod";
 
const result = streamText({
  model: "openai/gpt-4o-mini",
  messages: await convertToModelMessages(messages),
  stopWhen: isStepCount(5),
  tools: {
    getWeather: tool({
      description: "Get a weather summary for a city",
      inputSchema: z.object({
        city: z.string().describe("City name"),
      }),
      execute: async ({ city }) => ({
        city,
        summary: "sunny",
        tempC: 22,
      }),
    }),
  },
});

{message.parts.map((part, i) => {
  if (part.type === "text") return <span key={i}>{part.text}</span>;
  if (part.type === "tool-getWeather") {
    if (part.state === "input-available") return <div key={i}>Loading weather…</div>;
    if (part.state === "output-available") {
      return (
        <pre key={i}>{JSON.stringify(part.output, null, 2)}</pre>
      );
    }
  }
  return null;
})}

import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages } from "ai";
 
const result = streamText({
  model: openai("gpt-4o-mini"),
  instructions:
    "Answer in short bullets. If you lack data, say you do not know.",
  messages: await convertToModelMessages(messages),
});

export const runtime = "edge";
export const maxDuration = 30;
 
// same streamText handler body as example 1

const { messages, sendMessage } = useChat({
  transport: new DefaultChatTransport({
    api: "/api/chat",
    headers: {
      // Prefer cookie sessions; tokens only if your auth design requires them
      "X-Request-Source": "web-chat",
    },
  }),
});