# AI SDK v5 (Legacy)
URL: /docs/runtimes/ai-sdk/v5-legacy

Integrate Vercel AI SDK v5 with useChatRuntime for streaming chat.

<Callout type="error">
  AI SDK v5 is no longer supported. The `@assistant-ui/react-ai-sdk` package now requires AI SDK v6+.
  Please upgrade to [AI SDK v6](/docs/runtimes/ai-sdk/v6).
</Callout>

Overview \[#overview]

This documentation is preserved for reference. For new projects, use [AI SDK v6](/docs/runtimes/ai-sdk/v6).

Getting Started \[#getting-started]

<Steps>
  <Step>
    Create a Next.js project \[#create-a-nextjs-project]

    ```sh
    npx create-next-app@latest my-app
    cd my-app
    ```
  </Step>

  <Step>
    Install AI SDK v5 and `@assistant-ui/react` \[#install-ai-sdk-v5-and-assistant-uireact]

    ```sh
    npm install @assistant-ui/react @assistant-ui/react-ai-sdk@0.x ai@^5 @ai-sdk/openai@^1 zod
    ```
  </Step>

  <Step>
    Setup a backend route under `/api/chat` \[#setup-a-backend-route-under-apichat]

    `@/app/api/chat/route.ts`

    ```tsx
    import { openai } from "@ai-sdk/openai";
    import { streamText, tool } from "ai";
    import type { Message } from "ai";
    import { z } from "zod";

    export const maxDuration = 30;

    export async function POST(req: Request) {
      const { messages }: { messages: Message[] } = await req.json();

      const result = streamText({
        model: openai("gpt-4o"),
        messages,
        tools: {
          get_current_weather: tool({
            description: "Get the current weather",
            parameters: z.object({
              city: z.string(),
            }),
            execute: async ({ city }) => {
              return `The weather in ${city} is sunny`;
            },
          }),
        },
      });

      return result.toDataStreamResponse();
    }
    ```
  </Step>

  <Step>
    Setup the frontend \[#setup-the-frontend]

    `@/app/page.tsx`

    ```tsx
    "use client";

    import { Thread } from "@/components/assistant-ui/thread";
    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>
      );
    }
    ```

    <Callout type="info">
      `useChatRuntime` was introduced in `@assistant-ui/react-ai-sdk@0.11.3`. If you're using an older 0.x version, use `useVercelUseChatRuntime` with `useChat` from `ai/react` instead:

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

      const chat = useChat({ api: "/api/chat" });
      const runtime = useVercelUseChatRuntime(chat);
      ```
    </Callout>
  </Step>
</Steps>

Key Differences from v6 \[#key-differences-from-v6]

| Feature                        | v5                            | v6                                        |
| ------------------------------ | ----------------------------- | ----------------------------------------- |
| **ai package**                 | `ai@^5`                       | `ai@^6`                                   |
| **@assistant-ui/react-ai-sdk** | `@0.x`                        | `@latest`                                 |
| **@ai-sdk/openai**             | `@ai-sdk/openai@^1`           | `@ai-sdk/openai@^3`                       |
| **Message type**               | `Message`                     | `UIMessage`                               |
| **convertToModelMessages**     | Sync                          | Async (`await`)                           |
| **Tool schema**                | `parameters: z.object({...})` | `inputSchema: zodSchema(z.object({...}))` |
| **Response**                   | `toDataStreamResponse()`      | `toUIMessageStreamResponse()`             |

Migration to v6 \[#migration-to-v6]

See the [AI SDK v6 documentation](/docs/runtimes/ai-sdk/v6) for the latest integration guide.