![AI Server Components Demo](https://private-user-images.githubusercontent.com/4060187/309085567-7a35550b-f3ad-41d3-afd4-c044b344d433.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM3OTU2ODMsIm5iZiI6MTcyMzc5NTM4MywicGF0aCI6Ii80MDYwMTg3LzMwOTA4NTU2Ny03YTM1NTUwYi1mM2FkLTQxZDMtYWZkNC1jMDQ0YjM0NGQ0MzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTZUMDgwMzAzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjRiY2NiZjFhNWYzNGI5MjI2ZmQ0NjdjMjc1NTYzOGUzMmI0OGNlNmE0MGEyNzk5MWVjNjhiMzk1ODEwNzE2ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.HR4dx93b131BOqV0W6DiYWVNqwrpLV4f8xV0FF1DeJw)
An experimental preview of AI Server Components.
- Next.js App Router
- Vercel AI SDK 3.0 with AI Server Components
- 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