npx create-next-app@latest my-app
cd my-app

npm install @assistant-ui/react @assistant-ui/react-ai-sdk@0.x ai@^5 @ai-sdk/openai@^1 zod

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

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

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

const chat = useChat({ api: "/api/chat" });
const runtime = useVercelUseChatRuntime(chat);