![Generative UI Demo](https://private-user-images.githubusercontent.com/4060187/309360140-f21fa839-c710-4f09-9af4-2056f603d98f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDc3OTIsIm5iZiI6MTcyNTQ0NzQ5MiwicGF0aCI6Ii80MDYwMTg3LzMwOTM2MDE0MC1mMjFmYTgzOS1jNzEwLTRmMDktOWFmNC0yMDU2ZjYwM2Q5OGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDRUMTA1ODEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YmMxM2NlZTM1ZTBhZTFhYzg3MjgwNjRmOWY4NGUzN2ZhOTk3NjE0YjZjNDc5ZGYwYTA3NjI4NmY3NzRhZjNiMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.2Put0_5YoJsuHEaFoIA7CHptMpVkbSqX06k7jp_acq8)
An experimental preview of AI SDK 3.0 with Generative UI support
- Next.js App Router + React Server Components
- Vercel AI SDK 3.0 for Generative UI
- OpenAI Tools/Function Calling
- shadcn/ui
You can deploy your own version of the demo to Vercel with one click:
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.
This library is created by Vercel and Next.js team members, with contributions from:
- Shu Ding (@shuding_) - Vercel
- Max Leiter (@max_leiter) - Vercel
- Jeremy Philemon (@jeremyphilemon) - Vercel
- shadcn (@shadcn) - Vercel
- Jared Palmer (@jaredpalmer) - Vercel