A Generative UI chatbot that streams React Server Components from the Server with Next.js and the Vercel AI SDK
This example demonstrates how to use the Vercel AI SDK with Next.js and the streamUI
function to create generative user interfaces by streaming React Server Components to the client.
Run create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
To run the example locally you need to:
.env.example
file, but in a new file called .env
.npm install
to install the required dependencies.npm run dev
to launch the development server.To learn more about Vercel AI SDK or Next.js take a look at the following resources:
A Generative UI chatbot that streams React Server Components from the Server with Next.js and the Vercel AI SDK
This example demonstrates how to use the Vercel AI SDK with Next.js and the streamUI
function to create generative user interfaces by streaming React Server Components to the client.
Run create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
To run the example locally you need to:
.env.example
file, but in a new file called .env
.npm install
to install the required dependencies.npm run dev
to launch the development server.To learn more about Vercel AI SDK or Next.js take a look at the following resources: