---
title: "Generative UI Chatbot with React Server Components"
description: "A Generative UI chatbot that streams React Server Components from the Server with Next.js and the Vercel AI SDK"
url: "https://vercel.com/templates/next.js/rsc-genui"
links:
  repository: "https://github.com/vercel-labs/ai-sdk-preview-rsc-genui"
  demo: "https://ai-sdk-preview-rsc-genui.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=Generative+UI+Chatbot+with+React+Server+Components&demo-description=A+Generative+UI+chatbot+that+streams+React+Server+Components+from+the+Server+with+Next.js+and+the+Vercel+AI+SDK&demo-url=https%3A%2F%2Fai-sdk-preview-rsc-genui.vercel.app&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F22mccbAlhx4BDXLz9nU8fI%2Faa5e7388e54e3405e2086ebb0dc28361%2FUntitled_design__4_.png&project-name=Generative+UI+Chatbot+with+React+Server+Components&repository-name=rsc-genui&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-rsc-genui&from=templates&skippable-integrations=1&env=OPENAI_API_KEY&envDescription=OpenAI+API+Key+Required"
---

# 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

# Generative UI with React Server Components and Vercel AI SDK

> **Note**: Development of AI SDK RSC is currently paused. For more information, see [Migrating from AI SDK RSC](https://sdk.vercel.ai/docs/ai-sdk-rsc/migrating-to-ui#background).

This example demonstrates how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and the `streamUI` function to create generative user interfaces by streaming React Server Components to the client.

## Deploy your own

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-rsc-genui&env=OPENAI_API_KEY&envDescription=API%20keys%20needed%20for%20application&envLink=platform.openai.com)

## How to use

Run [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
```

```bash
yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-rsc-genui ai-sdk-preview-rsc-genui-example
```

```bash
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:

- [Vercel AI SDK docs](https://sdk.vercel.ai/docs)
- [Vercel AI Playground](https://play.vercel.ai)
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

## Related Templates

### [Dynamic Model Usage with AI SDK](https://vercel.com/templates/next.js/ai-sdk-feature-flags-edge-config)

A chatbot that allows you to dynamically set the LLM using Vercel AI SDK with Feature Flags and Edge Config

### [Chatbot](https://vercel.com/templates/next.js/chatbot)

A full-featured, hackable Next.js AI chatbot built by Vercel

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.