import { VercelIcon } from "@/components/icons/vercel";
AI SDK v5 is a legacy version. New projects should use [AI SDK v7](/docs/runtimes/ai-sdk/v7). v5 users pin `@assistant-ui/react-ai-sdk@1.1.21` (the last v5-compatible release); later releases target newer AI SDK majors.Why legacy#
AI SDK v6 made convertToModelMessages async and moved @ai-sdk/react to a new major. v5 still works but no longer receives new features in @assistant-ui/react-ai-sdk. Pinning to 1.1.21 keeps you on the v5-compatible surface.
This page is reference for existing v5 projects. Plan to migrate to v7 when feasible.
Setup#
Install v5-compatible versions#
<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk@1.1.21", "ai@^5", "@ai-sdk/openai@^2", "zod"]} />
Backend route#
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages, tool } from "ai";
import type { UIMessage } from "ai";
import { z } from "zod";
export const maxDuration = 30;
export async function POST(req: Request) {
const { messages }: { messages: UIMessage[] } = await req.json();
const aiSDKTools = {
get_current_weather: tool({
description: "Get the current weather",
inputSchema: z.object({ city: z.string() }),
execute: async ({ city }) => `The weather in ${city} is sunny`,
}),
};
const result = streamText({
abortSignal: req.signal,
model: openai.responses("gpt-6-luna"),
messages: convertToModelMessages(messages, { tools: aiSDKTools }),
tools: aiSDKTools,
});
return result.toUIMessageStreamResponse();
}
Frontend#
"use client";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
export default function Home() {
const runtime = useChatRuntime();
return (
<AssistantRuntimeProvider runtime={runtime}>
<div className="h-full">
<Thread />
</div>
</AssistantRuntimeProvider>
);
}
import { useChat } from "@ai-sdk/react";
import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
const chat = useChat();
const runtime = useAISDKRuntime(chat);
Differences from v6#
| Feature | v5 | v6 |
|---|---|---|
ai package | ai@^5 | ai@^6 |
@assistant-ui/react-ai-sdk | @1.1.21 | @1.3.40 |
@ai-sdk/react | ^2 | ^3 |
@ai-sdk/openai | ^2 | ^3 |
convertToModelMessages | Sync | Async (await) |
Migration to v6#
When you are ready to upgrade:
- Update
aifrom@^5to@^6,@ai-sdk/openaifrom@^2to@^3, and@assistant-ui/react-ai-sdkto1.3.40, the last v6-compatible release. If you install@ai-sdk/reactdirectly, update it to@^3. - Add
awaittoconvertToModelMessages(...)calls.
AI SDK provides codemods at ai-sdk.dev/docs/migration-guides/migration-guide-6-0 that handle most of the package-side rewrites.