Skip to content
Avatar of vercel-labsvercel-labs/ai-sdk-preview-rsc-genui

Generative UI Chatbot with React Server Components

A Generative UI chatbot that streams React Server Components from the Server with Next.js and the Vercel AI SDK

Framework
Use Case
GenUI RSC Thumbnail

Generative UI with React Server Components and 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.

Deploy your own

How to use

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:

  1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
  2. Obtain API keys for each provider.
  3. Set the required environment variables as shown in the .env.example file, but in a new file called .env.
  4. npm install to install the required dependencies.
  5. npm run dev to launch the development server.

Learn More

To learn more about Vercel AI SDK or Next.js take a look at the following resources:

GenUI RSC Thumbnail
Avatar of vercel-labsvercel-labs/ai-sdk-preview-rsc-genui

Generative UI Chatbot with React Server Components

A Generative UI chatbot that streams React Server Components from the Server with Next.js and the Vercel AI SDK

Framework
Use Case

Generative UI with React Server Components and 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.

Deploy your own

How to use

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:

  1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
  2. Obtain API keys for each provider.
  3. Set the required environment variables as shown in the .env.example file, but in a new file called .env.
  4. npm install to install the required dependencies.
  5. npm run dev to launch the development server.

Learn More

To learn more about Vercel AI SDK or Next.js take a look at the following resources:

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential