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 = streamText ( { model : openai ( "gpt-4o" ) , messages : convertToCoreMessages (messages) , } ) ;
return result . toDataStreamResponse () ; } @/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 > ) } 