Stopping Streams

Canceling ongoing streams is often needed. For example, users might want to stop a stream when they realize that the response is not what they want.

The different parts of the AI SDK support canceling streams in different ways.

AI SDK Core

The AI SDK functions have an abortSignal argument that you can use to cancel a stream. You would use this if you want to cancel a stream from the server side to the LLM API, e.g. by forwarding the abortSignal from the request.

GatewayProviderCustom

Claude Sonnet 5.5

import { createTextStreamResponse, streamText, toTextStream } from 'ai';

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = streamText({
    model: "anthropic/claude-sonnet-5.5",
    prompt,
    // forward the abort signal:
    abortSignal: req.signal,
    onAbort: ({ steps }) => {
      // Handle cleanup when stream is aborted
      console.log('Stream aborted after', steps.length, 'steps');
      // Persist partial results to database
    },
  });

  return createTextStreamResponse({
    stream: toTextStream({ stream: result.stream }),
  });
}

AI SDK UI

The hooks, e.g. useChat or useCompletion, provide a stop helper function that can be used to cancel a stream. This aborts the HTTP request from the client. To also stop the model request on the server, your server runtime must propagate the client disconnect to the request's AbortSignal, and your route must forward that signal to the AI SDK Core call as shown above.

'use client';

import { useCompletion } from '@ai-sdk/react';

export default function Chat() {
  const { input, completion, stop, status, handleSubmit, handleInputChange } =
    useCompletion();

  return (
    <div>
      {(status === 'submitted' || status === 'streaming') && (
        <button type="button" onClick={() => stop()}>
          Stop
        </button>
      )}
      {completion}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}

Vercel

On Vercel, request cancellation is only supported in the Node.js runtime and must be enabled for each function that needs it. Add supportsCancellation to the function's configuration in vercel.json:

{
  "functions": {
    "app/api/chat/route.ts": {
      "supportsCancellation": true
    }
  }
}

With cancellation enabled, calling stop() aborts the client request, Vercel aborts req.signal, and forwarding req.signal as abortSignal cancels the model request.

Handling stream abort cleanup

When streams are aborted, you may need to perform cleanup operations such as persisting partial results or cleaning up resources. The onAbort callback provides a way to handle these scenarios on the server side.

Unlike onEnd, which is called when a stream completes normally, onAbort is specifically called when a stream is aborted via AbortSignal. This distinction allows you to handle normal completion and aborted streams differently.

GatewayProviderCustom

Claude Sonnet 5.5

import { streamText } from 'ai';

const result = streamText({
  model: "anthropic/claude-sonnet-5.5",
  prompt: 'Write a long story...',
  abortSignal: controller.signal,
  onAbort: async ({ steps }) => {
    // Called when stream is aborted - persist partial results
    await savePartialResults(steps);
    await logAbortEvent(steps.length);
  },
  onEnd: async ({ steps, totalUsage }) => {
    // Called when stream completes normally
    await saveFinalResults(steps, totalUsage);
  },
});

The onAbort callback receives:

• steps: Array of all completed steps before the abort occurred

This is particularly useful for:

• Persisting partial conversation history to database
• Saving partial progress for later continuation
• Cleaning up server-side resources or connections
• Logging abort events for analytics

You can also handle abort events directly in the stream using the abort stream part:

for await (const part of result.stream) {
  switch (part.type) {
    case 'text-delta':
      // Handle text delta content
      break;
    case 'abort':
      // Handle abort event directly in stream
      console.log('Stream was aborted');
      break;
    // ... other cases
  }
}

UI Message Streams

When using toUIMessageStream, you need to handle stream abortion slightly differently. The onEnd callback receives an isAborted parameter, and you should pass consumeStream to createUIMessageStreamResponse to ensure proper abort handling:

GatewayProviderCustom

Claude Sonnet 5.5

import { openai } from '@ai-sdk/openai';
import {
  consumeStream,
  convertToModelMessages,
  createUIMessageStreamResponse,
  streamText,
  toUIMessageStream,
  UIMessage,
} from 'ai';

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: "anthropic/claude-sonnet-5.5",
    messages: await convertToModelMessages(messages),
    abortSignal: req.signal,
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({
      stream: result.stream,
      onEnd: async ({ isAborted }) => {
        if (isAborted) {
          console.log('Stream was aborted');
          // Handle abort-specific cleanup
        } else {
          console.log('Stream completed normally');
          // Handle normal completion
        }
      },
    }),
    consumeSseStream: consumeStream,
  });
}

The consumeStream function is necessary for proper abort handling in UI message streams. It ensures that the stream is properly consumed even when aborted, preventing potential memory leaks or hanging connections.

The onEnd callback distinguishes consumer cancellation from an observed abort. When the consumer cancels the UI message stream before an outcome is declared, such as during a client disconnect, isCancelled is true, outcome.status remains 'unknown', and isAborted remains false. When the stream observes an abort part first, outcome.status is 'aborted', isAborted is true, and isCancelled is absent. Check both flags when the same cleanup should run for either case.

AI SDK RSC