Examples for Next.js App Router

The Vercel AI SDK is designed to work with Next.js App Router. Since the App Router has first class support for React Server Components, you can use the ai/rsc module to build applications with features like Generative User Interfaces and better Server-Client State Management.

As a result, the examples will demonstrate querying the language model and streaming the response to the client using React Server Components and Server Actions from ai/rsc, instead of using Route Handlers and hooks such as useChat and useCompletion from ai/react.

Next.js Compatibility

Note: It is still possible to query the language model with Route Handlers and manage the response using hooks in the App Router, but it is recommended to use React Server Components for better performance and developer experience.