AI SDK v4 (legacy)

Why legacy

Vercel ships AI SDK majors roughly yearly; v4 is three majors behind v7. The current @assistant-ui/ai-sdk package targets the current AI SDK major (v7) exclusively, so v4 users plug into @assistant-ui/react-data-stream instead. It consumes the same data stream protocol that v4's toDataStreamResponse() emits.

This page is reference for existing v4 projects. Plan to migrate to v7 when feasible.

Setup

npm install @assistant-ui/react @assistant-ui/react-data-stream ai@^4

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

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    abortSignal: req.signal,
    model: openai("gpt-6-luna"),
    messages,
  });
  return result.toDataStreamResponse();
}

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export default function Home() {
  const runtime = useDataStreamRuntime({ api: "/api/chat" });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="h-full">
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
}

useDataStreamRuntime accepts api, initialMessages, onFinish, onError, headers, body, and the standard LocalRuntimeOptions. For the full reference, see Data Stream Protocol.

Differences from v6

Migration to v7

When you are ready to upgrade:

1. Swap @assistant-ui/react-data-stream for @assistant-ui/ai-sdk.
2. Update your backend to the current AI SDK's streamText (see v7 docs).
3. Switch the runtime hook from useDataStreamRuntime to useChatRuntime.

AI SDK provides codemods at ai-sdk.dev/docs/migration-guides that handle the package-side rewrites.

Alternative: react-ai-sdk@0.10.16

An older release line of @assistant-ui/react-ai-sdk supported AI SDK v4 directly; its last release was 0.10.16. It is no longer maintained and has no upgrade path; if you are starting a new v4 project, use @assistant-ui/react-data-stream instead.

Related