Next.js 14 Custom Chatbot (OpenAI ChatGPT, Vercel AI SDK, Pinecone, Shadcn UI, TypeScript, Tailwind)
Build your own AI chatbot with Next.js 14, the ChatGPT API, vector embeddings, Pinecone, TailwindCSS, and Shadcn UI. The app is written in TypeScript and uses the Next.js app router. You will also learn how to set up VS Code with Prettier, the Prettier-Tailwind-Plugin, the TailwindCSS IntelliSense extension, and ESLint.
Features:
-AI chat with response streaming using the Vercel AI SDK (useChat, StreamingTextResponse, OpenAIStream) and API route handlers
-Intelligent document retrieval using ChatGPT vector embeddings and Pinecone
-Light & dark theme toggle using next-themes
-User authentication with Clerk
-Create, update, and delete notes using Prisma and MongoDB Atlas
-Nested layouts
-Form & backend validation using Zod, React-Hook-Form, and Shadcn UI Form
-Fully mobile-responsive layout using TailwindCSS modifiers
Sign up for Clerk: https://clerk.com/?utm_source=sponsor...
Links & files:
Starting code: https://github.com/codinginflow/nextj...
Logo: https://github.com/codinginflow/nextj...
Favicon: https://github.com/codinginflow/nextj...
⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord
📣 Follow Coding in Flow on social media:
Twitter: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / codinginflow
Timestamps:
0:00 - Project preview & prerequisites
6:46 - Next.js project setup
20:11 - Shadcn UI setup
28:40 - MongoDB Atlas & Prisma setup
38:45 - Clerk authentication setup
56:03 - Navbar + sign-in/sign-out
1:17:56 - Creating notes
1:58:39 - Notes layout
2:07:34 - Updating/deleting notes
2:28:23 - Dark theme (next-themes)
2:37:27 - OpenAI & Pinecone setup
2:43:21 - Creating vector embeddings
2:58:07 - Building the AI chat (Vercel AI SDK)
Смотрите видео Next.js 14 Custom Chatbot (OpenAI ChatGPT, Vercel AI SDK, Pinecone, Shadcn UI, TypeScript, Tailwind) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Coding in Flow 01 Ноябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 39,896 раз и оно понравилось 1.2 тысяч людям.