useChat Runtime
Integration with the Vercel AI SDK UI's useChat hook.
npx create-next-app@latest my-app cd my-app npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai @/app/api/chat/route.ts
import { openai } from "@ai-sdk/openai" ; import { streamText } from "ai" ;
export const maxDuration = 30 ;
export async function POST ( req : Request ) { const { messages } = await req. json ();
const result = await streamText ({ model: openai ( "gpt-4o" ), messages: convertToCoreMessages (messages), });
return result. toAIStreamResponse (); } @/app/MyRuntimeProvider.tsx
"use client" ;
import { useChat } from "ai/react" ; import { AssistantRuntimeProvider } from "@assistant-ui/react" ; import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk" ;
export function MyRuntimeProvider ({ children , } : Readonly <{ children : React . ReactNode ; }>) { const chat = useChat ({ api: "/api/chat" , });
const runtime = useVercelUseChatRuntime (chat);
return ( < AssistantRuntimeProvider runtime = {runtime}> {children} </ AssistantRuntimeProvider > ); } @/app/layout.tsx
import { MyRuntimeProvider } from '@/app/MyRuntimeProvider' ;
...
export default function RootLayout ({ children , } : Readonly <{ children : React . ReactNode ; }>) { return ( < MyRuntimeProvider > < html lang = "en" > < body className = {inter.className}> {children} </ body > </ html > </ MyRuntimeProvider > ) } 