Generative UI Demo

An experimental preview of AI SDK 3.0 with Generative UI support

Features

• Next.js App Router + React Server Components
• Vercel AI SDK 3.0 for Generative UI
• OpenAI Tools/Function Calling
• shadcn/ui

Quick Links

• Read the blog post
• See the demo
• Visit the docs

Deploy Your Own

You can deploy your own version of the demo to Vercel with one click:

Running locally

You will need to use the environment variables defined in .env.example to run Next.js AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.

• Install Vercel CLI: npm i -g vercel
• Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
• Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Authors

This library is created by Vercel and Next.js team members, with contributions from:

• Shu Ding (@shuding\) - Vercel
• Max Leiter (@maxleiter) - Vercel
• Jeremy Philemon (@jeremyphilemon) - Vercel
• shadcn (@shadcn) - Vercel
• Jared Palmer (@jaredpalmer) - Vercel