AI SDK v4 (Legacy)

Overview

If you're using AI SDK v4 (legacy), you can integrate with assistant-ui using the @assistant-ui/react-data-stream package and its useDataStreamRuntime hook. This provides a compatible runtime that works with AI SDK v4's streaming responses.

Getting Started

Option 1: Using @assistant-ui/react-data-stream (Recommended)

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({
    model: openai("gpt-4"),
    messages,
  });

  return result.toDataStreamResponse();
}

"use client";

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

export default function Home() {
  const runtime = useDataStreamRuntime({
    api: "/api/chat",
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="h-full">
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
}

Option 2: Using @assistant-ui/react-ai-sdk v0.1.10 (Legacy)

Alternatively, you can use the older version of the AI SDK integration package, though this version is no longer actively maintained:

npm install @assistant-ui/react @assistant-ui/[email protected] ai@^4

With this legacy version, you would use the useVercelUseChatRuntime hook:

"use client";

import { useChat } from "ai/react";
import { Thread } from "@assistant-ui/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";

export default function Home() {
  const chat = useChat({
    api: "/api/chat",
  });
  const runtime = useVercelUseChatRuntime(chat);

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <div className="h-full">
        <Thread />
      </div>
    </AssistantRuntimeProvider>
  );
}

API Reference

useDataStreamRuntime

The useDataStreamRuntime hook creates a runtime compatible with assistant-ui from AI SDK v4's streaming responses.

import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";

const runtime = useDataStreamRuntime({
  api: "/api/chat",
  // Options similar to AI SDK v4's useChat
  initialMessages: [],
  onFinish: (message) => {
    console.log("Message completed:", message);
  },
  onError: (error) => {
    console.error("Chat error:", error);
  },
});

Options

The useDataStreamRuntime hook accepts options similar to AI SDK v4's useChat hook:

• api: The API endpoint for chat requests (required)
• initialMessages: Initial messages to populate the chat
• onFinish: Callback when a message completes streaming
• onError: Callback for handling errors
• headers: Additional headers to send with requests
• body: Additional body parameters to send with requests

Migration to AI SDK v5

When you're ready to upgrade to AI SDK v5:

1. Replace @assistant-ui/react-data-stream with @assistant-ui/react-ai-sdk
2. Update your backend to use AI SDK v5's streamText API
3. Switch from useDataStreamRuntime to useChatRuntime
4. Take advantage of improved TypeScript support and automatic system/tool forwarding

See our AI SDK v5 documentation for the complete migration guide.

Example

For a working example with AI SDK v4, you can adapt the patterns from our AI SDK examples using the @assistant-ui/react-data-stream package instead of the v5 integration.