import { VercelIcon } from "@/components/icons/vercel";

Why legacy#

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

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

Setup#

Install#

<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-data-stream", "ai@^4"]} />

Backend route#

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

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

Frontend#

"use client";

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

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 v6#

When you are ready to upgrade:

1. Swap @assistant-ui/react-data-stream for @assistant-ui/react-ai-sdk.
2. Update your backend to AI SDK v6's streamText (see v6 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.1.10#

An older release line of @assistant-ui/react-ai-sdk (0.1.10) supported AI SDK v4 directly. 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#