Build a SaaS: AI Companion With Next 13, React, Stripe, Prisma, MySQL, Tailwind | Tutorial 2023
HTML-код
- Опубликовано: 13 июн 2024
- Discord for any problems/errors/bugs: www.codewithantonio.com/discord
Github & Live Website: www.codewithantonio.com/proje...
Clerk Authentication: bit.ly/3Kmyytc
Hotpot for AI Character Images: hotpot.ai/
Inspiration for the project: github.com/a16z-infra/compani...
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
Antonio is the mythical 100X developer we all aspire to be.
hahaha, i just have really good subscribers that motivate me! 😉
@@codewithantonio Antonio what is wrong with you (joking)... But it is not natural what you are doing. It is like you have access to some secret knowledge. You need to be careful. Those people on this list are atheists, and some are sort of pact dealers with Evil.
@@codewithantonio Sorry, may be I envy you.
What means 100x developer?
@@ez7125 It means he's 100 times better than a regular developer.
You're killing it. I'm currently using Clerk in my own app to handle auth and am pretty happy with it. Great project man!
Thank you so much Josh!
Hi Josh, I'm a big fan, also a subscriber
haha... it's nice to see u here ...bro
Josh
I don’t think I’ve ever been so pumped to work through a tutorial.
Very happy to hear that!!
Hey can you tell me the pre rquisite for it.
Thankyou Antonio. This project gave me the required confidence for development. Guys , this guy is a gem , every point explained briefly and on point, we all need a teacher like you.❤
I have been hovering around the intermediate levels in web development for a while now, and while I'm far from done with this video I can already feel that it amplifies my skill level greatly. I'm super, super excited to continue this as well as check out your other videos. 100% a sub from me, keep up the great work!
Happy to hear that!
You are the only one who talked about how to grab stripe webhook for production on RUclips. You my savior.
Happy I could help!
Attention to details. Antonio, you're an absolute maestro. Thanks for taking the time to explain the concepts as well as the modus operandi. Learning is entertaining, watching your videos. Keep up the great work bro!
Glad it was helpful!
Want to get mentored by me? Apply at www.codewithantonio.com/mentorship
Hello everyone, thank you for choosing this video. In this tutorial you will learn how to build your own SaaS AI Companion Platform. You will be using advanced AI techniques like long term memory using vector databases and prompt engineering! Checkout the description for links and subscribe to the newsletter! ❤
Congratulations can you make a POS SAS for Restaurant, where user can access by scan QR code , make orders
Would you at some point consider making a premium course? Like 17 or 24 hours long course with loads of details and a very complex project (that includes testing, ci/cd, etc.). I would definitely buy it :)
Im planning something like it :) @@youneshenni5417
@@codewithantonio please don't be too expensive
dude you are the best, keep up the good work. i just wanted to ask you, i live in honduras, can i build, edit and sell your apps to local buisnesses expecially the ecommerce one??
Working through your projects gave me the confidence to build full stack production ready apps! I was super surprised by how much I learned from you when I tried building things from scratch. Truly thankful for you🙇♂️
Im very happy I could be of help!
@@codewithantonio I'll make you proud😼
Yo this tutorial is exactly what I need. Thank you Antonio and thank you clerk for sponsoring this video! 🔥🙌🏾
Love your tutorial man the way you are writing the clean code and using the only necessary libs Keep it up man
Your clear explanations and attention to detail made the entire process a breeze to follow. As Beginner but slightly intermediate developer (coming that way soon) 😅, I couldn't be more thankful for the incredible value you provide through your channel. Your dedication to teaching and empowering us to create amazing projects is truly inspiring. Can't wait to see what you have in store next!!
Glad you enjoy it! Thank you for the support!
This is the first time I'm seeing an Antonio production, just 3 mins in and I have liked, subscribed, and belled! I can tell this is going to be a super awesome project! Definitely gonna build this
Appreciate it!!
Wow 😮 Antonio, you are pumping out content like crazy. Haven’t even finished your last tutorial. Keep up the good work 👍🏿… Great content 💪🏿
Appreciate it!
You're killing it man. Thank you so much for this. I'm finally learning how to code in Next JS.
Glad you like it!
Came at the right time. Thank you Antonoi, will hop on it once I finish the e-commerce project
You got this!
wow, i just saw this today. I cannot wait to get stuck into this one and learning more. Looks great and I will start this after our long weekend, which we have here in BC, Canada right now. Thankyou for your dedication into teaching us. I certainly appreciate it very much. I will give my feedback when I have completed this build.
Hope you enjoy it!
haha antonio, you're a machine. Pushing out high quality projects one after another before I can even finish the last one! Keep up the great work.
Thank you a lot!
Wow! You are absolutely killing it man. Just learned a lot from your REST API tutorial
Thank you for watching my videos!
This is the content I always wanted ! This is amazing ! Subscribed
Welcome aboard!
This is my first time watching a 6 hour tutorial and I really enjoy it
Glad you enjoy it!
Amazing job I enjoyed the turorial and now having a lot of fun with the companions I built a GPT template to generate more of them as well as prompt for images Great Job Antonio .
Great Job! Thank you for watching!
Waiting for it 🤩
Thank you so much ❤
More to go 🎉
Thank you!
This is the longest tutorial I've ever done, but one of the best
I just finished this project successfully. This was the best project yet and I thank you Antonio for all the initial work that went into researching and building this project and then to show us all and help us learn. I truly appreciate you and look forward to the next build and trust me I am learning a lot from this. Thankyou !
I'm thinking of starting the project. Do we have to pay for any services which are used in the project?
no you do not have to pay for anything, but word of warning when you start chatting with the companions, that stops working very quickly once you reach the limit which is not really that much.
Awesome@SuperPompey77 well done - My son has been trying to get it work for weeks!
Hi, @@SuperPompey77 Do you have any solution for that problem? I am experiencing the same. After 3rd, and 4th questions, the companion "answers" my question, because I can see it in the response on my console, but the app does not show it on the screen and the prompt is not cleared too from the Inbox. @codewithantonio Do you have any explanation?
As always, amazing job Mr. Sir Antonio!
Thank you very much!
This is amazing, Thank you so much. I hope you also get what you want from RUclips. Please continue making this videos!
Thank you for another awesome tutorial, Antonio!
Glad you liked it!
you just lift youtube tutorial to a new level. thx for what you have done!!!
Very happy you like it!!
Just wow, thank you so much for all of this hard work!!
Once you start watching this video you don't want to stop, awesome job man!
Thank you!
Done and dusted. Project complete. You did a great job!
Awesome! Thank you!
I just subscribed 🎉
I can't believe I've been missing a lot of quality tutorials 😢
Happy you like my videos!
Bro, i appreciate how attentive you are to your audience by actively listening to feedback and incorporating it into your content. That shows a genuine dedication to improving and providing value to your viewers. I must say, I thoroughly enjoy watching every single your videos (since netflix clone) and learning from your insights.
Keep up the fantastic work, and I look forward to more insightful and engaging content from you in the future. You have a loyal fan in me! Thank you for sharing your knowledge and passion with the world.
Thank you very much for your support from the start :)
Quality Content as always🙌🏻🔥
Thank you Antonio 💖
Glad you like it!
Your work never stops amazing me. You have such great content 👍👍 Thanks for sharing
Thank you so much 😀
As always, incredible job Master 🎉
Thank you!
Still can't believe this video exist. I am working on AI with laravel backend and was looking for something to start nextjs, this was way beyond my imagination. Will be binging on other videos soon.
Kudos to Antonio for this.
With this quality, this channel is wild 🔥🔥🔥
Thank you!
Thanks bro. Really appreciate for your tutorials
Glad you like them!
You are definitely becoming my favourite RUclipsr in the learning category. Would love to see a custom UI for the payment page (like in Netflix) :). Keep up the great work.
Thank you and thanks for the suggestion!
Hi Antonio. I've got about 3 months of my javascript and react course to learn but I'm really looking forward to doing these tutorials when Im finished!
Best of luck!!!
Greetings from Argentina Antonio! always grateful for your contributions
Happy to help!
@codewithantonio I love your videos man, these are actually way better than any other paid courses i have done for react/nextjs. Thanks for being such an awesome creator and sharing your knowledge with the community. Was wondering also if you can share your, oh my posh theme setup, and also the vscode theme/icons/fonts etc
What a tutorial, all I can say is thank you so much!
You're very welcome!
Thank you so much for sharing your knowledge, Sir.
My pleasure!
Amazing video. Thank you for this! I must say I think Antonio is the new raising RUclips Superstar for developers for 2023
Thank you for the kind words!
Love the project and dedication towards project. ❤
Waiting for some awesome tutorial from you......
Thank you so much 😀
this guy is a masterpiece man!!!! your work is amazing!!
Thank you very much!
High quality stuff - as usually! Enjoying every second of this video already 😻
P.S. One little note on PlanetScale - some have probably run out of free db and branches for them to use, if they follow your projects regularly. So, guys, if you see this - prisma makes it super easy to use a different db cloud solution and everything will work the same as long as it's the same type of db. I chose elephantSQL for myself this time and it's working out so far.
Thank you very much for your hard work, Antonio! We are very grateful ❤🙏
Thank you and thanks for that tip that will help others!
Thank you for your tip! I actually run out of free db on Planet Scale, and I just read some comments to find out if anyone is in the same situation with me and I saw yours. I choose Neon db. xD
@@blue_berry_pie64 That is a really good choice! I switched to it after a day as well. So you are giving others even a better tip than I did initially 😁👍🏾
@@fotyG thank you 😊
@@blue_berry_pie64 @fotyG Although they don't support the @@fulltext attribute, no?
Just learn all advanced production skills and way of writing of production based code by you and these videp help me a lot to develop my AI music visualizer thanks for help
I just woke up 30 minutes ago, came onto youtube to do something else, then I see this video was uploaded an hour ago. Well I guess I'm going to be building this project instead today. Thank you so much for creating awesome content.
Good morning! Hope you enjoy the project!
bro, this helped me by a ton of things! Great tutorial!
Glad to hear it!
Another professional A-1 tutorial implementing advanced technologies.
Thank you!
Antonio is the only honest youtuber who reavels and teaches you everything from scratch love❤❤ your work, thanks bro. The best RUclipsr🎉🎉
I appreciate that! Thank you a lot!
Love the way you explain ❤
Thanks a lot 😊
Dude you are beast !!!!! thanks a ton
You're welcome!
Sir antonio will go down the history as a legend
Damn.. youre video tutorials are incredible 🔥 easy explanation
Thank you!
ANTONIO DID IT AGAIN!!!! THANKS BRO!!!
Glad you like it!!
Thanks for sharing your wealth of knowledge. Projects like this, help developers to level up.
My pleasure!
amazing amazing job 🎉 what an amazing project
Thank you! 😊
by far the best webui course I had intergated with AI prompt and tons of UI components, all for free, you are legend!!
Happy you like it!
loving it, I'm new to web UI programming and your channl is teaching me unimaginable amount of knowledge in short time. I'm still working my way through your vidios.
now I actually have a question, in the chat-messages.tsx, what's the best way to make the vertical scrollbar to be automatically stick to bottom when we got new messages poping in? @@codewithantonio
Got another question, how can we autoFocus on the chatform once finished loading? currently we will need to constantly click back to the chatform textfield once finished loading. sorry to ask all these basic questions and thanks in advance!
nws, all solved :) learned more about hooks@@codewithantonio
Banger after bangers 🔥🔥🔥
Thank you!
Antonio thank you!
I’m going to also build this in React Native
Have fun!
🥰 Out class Tutorial with great details.💯👌👋
Antonio you’re genuinely the best. Please more protects with shadcn, supabase and next js… like a proper sass dashboard. Thank you!!!!
Glad you like the project, thank you!
Pinecode error solution:
If you are getting errors in similaritySearch from MemoryManagement class or some error with langchain or pinecode it's because these modules have been updated.
I understand that my solution is not ideal but for the sake of this project I downgraded my pinecone-database/pinecone and langchain to that of Antonio's which are deprecated now. The current updated version required change of code in files, and it'll be good self-practice if you can update your code to the latest modules.
But, If anyone is looking to do the same then run the following commands:
npm install langchain@0.0.92 --save --force
npm install @pinecone-database/pinecone@0.1.6 --save --force
and you are good to go!
thanks bro it was really helpfull
I want to thank you for all the hard work
Thank you for watching!
@@codewithantonio not at all i have question i want to use PayXpert instead of strip byt i donot kow how can i do that?
Thank you so much sir I like your tutorial so much and I learn lot from your tutorial thank you for sharing your knowledge ♥ ♥
Glad you like my tutorials!
Hello Antonio, i find this type of full projects 3+ hours on youtube (next,tailwind,ai) started to be very popular approach and i see many alternative chanells, i am also 7+ years dev and i also worked in Endava mate :D not from Croatia though from another country.
I will check out one of your projects and see if i like this 6 hours project tutorial, takes a lot of time but so far your app ideas and implementations they look AMAZING!
Love your work. I would love a tutorial with nextjs and internationalization
Thank you, I will certianly do some i18n with next 13 in the future
Wow another project thankyou antonio
Glad you like it!
Just one word thank you!
Glad it helped!
This is amazing.
Very nice work.
Thank you for your efforts for us
It's my pleasure!
This is amazing 🔥🔥
Thank you!
Amazing Antonio thankyou brother
Glad you like it!
Sou brasileira e sou muito fã de seu conteúdo, se você desse curso com toda certeza eu pegaria
Wtf bruh! This is insane, wow. Thanks bro. Just wow.
Thank you!
Thank u very much for these
Glad you like them!
Love you, Antonio
Wow! this was gold
Happy you like it!
hi antonio, i dont usually comment yt videos but i have to thank for your videos!
Glad you like them!
Great Work Antonio
Best SaSS tut Till date ❤
Glad you think so!
Antonio you are a gem to the Community
Im happy you think so :)
Nice hit list you got there, pretty impressive
Great tutorial!
Glad you think so!
Wow! You are absolutely killing it man ,in the next project can you teach about the technique like redis,docker,rabbitmq,... or anything like that to push the api more efficent,after all thanks for creating wonderful projects
Glad you like the video, thank you for the suggestion!
amazing, thanks for sharing
Thanks for watching!
This is a Great Course. ❤❤
Happy you like it!
Amazing 🔥🔥🔥
Thank you!
Hello! First of all, I want to thank you for all the hard work you put into your videos and for all the useful information you share with people, completely for free! Thank you! I also have a question, I want to create a Terry Pratchett avatar, but I want the bot to be trained on his books as well, or at least parts of them. What would be the best way in your opinion?
Mnogo dobar ti je kanal bro.
Thank you Antonio, I am still struggling with your last AI project.😂 But another AI masterpiece has been created👍
You can do it!
I am currently learning React but i always like your video, i will be here once i am done learning
You can do it!
Lets goooo .. cant wait
Thank you for watching my videos!
Time to learn something new today!
Lets go!
Antonio, you are a beast #respect.
Thank you!