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=sponsorship&utm_medium=youtube&utm_campaign=coding-in-flow&utm_content=10-27-2023

Links & files:
Starting code: https://github.com/codinginflow/nextjs-ai-note-app/tree/0-Starting-Point
Logo: https://github.com/codinginflow/nextjs-ai-note-app/blob/Final-Project/src/assets/logo.png
Favicon: https://github.com/codinginflow/nextjs-ai-note-app/blob/Final-Project/src/app/favicon.ico

⭐ 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/reactbestpractices
💌 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: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/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)