AI SDK RSC Generative UI Preview

AI SDK RSC Generative UI Preview is a Next.js example application that demonstrates generative user interfaces by streaming React Server Components from the server to the client using the streamUI function from the Vercel AI SDK. It is maintained in the vercel-labs GitHub organization and has roughly 386 stars. Note that the source states development of AI SDK RSC is currently paused, with a migration guide pointing users toward the newer AI SDK UI approach.

What is AI SDK RSC Generative UI Preview?

It is a reference template, not a production product: a runnable Next.js app that shows how to generate UI on the fly by having a language model select and render React Server Components rather than returning only text. Input is a chat request handled server-side; output is a streamed React Server Component tree rendered in the browser. It is published by vercel-labs and pairs the Vercel AI SDK with Next.js.

Key Features

• Streaming RSC rendering — uses the streamUI function so server components are streamed to the client over an existing chat request instead of being bundled ahead of time.
• Next.js framework — built on Next.js, bootstrapped through create-next-app, with npm, Yarn, and pnpm install paths documented.
• Vercel AI SDK integration — the template is a demonstration of the AI SDK docs' streamUI API rather than a custom implementation.
• Multi-provider AI support — instructions tell you to sign up with whichever AI providers you want (OpenAI and Anthropic are named) and supply API keys.
• Environment variable configuration — keys are set in a .env file modeled on the included .env.example.
• One-click deployment — a Deploy with Vercel button clones vercel-labs/ai-sdk-preview-rsc-genui and prompts for an OPENAI_API_KEY.
• Local dev workflow — npm install then npm run dev to launch the development server.

Who is it for?

• React and Next.js developers evaluating generative UI: run the example locally to see how a language model's output becomes a rendered server component.
• Teams planning AI chat interfaces: use it as a starting point before the production useChat/AI SDK UI path.
• Developers migrating off RSC: read the companion migration guide to compare the paused RSC approach with the current AI SDK UI approach.

What can you do with AI SDK RSC Generative UI Preview?

• Prototype generative chat UIs: clone the repo, add an API key, and observe components streaming into the client during a conversation.
• Test provider compatibility: swap OpenAI for Anthropic (or another provider) by changing keys and configuration.
• Deploy a live demo: use the Vercel button to get a hosted instance with the API key supplied at clone time.

How does it work?

1. Clone the example with create-next-app --example (npm, Yarn, or pnpm).
2. Add provider API keys to a .env file based on .env.example.
3. Run npm install, then npm run dev, and chat with the app to see streamed server components.

FAQ

Is AI SDK RSC still actively developed?

No. The template's own notice states that development of AI SDK RSC is paused and links to a migration guide for moving from AI SDK RSC to AI SDK UI. It remains usable as a reference but is not the recommended forward path.

What API key does the deploy button require?

The Vercel deploy button for vercel-labs/ai-sdk-preview-rsc-genui requests an OPENAI_API_KEY environment variable. Locally, the setup steps allow other providers such as Anthropic if you add their keys yourself.