ai 6.0.315 → 6.0.317

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ai
 
+## 6.0.317
+
+### Patch Changes
+
+- Updated dependencies [90fad7b]
+  - @ai-sdk/gateway@3.0.223
+
+## 6.0.316
+
+### Patch Changes
+
+- Updated dependencies [fe96bb3]
+  - @ai-sdk/gateway@3.0.222
+
 ## 6.0.315
 
 ### Patch Changes

package/dist/index.js

@@ -1335,7 +1335,7 @@ function detectMediaType({
 var import_provider_utils3 = require("@ai-sdk/provider-utils");
 
 // src/version.ts
-var VERSION = true ? "6.0.315" : "0.0.0-test";
+var VERSION = true ? "6.0.317" : "0.0.0-test";
 
 // src/util/download/download.ts
 var download = async ({

package/dist/index.mjs

@@ -1225,7 +1225,7 @@ import {
 } from "@ai-sdk/provider-utils";
 
 // src/version.ts
-var VERSION = true ? "6.0.315" : "0.0.0-test";
+var VERSION = true ? "6.0.317" : "0.0.0-test";
 
 // src/util/download/download.ts
 var download = async ({

package/dist/internal/index.js

@@ -164,7 +164,7 @@ function detectMediaType({
 var import_provider_utils2 = require("@ai-sdk/provider-utils");
 
 // src/version.ts
-var VERSION = true ? "6.0.315" : "0.0.0-test";
+var VERSION = true ? "6.0.317" : "0.0.0-test";
 
 // src/util/download/download.ts
 var download = async ({

package/dist/internal/index.mjs

@@ -144,7 +144,7 @@ import {
 } from "@ai-sdk/provider-utils";
 
 // src/version.ts
-var VERSION = true ? "6.0.315" : "0.0.0-test";
+var VERSION = true ? "6.0.317" : "0.0.0-test";
 
 // src/util/download/download.ts
 var download = async ({

package/docs/02-getting-started/02-nextjs-app-router.mdx

@@ -27,8 +27,8 @@ Start by creating a new Next.js application. This command will create a new dire
 <div className="mb-4">
   <Note>
     Be sure to select yes when prompted to use the App Router and Tailwind CSS.
-    If you are looking for the Next.js Pages Router quickstart guide, you can
-    find it [here](/docs/getting-started/nextjs-pages-router).
+    If you are adding the AI SDK to an existing Pages Router application, follow
+    the [Pages Router guide](/docs/getting-started/nextjs-pages-router).
   </Note>
 </div>
 
@@ -293,7 +293,6 @@ In this updated code:
 
 1. You import the `tool` function from the `ai` package and `z` from `zod` for schema validation.
 2. You define a `tools` object with a `weather` tool. This tool:
-
    - Has a description that helps the model understand when to use it.
    - Defines `inputSchema` using a Zod schema, specifying that it requires a `location` string to execute this tool. The model will attempt to extract this input from the context of the conversation. If it can't, it will ask the user for the missing information.
    - Defines an `execute` function that simulates getting weather data (in this case, it returns a random temperature). This is an asynchronous function running on the server so you can fetch real data from an external API.

package/docs/02-getting-started/08-angular.mdx

@@ -0,0 +1,313 @@
+---
+title: Angular
+description: Learn how to build your first agent with the AI SDK and Angular.
+---
+
+# Angular Quickstart
+
+The AI SDK is a powerful TypeScript library designed to help developers build AI-powered applications.
+
+In this quickstart tutorial, you'll build a simple agent with a streaming chat user interface using Angular and an Express backend. Along the way, you'll learn key concepts and techniques that are fundamental to using the AI SDK in your own projects.
+
+If you are unfamiliar with the concepts of [Prompt Engineering](/docs/advanced/prompt-engineering) and [HTTP Streaming](/docs/foundations/streaming), you can optionally read these documents first.
+
+## Prerequisites
+
+To follow this quickstart, you'll need:
+
+- Node.js 24.15+ (or another [version supported by Angular](https://angular.dev/reference/versions)) and pnpm installed on your local development machine.
+- A [Vercel AI Gateway](https://vercel.com/ai-gateway) API key.
+
+If you haven't obtained your Vercel AI Gateway API key, you can do so by [signing up](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai&title=Go+to+AI+Gateway) on the Vercel website.
+
+## Set Up Your Application
+
+Create a new Angular application using the Angular CLI:
+
+<Snippet text="pnpm dlx @angular/cli@latest new my-ai-app --defaults --ssr=false --package-manager=pnpm" />
+
+This creates a standalone Angular application. This guide uses client-side rendering, with a separate Express server for the chat API.
+
+Navigate to the newly created directory:
+
+<Snippet text="cd my-ai-app" />
+
+### Install Dependencies
+
+Install `ai` and `@ai-sdk/angular`, the AI package and AI SDK's Angular bindings. You'll also install `express` for the backend, `dotenv` to load environment variables, and `zod` to define tool inputs.
+
+<InstallPackages packages="ai@^6 @ai-sdk/angular@^2 express dotenv zod" />
+
+Install the TypeScript runner and server type definitions:
+
+<InstallPackages packages="tsx @types/express @types/node" dev />
+
+<Note>
+  This guide uses the Vercel AI Gateway provider, which ships with the `ai`
+  package. You can access hundreds of models with one API key, or switch to
+  another [AI SDK provider](/providers/ai-sdk-providers).
+</Note>
+
+### Configure Your AI Gateway API Key
+
+Create a `.env` file in your project root:
+
+```env filename=".env"
+AI_GATEWAY_API_KEY=xxxxxxxxx
+```
+
+Replace `xxxxxxxxx` with your actual Vercel AI Gateway API key. The Express server loads this file using `dotenv`, and the AI SDK's Gateway provider reads `AI_GATEWAY_API_KEY` automatically. Keep the API key on the server and add `.env` to `.gitignore`.
+
+## Create an API Route
+
+Create `server.ts` in your project root and add the following code:
+
+```ts filename="server.ts"
+import { streamText, type UIMessage, convertToModelMessages } from 'ai';
+__PROVIDER_IMPORT__;
+import 'dotenv/config';
+import express from 'express';
+
+const app = express();
+app.use(express.json());
+
+app.post('/api/chat', async (req, res) => {
+  const { messages }: { messages: UIMessage[] } = req.body;
+
+  const result = streamText({
+    model: __MODEL__,
+    messages: await convertToModelMessages(messages),
+  });
+
+  await result.pipeUIMessageStreamToResponse(res);
+});
+
+app.listen(3000, '127.0.0.1', () => {
+  console.log('Chat API listening on http://127.0.0.1:3000');
+});
+```
+
+The server listens on `127.0.0.1` to keep the development API local to your machine. This creates a `POST /api/chat` endpoint. Let's take a look at what happens when it receives a request:
+
+1. `express.json()` parses the request body, which contains the conversation's `UIMessage` objects.
+2. [`convertToModelMessages`](/docs/reference/ai-sdk-ui/convert-to-model-messages) converts those UI messages to the format expected by the model.
+3. [`streamText`](/docs/reference/ai-sdk-core/stream-text) calls the model through AI Gateway.
+4. `result.pipeUIMessageStreamToResponse` converts the model's output to the UI message stream format and writes it to the Express response as server-sent events.
+
+### Configure the Development Proxy
+
+Create `proxy.conf.json` in your project root:
+
+```json filename="proxy.conf.json"
+{
+  "/api/**": {
+    "target": "http://127.0.0.1:3000"
+  }
+}
+```
+
+When you start Angular with this proxy configuration, requests to `/api/chat` are forwarded to the Express server. The browser can use the relative `/api/chat` URL, which is also the default endpoint for the AI SDK's `Chat` class.
+
+<Note>
+  This proxy is for local development. When deploying, route `/api/chat` to your
+  backend, or configure a different API URL using
+  [`DefaultChatTransport`](/docs/ai-sdk-ui/transport).
+</Note>
+
+## Choosing a Provider
+
+The AI SDK supports dozens of model providers through [first-party](/providers/ai-sdk-providers), [OpenAI-compatible](/providers/openai-compatible-providers), and [community](/providers/community-providers) packages.
+
+This quickstart uses the [Vercel AI Gateway](https://vercel.com/ai-gateway) provider, which is the default [global provider](/docs/ai-sdk-core/provider-management#global-provider-configuration). You can select a model using a string in your server's configuration:
+
+```ts
+model: __MODEL__;
+```
+
+To use a provider directly, install its package and create a provider instance. Learn more about [provider management](/docs/ai-sdk-core/provider-management#global-provider-configuration).
+
+## Wire Up the UI
+
+The `@ai-sdk/angular` package provides a `Chat` class that manages messages, streams responses, and exposes the current request status. Its state is backed by Angular signals, so the template updates as new content arrives.
+
+Replace `src/app/app.ts` with the following component:
+
+```ts filename="src/app/app.ts"
+import { JsonPipe } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { Chat } from '@ai-sdk/angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [JsonPipe],
+  template: `
+    <main>
+      @for (message of chat.messages; track message.id) {
+        <div>
+          <strong>{{ message.role === 'user' ? 'User' : 'AI' }}:</strong>
+          @for (part of message.parts; track $index) {
+            @if (part.type === 'text') {
+              <p style="white-space: pre-wrap">{{ part.text }}</p>
+            } @else if (part.type.startsWith('tool-')) {
+              <pre>{{ part | json }}</pre>
+            }
+          }
+        </div>
+      }
+
+      @if (chat.status === 'submitted') {
+        <p>Waiting for a response...</p>
+      }
+
+      @if (chat.error; as error) {
+        <p role="alert">{{ error.message }}</p>
+      }
+
+      <form (submit)="sendMessage($event)">
+        <label for="message">Your message</label>
+        <input
+          id="message"
+          #messageInput
+          [value]="input()"
+          (input)="input.set(messageInput.value)"
+        />
+        <button
+          type="submit"
+          [disabled]="
+            chat.status === 'submitted' || chat.status === 'streaming'
+          "
+        >
+          Send
+        </button>
+        @if (chat.status === 'submitted' || chat.status === 'streaming') {
+          <button type="button" (click)="chat.stop()">Stop</button>
+        }
+      </form>
+    </main>
+  `,
+})
+export class App {
+  readonly chat = new Chat({});
+  readonly input = signal('');
+
+  sendMessage(event: Event) {
+    event.preventDefault();
+    const text = this.input().trim();
+
+    if (
+      !text ||
+      this.chat.status === 'submitted' ||
+      this.chat.status === 'streaming'
+    ) {
+      return;
+    }
+
+    this.chat.sendMessage({ text });
+    this.input.set('');
+  }
+}
+```
+
+<Note>
+  Older Angular projects may name the root component file `app.component.ts` and
+  its class `AppComponent`. If you are using an existing project, keep its file
+  and class names so the imports in `src/main.ts` continue to work.
+</Note>
+
+The component creates one `Chat` instance and uses its reactive properties:
+
+- `messages` contains the conversation. Each message has a `role` and an ordered array of `parts`.
+- `sendMessage` sends a user message to `/api/chat` and streams the response into `messages`.
+- `status` indicates whether the chat is ready, submitted, streaming, or in an error state.
+- `error` contains the latest request error.
+- `stop` cancels the current response.
+
+Read these properties as `chat.messages`, `chat.status`, and `chat.error`; the `Chat` class manages the underlying signals. The input field uses a separate Angular signal, which is read with `input()`.
+
+The template renders text parts as they arrive and uses Angular's `JsonPipe` to display tool calls and results, which you'll add next.
+
+## Running Your Application
+
+In one terminal, start the Express backend from your project root:
+
+<Snippet text="pnpm exec tsx watch server.ts" />
+
+In a second terminal, start the Angular development server from the same directory:
+
+<Snippet text="pnpm exec ng serve --proxy-config proxy.conf.json" />
+
+Open [http://localhost:4200](http://localhost:4200), enter a message, and watch the response stream into the chat interface.
+
+<Note>
+  If you change `proxy.conf.json`, restart the Angular development server so it
+  picks up the new configuration.
+</Note>
+
+## Enhance Your Chatbot with Tools
+
+[Tools](/docs/ai-sdk-core/tools-and-tool-calling) let a model request actions such as looking up the weather. The server executes the action and returns the result to the model.
+
+Replace `server.ts` with the following code to add a weather tool:
+
+```ts filename="server.ts"
+import {
+  streamText,
+  type UIMessage,
+  convertToModelMessages,
+  tool,
+  stepCountIs,
+} from 'ai';
+__PROVIDER_IMPORT__;
+import 'dotenv/config';
+import express from 'express';
+import * as z4 from 'zod/v4';
+
+const app = express();
+app.use(express.json());
+
+app.post('/api/chat', async (req, res) => {
+  const { messages }: { messages: UIMessage[] } = req.body;
+
+  const result = streamText({
+    model: __MODEL__,
+    messages: await convertToModelMessages(messages),
+    stopWhen: stepCountIs(5),
+    tools: {
+      weather: tool({
+        description: 'Get the weather in a location (fahrenheit)',
+        inputSchema: z4.object({
+          location: z4.string().describe('The location to get the weather for'),
+        }),
+        execute: async ({ location }) => {
+          const temperature = Math.round(Math.random() * (90 - 32) + 32);
+          return { location, temperature };
+        },
+      }),
+    },
+  });
+
+  await result.pipeUIMessageStreamToResponse(res);
+});
+
+app.listen(3000, '127.0.0.1', () => {
+  console.log('Chat API listening on http://127.0.0.1:3000');
+});
+```
+
+The `weather` tool has a description, an input schema, and an `execute` function. The model uses the description to decide when to call the tool and the schema to generate its input. The server then executes the function and returns its result.
+
+This example returns a simulated temperature. You can replace the function with a call to a weather API to return real data.
+
+### Enabling Multi-Step Tool Calls
+
+By default, a generation stops after one step. Setting `stopWhen: stepCountIs(5)` allows the model to continue after receiving a tool result, for up to five steps. It can use the returned weather data to answer the original question.
+
+Ask "What's the weather in San Francisco?" in your chat interface. The template displays the `tool-weather` part as JSON, followed by the model's text response. No frontend changes are required: the `Chat` class already handles tool parts in the UI message stream.
+
+## Where to Go Next
+
+You've built an Angular chat interface that streams responses, calls tools, and uses their results in multi-step generations.
+
+- Explore the [Angular example](https://github.com/vercel/ai/tree/main/examples/angular) for chat, completion, and structured output examples.
+- Learn more about [AI SDK UI](/docs/ai-sdk-ui/overview) and [tools and tool calling](/docs/ai-sdk-core/tools-and-tool-calling).
+- Use the [transport API](/docs/ai-sdk-ui/transport) to connect your Angular frontend to an existing backend.

package/docs/02-getting-started/{03-nextjs-pages-router.mdx → 10-nextjs-pages-router.mdx}

@@ -1,40 +1,32 @@
 ---
 title: Next.js Pages Router
-description: Learn how to build your first agent with the AI SDK and Next.js Pages Router.
+description: Add an agent with a streaming chat interface to an existing Next.js Pages Router application.
 ---
 
-# Next.js Pages Router Quickstart
+# Next.js Pages Router Guide
 
-The AI SDK is a powerful TypeScript library designed to help developers build AI-powered applications.
+This guide shows how to add an agent with a streaming chat user interface to an existing Next.js Pages Router application.
 
-In this quickstart tutorial, you'll build a simple agent with a streaming chat user interface. Along the way, you'll learn key concepts and techniques that are fundamental to using the AI SDK in your own projects.
+<Note>
+  For new applications, we recommend the [Next.js App Router
+  quickstart](/docs/getting-started/nextjs-app-router).
+</Note>
 
 If you are unfamiliar with the concepts of [Prompt Engineering](/docs/advanced/prompt-engineering) and [HTTP Streaming](/docs/foundations/streaming), you can optionally read these documents first.
 
 ## Prerequisites
 
-To follow this quickstart, you'll need:
+To follow this guide, you'll need:
 
+- An existing Next.js 13+ application using the Pages Router.
 - Node.js 18+ and pnpm installed on your local development machine.
 - A [ Vercel AI Gateway ](https://vercel.com/ai-gateway) API key.
 
 If you haven't obtained your Vercel AI Gateway API key, you can do so by [signing up](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai&title=Go+to+AI+Gateway) on the Vercel website.
 
-## Setup Your Application
-
-Start by creating a new Next.js application. This command will create a new directory named `my-ai-app` and set up a basic Next.js application inside it.
+## Set Up Your Application
 
-<Note>
-  Be sure to select no when prompted to use the App Router. If you are looking
-  for the Next.js App Router quickstart guide, you can find it
-  [here](/docs/getting-started/nextjs-app-router).
-</Note>
-
-<Snippet text="pnpm create next-app@latest my-ai-app" />
-
-Navigate to the newly created directory:
-
-<Snippet text="cd my-ai-app" />
+Open a terminal in the root directory of your existing Next.js Pages Router application.
 
 ### Install dependencies
 
@@ -124,7 +116,7 @@ This Route Handler creates a POST request endpoint at `/api/chat`.
 
 The AI SDK supports dozens of model providers through [first-party](/providers/ai-sdk-providers), [OpenAI-compatible](/providers/openai-compatible-providers), and [ community ](/providers/community-providers) packages.
 
-This quickstart uses the [Vercel AI Gateway](https://vercel.com/ai-gateway) provider, which is the default [global provider](/docs/ai-sdk-core/provider-management#global-provider-configuration). This means you can access models using a simple string in the model configuration:
+This guide uses the [Vercel AI Gateway](https://vercel.com/ai-gateway) provider, which is the default [global provider](/docs/ai-sdk-core/provider-management#global-provider-configuration). This means you can access models using a simple string in the model configuration:
 
 ```ts
 model: __MODEL__;
@@ -288,7 +280,6 @@ In this updated code:
 
 1. You import the `tool` function from the `ai` package and `z` from `zod` for schema validation.
 2. You define a `tools` object with a `weather` tool. This tool:
-
    - Has a description that helps the model understand when to use it.
    - Defines `inputSchema` using a Zod schema, specifying that it requires a `location` string to execute this tool. The model will attempt to extract this input from the context of the conversation. If it can't, it will ask the user for the missing information.
    - Defines an `execute` function that simulates getting weather data (in this case, it returns a random temperature). This is an asynchronous function running on the server so you can fetch real data from an external API.

package/docs/02-getting-started/index.mdx

@@ -9,6 +9,8 @@ The following guides are intended to provide you with an introduction to some of
 
 <QuickstartFrameworkCards />
 
+[Using an existing Next.js Pages Router app?](/docs/getting-started/nextjs-pages-router)
+
 ## Backend Framework Examples
 
 You can also use [AI SDK Core](/docs/ai-sdk-core/overview) and [AI SDK UI](/docs/ai-sdk-ui/overview) with the following backend frameworks:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai",
-  "version": "6.0.315",
+  "version": "6.0.317",
   "description": "AI SDK by Vercel - build apps like ChatGPT, Claude, Gemini, and more with a single interface for any model using the Vercel AI Gateway or go direct to OpenAI, Anthropic, Google, or any other model provider.",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",
-    "@ai-sdk/gateway": "3.0.221",
+    "@ai-sdk/gateway": "3.0.223",
     "@ai-sdk/provider": "3.0.19",
     "@ai-sdk/provider-utils": "4.0.62"
   },
@@ -58,7 +58,7 @@
     "tsx": "^4.19.2",
     "typescript": "5.8.3",
     "zod": "3.25.76",
-    "@ai-sdk/google": "3.0.138",
+    "@ai-sdk/google": "3.0.139",
     "@ai-sdk/test-server": "1.0.6",
     "@vercel/ai-tsconfig": "0.0.0"
   },