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

Install @assistant-ui/react-data-stream alongside assistant-ui and AI SDK v4:

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

Setup your backend route#

Create an API route that uses AI SDK v4's streaming capabilities:

@/app/api/chat/route.ts

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 useDataStreamRuntime in your component#

@/app/page.tsx

"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>
  );
}

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:

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

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

"use client";

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

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

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

1. Replace @assistant-ui/react-data-stream with @assistant-ui/react-ai-sdk
2. Update your backend to use AI SDK v6'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 v6 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 v6 integration.