code-with-antonio 1 year ago
web developer #Web Development

Build an AI Companion SaaS | Next.js | React | Stripe | Prisma

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!


00:00:00 Intro

00:06:07 Environment Setup

00:10:31 Folder Setup

00;18:07 Clerk Authentication

00:31:51 Navbar

00: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





Code With Antonio
70.3K subscribers