Github & Live Website: https://www.codewithantonio.com/projects/ai-companion
Clerk Authentication: https://bit.ly/3Kmyytc
Hotpot for AI Character Images: https://hotpot.ai/
Inspiration for the project: https://github.com/a16z-infra/companion-app
In this comprehensive tutorial, we’ll explore the intricate details of building an advanced SaaS AI Companion using Next.js 13. Our AI Companion taps into the power of embeddings and the Pinecone vector database to ensure long-term memory retention, supplemented by the fast caching abilities of the Upstash Redis database. We will also use MySQL and Prisma for storing companions.
Harnessing the revolutionary features of Next.js 13 App Router, our platform will facilitate swift client-side routing, making the user experience seamless and intuitive. Alongside, the integration of Stripe promises a hassle-free subscription system, while Clerk handles user authentication with finesse.
Throughout this tutorial, you’ll be exposed to a rich array of web development technologies, including React, Tailwind, and Prisma. Every step is meticulously explained, ensuring even those new to the realm of SaaS development can follow along with ease.
Whether you’re an aspiring developer or a seasoned expert, this tutorial holds gems of knowledge that can benefit everyone. Keen to create a state-of-the-art SaaS AI Companion? Grab your developer toolkit, maybe a cup of your favorite brew, and let’s redefine the AI-empowered web universe of 2023 with Next.js 13!
Timestamps
00:00 Intro
06:07 Environment Setup
10:31 Folder Setup
18:07 Clerk Authentication
31:51 Navbar
51:43 Sidebar
01:03:46 Search Filter
01:16:14 Category Filter
01:37:12 Companion Creation Form
02:33:41 Companion Creation API
02:51:48 Companion List
03:11:42 Chat Header
03:40:55 Chat UI
04:18:38 Memory Service
04:45:00 Chat API
05:15:35 Stripe API
05:49:26 Stripe UI
06:23:05 Deployment
