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 Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter! ❤
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use: const response = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages}); return NextResponse.json(response.choices[0].message);
@@rishabhgupta5974 bro still get the error AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_RESPONSE" pls help
Hi please in the conversation/page.tsx I'm getting error: role does not exist in type OpenAI, same thing with content, I have updated my API to use the v4. Anyway around this ?
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out. It took me 5-6 days to complete the project.
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! 🎉 You deserve this recognition for your amazing work as a developer and youtuber. I'm a huge fan of yours and I always watch your videos with great interest and admiration. This AI SaaS video is awesome! I was very excited about the content and the tips you shared. You are an inspiration to me and many other developers. Thank you so much for everything you have done for the community. I wish you much success in your journey and I hope to see more of your videos soon. 🤗Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS. Keep up the good work.
Gosh Mr. Antonio, there are so many frameworks, libraries, packages, companies and services which are required for this Fullstack MAGNIFICENT APP. This has got to be the very best AI SAAS App, I have ever seen to date.
Antonio is back again with top quality content. Thank you very much bro. Happy for getting the first of a long list of sponsors. Upward and forward. 👏👏👏
This video deserves views more than the longest video on youtube, i will keep on coming back to it - it is part of my playlist. so much value, i would recommend it for any entrepreneur venturing online.
Wow!! This is incredible! Thought JS Mastery was the only beast on RUclips, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please ❤
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of RUclips windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
My man you are absolutely the best! I have built a half assed saas product, following the docs, but now I can finally see how to do it. Thanks man. Keep up the good work. You got your self a new subscriber.
@@codewithantonio I do have 1 question though. I am going through the video, but for some reason I can't install shadcn...I get some error about a missing module called minimatch...Do you know how to fix that issue?
Finally I Got some SaaS app... I have been searching for it for many days. There's no good SaaS app. thank you very much. I hope u keep doing these kinds of apps often😊
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio! 👏👏👏
Woooooo! Congrats on the first sponsor. First of many. You've inspired and motivated me to what's possible and I thank you. Wishing you all of the success that is already determined for you bro
I just finished my 1st app with Antonio🎉 I’m gonna list the challenges I have encountered during the past week: 1. OpenAI api has been changed, the pinned comment on the 1st page helped me out. 2. The image generation also changed, for me, I can only generate 1 image a time for the latest dall-e-3 model, if you want to have multiple image generations at 1 time, the doc says do parallel requests to achieve that(I’m lazy I just limited the option to 1 page only). Thanks again Antonio, amazing job! Wish you happy new year!🎉🎉🎉
No my image option is working fine, I am able to generate 4image too, and I want to ask you how you created the database in planetscale as it is asking card details.
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
You can avoid hydration error by modifying in the navbar file(/components/navbar.tsx) By adding import package and changing the export function. import dynamic from 'next/dynamic '; export default dynamic (()=> Promise.resolve(Navbar),{ssr:false})
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free ! it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel. And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
Thank you so much Antonio! this is what I have been looking for and to be able to add voice query to the conversational Ui FUNCTIONALITY I pray you continue giving us projects like this
@@codewithantonio thanks!, i have a question in your NEXT-AUTH v5 course, there’s a logic doesn’t make sense to me in /actions/new-verification.ts, Which is u was trying to update user email from VerificationToken model in case it requested by user to change his email so user email on his VerificationToken will be different than one that on User model, but in a previous step u were throw error if the email of VerificationToken is not found in User model, can you please revert on that because i feel there’s something i misunderstood, Thanks for your efforts!
If you are getting error after deploying on Vercel 5:30:36 ,the reason is that the AI generation function takes more than 10seconds to generate a response but Vercel only gives 10sseconds of function running time on free tier. So either upgrade to prop plan on vercel and update all your AI generation routes with export const maxDuration = 300; or simply choose another hosting platform like AWS or Linode Thank You
Amazing work Antonio! I just finished this tutorial and I can't believe how much effort you have gone through to teach us some many different things using a single application. Really appreciate your time man, looking forward to many more! Much love from Australia 💙
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it. I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid. Turns out that when you use the Sheet component and then wrap like this: It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone! Thanks again Antonio!! Lew Savage
wow just wow. i appreciate this detailed and step by step tutorial alot. this is one of the first youtube tutorial which i could follow from start to finish. i reckon this took alot of work so i just wanted to thank you so much. you are doing god's work. i had to figure out the gpt-4 version on my own since the update but this was actually quiet fun. you are genuinely the best at explaining, going through it step by step so it's organized and clear. cheers!
In future I hope you will give us more projects like that🎉 Your all projects are unique and we hope that you will gift us more projects that will help our future journey ❤️❤️❤️ Thank you sir🎉❤
Shalom evening Mr. A, this looks FANTASTIC and very much involved. Interestingly enough, I had previously wrote a post about having an app which can perform multiple forms of AI service. And this is it but so much more. I did not know AI could generate audio files or video files. Thank you for sharing! Shalom
Lol i quickly went through the video and mentioned this in my projects section and my interviewer was thoroughly impressed, even tho my data structures round didn't go well his mind was blown that an undergraduate could create this on his own, if i get in i donate u hald of my first year salary
For anyone getting the interface issue (openaiv4 had some changes): import OpenAI from "openai" //we only need to import this from openai const userMessage: OpenAI.Chat.ChatCompletionMessage = { role: "user", content: values.prompt } For node.js, no need to import configuration, here also we only need to import OpenAI. const openai = new OpenAI ({ apiKey: process.env.OPENAI_API_KEY }) const response = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: [instructionMessage, ...messages], }) return new NextResponse(JSON.stringify(response.choices[0].message))
Hello @saurabhshakya5367, where does the 'instructionMessage' come from? Are there any other changes to be made in the conversation page? For example, should we keep this code (const [messages, setMessages] = useState([]);)? Thank you in advance
Hi Anthonio, your tutorials are simply amazing. I can only imagine the amount of work that goes into these contents you make free. You are a gem! Thank you.
At 34:45, to anyone dealing with issues with the middleware.ts for clerk auth, the new default is that all routes are public and you need to designate protected routes, versus in this tutorial, all routes are protected by default, and you need to designate public routes. From the clerk docs, this is how you get the behavior you want: import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isPublicRoute = createRouteMatcher(["/"]); export default clerkMiddleware((auth, request) => { if (!isPublicRoute(request)) { auth().protect(); } }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"], };
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
I really liked the video, I'm advancing it on your platform, I had a question that was what brought me here, do you plan to include AI in future projects? Greetings
If any one got stuck in the image generation implementation like me. The api function and response object has changed in the latest openai version. You need to use this: const response = await openai.images.generate( { prompt, n: parseInt(amount, 10), size: resolution, }); return NextResponse.json(response.data);
Hi Antonio, In the mobile view, the button to pull the sheet does not go to left with sheet when clicked. It just stuck in the same place.. along with the Dashboard protected text. How to make it go to the left when clicked? Very much appreciated if you can help
Hey Antonio, Amazing video! After completing the whole project, I am getting error as: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" and "Something went wrong" from hot-toast I have tried multiple openai keys from multiple accounts, still facing this problem Please help!
for the middleware in the new version of clerk: import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/forum(.*)"]); export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect(); }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"], };
@@danialdevelops7368 Since he is ignoring us, I did some research, and the easiest solution that I found is Paddle. Look for Paddle, they are super easy to set up, and there's a video on youtube that explains how to set up Paddle on your nextJS project.
@@SerRGilk Hey, he likely is not 'ignoring you' but just has more things on his mind. Try being a bit more considerate for the amount of stuff he just gave you for free. Sucks that your country isn't supported by Stripe (it really is) but it doesn't mean Antonio should spend time coming up with alternatives for you. I don't think you would like that when the situation is reversed.
OMG, I love you Antonio❤️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on RUclips. You deserve 100 million subscribers and much more. Thanks for making these video's. I'm looking forward to more from you.❤️❤️❤️❤️❤️❤️
Great project. Learned a lot, I customized a lot of it too. Added some new models (speech, image optimizations etc), Also added a full Admin Panel with app management, user management, and software metrics. I managed to add some metrics for users too so they can track their usage. Thank you for putting in so much effort.
Ufff, I don't know how this content is free, is absolutly incredible, thank you very very much for this. Simple, you can almost copy this and start winning some money with this amazing SAAS software in your own country.
There aren’t any critical changes in next 14 within this project. But I agree that for the new videos it would be better if it could see similar micro saas products rather than whole spotify, trello or duolingo clone
@@pragyashrivastava9270there are many modules are deprecated and I want to say if you want to make the project for CV don't make this project , choose another project
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers! Do not hesitate to use it in your future projects. Thank you for your amazing videos
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
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 Platform and build 5 different AI tools using models like OpenAI and ReplicateAI. Checkout the description for links and subscribe to the newsletter! ❤
Great brother
Music generation is not working in my case. I have checked everything even copy pasted your code. Still nothing works in replicate
Your demo link is not working
sir your website is showing error in live demo
@@saurabhkumarsingh4628 that is because he reached his set limit for spending in openapi and replicate
Amazing, next up will be the 10 hour E-commerce! Love the styling and the amount of details that goes into it.
Can't belive this is free
Glad you like it!
I also can't believe all this content is free. Congratulations on your excellent work.
Antonio, I must say, you are absolutely incredible! The quality of your content is truly unmatched, and I am genuinely excited for what is yet to come. Congratulations on your outstanding work!
Glad you enjoy it!
PLEASE provide the code files and the links in the description as soon as possible for free. @@codewithantonio Thank You so much ❤️
Quality gets better by the day. I'm really enjoying the teaching approach you've decided to go for in your latest videos. Keep it up, Antonio!
Thank you!
A note for anyone following along, the api code for openai has changed a bit since this video was posted, the api has the most differences so far. You need to use:
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages});
return NextResponse.json(response.choices[0].message);
Thank you!
or else you can force install older version of open AI by running `npm i openai@3.3.0` and follow the exact code in the tutorial.
@@rishabhgupta5974 bro still get the error AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_RESPONSE" pls help
@rishabhgupta5974 why would you do that? Its literally 10 times more expensive
Hi please in the conversation/page.tsx I'm getting error: role does not exist in type OpenAI, same thing with content, I have updated my API to use the v4. Anyway around this ?
I'm honestly blown away sir. This was my first ever proper project that was deployed and so well done. Your style of guiding us along was amazing and so well put out. Immensely grateful to you and these free top notch tutorials you put out.
It took me 5-6 days to complete the project.
can i have your github ?
hello! As the Api key is free which he take from openai like for conversation,voice,image and video.
Congratulations, Sir Antonio Erdeljac, on your first sponsored video! 🎉
You deserve this recognition for your amazing work as a developer and youtuber.
I'm a huge fan of yours and I always watch your videos with great interest and admiration.
This AI SaaS video is awesome! I was very excited about the content and the tips you shared.
You are an inspiration to me and many other developers.
Thank you so much for everything you have done for the community.
I wish you much success in your journey and I hope to see more of your videos soon.
🤗Veliki zagrljaj iz Recifea, Brazila! 🇧🇷
Thank you a lot for supporting my channel!
BRBRBRBR
You're also from Recife? haaha
Hey,is your code working?
This is what startups build! I can't thank you enough, it's been a long time looking for complete tutorials like yours, Thank you so much Antonio for this great work! I am learning a lot from your channel so I can go and apply the knowledge to build my own SaaS.
Keep up the good work.
You're very welcome!
You have to take a shot everytime Antonio says "Amazing" -- it's the law
hahahahaha
Hahah
first 3 minutes of the video and I feel 🥴 dizzy
Gosh Mr. Antonio, there are so many frameworks, libraries, packages, companies and services which are required for this Fullstack MAGNIFICENT APP.
This has got to be the very best AI SAAS App, I have ever seen to date.
Thank you for your kind words!
Antonio is back again with top quality content. Thank you very much bro. Happy for getting the first of a long list of sponsors. Upward and forward. 👏👏👏
Thank you for the nice words!
As a CSE student, I highly commend your quality beginner-friendly tutorials for aiding web programming understanding, so smooth..
Glad it was helpful!
This video deserves views more than the longest video on youtube, i will keep on coming back to it - it is part of my playlist. so much value, i would recommend it for any entrepreneur venturing online.
Glad you enjoy it!
Wow!! This is incredible! Thought JS Mastery was the only beast on RUclips, but your style and explanations are incredibly great. Thank you and Please keep it up. More subscribers are on their way.
Glad you like it, JS Mastery is amazing!
Good Antonio 🎉 can I thief your ideas and mix with golang and svelte? ❤❤😊
Yea after ja mastery your video is very much helpful
TRY Lama Dev, you will see
@@didosrukundo3271 Lama Dev only build navbar and bunch of divs. No quality project with APIs and Libraries
I was just doing your twitter tutorial but when I saw this, I stopped and started straight away on making this! it is a dream of mine to make an AI! Thanks for all the amazing work!
Glad you like it!
As always, Antonio is providing tons of great value for the community, every time you upload something I just know its going to be awesome!
Thank you!
I appreciate that!
This is massive, I've been waiting for you to drop the video. Also congrats on your first sponsorship. You're doing very great
Thanks a ton!
I think this the first video on RUclips development of a whole SaaS. Love from India ❤️. Keep it up.
Glad you liked it!!
Congratz for your first sponsor Antonio, you deserve it!
I'm looking forward to watch your video!
Thanks! 😃
Man what am I doing not subscribing to your channel?! Your channel is so underrated, I will tell my friends about your channel bro, I gotchu!
Thank you!
@@codewithantonio The api you use is free or paid
wow another tutorial. what great timing just after i finished the ecommerce one yesterday. but I'm going to rest today and get started with this new one tomorrow or Friday. I am so grateful for all of this high quality tutorials from Antonio. Thankyou sir !
You got this!
Hey the OpenAi Api is charging now, its not free anymore, Any alternative we can use?
Man, words can not describe how I am grateful for your contents. Your desire and quality is exceptional, hope to have you always like this in coming years. Remain valuable please ❤
thank you!
finally got this build completed and it worked first time without any problems. once again i thank Antonio for his great tutorial and hard work in producing these tutorials. I am learning lots and am very grateful.
Great job!!!!! Thank you for following the tutorial!
Is this mobile responsive?
@@LegendSaaab yes
add "asChild" to fix hydration errors,
also the free tire of planetScale is gone
thank you buddy!
love the fact that you're using shadcn -- not only because it looks good, but also because it allows you (and therefore us) to better focus on the core parts of the application instead of writing hundreds of tailwind classes and tens of small components
Yes, I love shadncui!
Really appreciate your teaching style and how you managed to teach side topics which generally become big issues and beginners have to look out of RUclips windows. I wish you would make an advanced projects that focuses on free tools and gives us detailed idea about Industry level software. Thank you for this one!
can you tell me is openai api is free or not?
@@ujjwalmaheshwari2327 It's complimentary for newcomers, at least for a limited duration, I presume.
@@mohitcodeswell ohk Thanks buddy!
Took me awhile, but finally done with this tutorial! Time to start selling this as a SaaS!! THanks bro
Great job!
how did you get the Api to work it doesn't generate anything for me
how's your saas doing now? :)
Awesome @codewithantonio - Please make more videos for SAAS, its so helpful and we get to learn a lot about building saas from scratch
I agree more
My man you are absolutely the best! I have built a half assed saas product, following the docs, but now I can finally see how to do it. Thanks man. Keep up the good work.
You got your self a new subscriber.
Happy I could help!
@@codewithantonio I do have 1 question though. I am going through the video, but for some reason I can't install shadcn...I get some error about a missing module called minimatch...Do you know how to fix that issue?
Actually I ran the wrong command... 😅
You are wonderful at what you do! First time using Shadcn, Stripe & Clerk and I love it!! So fast!! Thank You
Glad you enjoy it!
Finally I Got some SaaS app... I have been searching for it for many days. There's no good SaaS app. thank you very much. I hope u keep doing these kinds of apps often😊
Happy to help
Wonderful, I've been doing your tutorials so I can enter the industry. I've learnt so much from you. Thank you, thank you, thank you. Keep the excellent work Antonio! 👏👏👏
Glad I Could Help!
Woooooo! Congrats on the first sponsor. First of many. You've inspired and motivated me to what's possible and I thank you. Wishing you all of the success that is already determined for you bro
I just finished my 1st app with Antonio🎉 I’m gonna list the challenges I have encountered during the past week: 1. OpenAI api has been changed, the pinned comment on the 1st page helped me out. 2. The image generation also changed, for me, I can only generate 1 image a time for the latest dall-e-3 model, if you want to have multiple image generations at 1 time, the doc says do parallel requests to achieve that(I’m lazy I just limited the option to 1 page only). Thanks again Antonio, amazing job! Wish you happy new year!🎉🎉🎉
Great job!!
No my image option is working fine, I am able to generate 4image too, and I want to ask you how you created the database in planetscale as it is asking card details.
@@sudhanshugautam425any updates??
Hey can you please share your github
I am doing changes but they are not working for me
Good to hear that, I am stuck in the image generation, can you please share how to change the code for image generation?
Thank you, Antoni. I have watched many of your videos, but this video you taught very carefully and in detail. Lots of love!
Glad it was helpful!
One like button is not enough for your content. You're the best Antonio!
Appreciate that! Thank you!
I have been looking for this type of channel for a long time. Thanks so much Antonio!
Glad you enjoy it!
A quick tip for the Hydration Error at 1:07:30. This error occurs because you've enclosed the button from @/components/ui/button within the SheetTrigger component, which is, in essence, another button. To wrap a button inside a button isn't compliant with HTML syntax, resulting in the error being triggered. One potential solution would be to eliminate the Button component and directly wrap the menu within the SheetTrigger component.
Change the Button component to a span or i element with the className="md:hidden" is better otherwise the icon will not be hidden on large screen.
@@snoviie you saved my life
@@snoviie fixed it for me too. Thanks bud
Literal lifesaver. Thank you so much.
You can avoid hydration error by modifying in the navbar file(/components/navbar.tsx)
By adding import package and changing the export function.
import dynamic from 'next/dynamic ';
export default dynamic (()=> Promise.resolve(Navbar),{ssr:false})
Wow finally it has dropped,the most anticipated video on RUclips 🎉🎉, thank you Antonio you are a rare gem
Hope you enjoy it!
Yes I enjoyed it , still learning alot from it
You are awesome Antonio. You can't possibly imagine how much you've helped me. Thanks. I'm really grateful.
Happy to hear that!
So happy I'm here! Congratulations on your first sponser video! :) You've helped me so much and im looking forward to this tutorial
Thank you!
Absolutely amazing, i used to do webdev in django but learned react and nextjs just to follow along with your brilliant tutorials
Glad I could help!
How is it superior to just vanilla JS html and css(beginner here)
Amazing tutorial, cant thank you enough for taking the time to provide all this content to the rest of us for free !
it was exciting following along up to the api section where i got totally lost, it will help alot once the repo gets updated
Hvala ti puno za ovaj tutorial! Pozdrav iz Njemacke
Drago mi je da je pomogao! :)
Oopa. Svaka cast Antonio!
after fighting with next-auth and iron-session for hours and hours, clerk is imcredible!
You are a beast!! Amazing and congrats for your 1 sponsored video
Thank you!
I love you, in 2 videos i see i learn more than 10 courses i made in udemy, you are a machine! keep the good works, congratz on your sponsor, now i have to become a member, i really enjoy this channel.
And of course, if I can make a suggestion, I would say to build a more "simple" application covering the basics of react, that is to build something using only react and vite for example to help those who still have some difficulties in understanding react basics, if already exists on the channel, I'm sorry, I'm marathoning things here :)
Glad my videos helped you, and thank you for the suggestion!
Dude I’m still digesting your last video, sheeesh, big props bro, I’ll get to this one soon
Glad you like it!
Thank you man, I learned Typescript because I loved your explanation❤❤
Glad it helped!
Hey,is your code working?
Thank you so much Antonio! this is what I have been looking for and to be able to add voice query to the conversational Ui FUNCTIONALITY
I pray you continue giving us projects like this
Glad it was helpful!
YOU'RE ABSOLUTELY AMAZING!, Thanks so much from Egypt!
You're so welcome!
@@codewithantonio thanks!, i have a question in your NEXT-AUTH v5 course, there’s a logic doesn’t make sense to me in /actions/new-verification.ts, Which is u was trying to update user email from VerificationToken model in case it requested by user to change his email so user email on his VerificationToken will be different than one that on User model, but in a previous step u were throw error if the email of VerificationToken is not found in User model, can you please revert on that because i feel there’s something i misunderstood, Thanks for your efforts!
If you are getting error after deploying on Vercel 5:30:36 ,the reason is that the AI generation function takes more than 10seconds to generate a response but Vercel only gives 10sseconds of function running time on free tier. So either upgrade to prop plan on vercel and update all your AI generation routes with
export const maxDuration = 300;
or simply choose another hosting platform like AWS or Linode
Thank You
Hi, I am facing this error. Can you give me more details on how to add maxDuration in the api routes? Thanks!
I'm struggling with this how do i implement it in the application?
Your videos are such a blast to watch and also very informative. As you'd say "Great, great job!"
Glad you like them!
Antonio, your work is truly a well-explained and exceptional masterpiece. Please keep going.💻
Thanks a lot!
This is wow and amazing. My first time watching your video and I'm blown away. Keep it up mate and many thanks for sharing this nugget of gold.
Glad you enjoyed it
The content you provide is massive. I'm a react engineer and I wanted to advance my skill and here I am
Amazing work Antonio! I just finished this tutorial and I can't believe how much effort you have gone through to teach us some many different things using a single application. Really appreciate your time man, looking forward to many more! Much love from Australia 💙
Hello Antonio from New York, USA! First I’d like to thank you for the great video tutorials. I completed the Netflix clone last week and really enjoyed it.
I’d like to share something with you and everyone about the Shadcn “Sheet” and Button components for the mobile sidebar. I was getting render errors in the browser - server and client renders were not matching and was throwing an error at the node in the mobile sidebar. The part of the code where the custom buttons are wrapping around the Menu icon from lucid.
Turns out that when you use the Sheet component and then wrap like this:
It will throw the render error. It looks like SheetTrigger in and of itself IS a button element, so adding the additional Button is an issue. If you just remove the custom button tags and just have the Menu wrapped around the SheetTrigger elements, it will clear that error. Hope that helps someone!
Thanks again Antonio!!
Lew Savage
Thanks for that info, it will help someone and I will keep it in mind!
Thanks man!!! It was really helpful.
Thank you so much!
Also, don't forget to add 'md:hidden' into className of 'Menu' :)
seems to work for me
Thank you! It was helpful
wow just wow. i appreciate this detailed and step by step tutorial alot. this is one of the first youtube tutorial which i could follow from start to finish. i reckon this took alot of work so i just wanted to thank you so much. you are doing god's work. i had to figure out the gpt-4 version on my own since the update but this was actually quiet fun. you are genuinely the best at explaining, going through it step by step so it's organized and clear. cheers!
How did you figure out the gpt 4 version? I’m currently stuck please help
I'm also stuck. trying to follow the docs and adapt the code. can you share your repo link ?
In future I hope you will give us more projects like that🎉
Your all projects are unique and we hope that you will gift us more projects that will help our future journey ❤️❤️❤️
Thank you sir🎉❤
Glad you like my videos!
All love, you're creating next-gen devs left right center !
Happy to hear that!
Shalom evening Mr. A, this looks FANTASTIC and very much involved.
Interestingly enough, I had previously wrote a post about having an app which can perform multiple forms of AI service.
And this is it but so much more. I did not know AI could generate audio files or video files.
Thank you for sharing!
Shalom
Glad you like it, thank you!
You are amazing Antonio Sir ❤
Every single time, you drop an incredible projects 🎉🔥
Glad you enjoy it!
Lol i quickly went through the video and mentioned this in my projects section and my interviewer was thoroughly impressed, even tho my data structures round didn't go well his mind was blown that an undergraduate could create this on his own, if i get in i donate u hald of my first year salary
For anyone getting the interface issue (openaiv4 had some changes):
import OpenAI from "openai" //we only need to import this from openai
const userMessage: OpenAI.Chat.ChatCompletionMessage = {
role: "user",
content: values.prompt
}
For node.js, no need to import configuration, here also we only need to import OpenAI.
const openai = new OpenAI ({
apiKey: process.env.OPENAI_API_KEY
})
const response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [instructionMessage, ...messages],
})
return new NextResponse(JSON.stringify(response.choices[0].message))
Thanks man for saving my life
Hello @saurabhshakya5367, where does the 'instructionMessage' come from? Are there any other changes to be made in the conversation page? For example, should we keep this code (const [messages, setMessages] = useState([]);)? Thank you in advance
@@jordanesanson6911 i had the same question...
@jordanesanson6911 my mistake, instructionMessage is used in the code route, so if you are currently working on the conversation route then remove it.
@@saurabhshakya5367 can you show the code ?
Hi Anthonio, your tutorials are simply amazing. I can only imagine the amount of work that goes into these contents you make free. You are a gem! Thank you.
Did you finish the project recently?
At 34:45, to anyone dealing with issues with the middleware.ts for clerk auth, the new default is that all routes are public and you need to designate protected routes, versus in this tutorial, all routes are protected by default, and you need to designate public routes.
From the clerk docs, this is how you get the behavior you want:
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isPublicRoute = createRouteMatcher(["/"]);
export default clerkMiddleware((auth, request) => {
if (!isPublicRoute(request)) {
auth().protect();
}
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
sir im still facing the same issue what shoud i do (i'm not able to redirect to dashboard)
@@swarshashvat4777 i am also facing the same issue did you find any solutions?
did not solve the problem unable to redirect the dashboard can you please solve this issue
Svaka cast za tutorijal presisao si i Denissa i Traversy Media i sve njih po kvaliteti tutorijala
👏👏
Hvalaa!
Hey this is very awesome stuff. I was wondering if you'd consider doing tutorials on complex applications like codux or figma clones. Tutorials that help us build tools and libraries thus making us understand them even more.
Great suggestion!
Antonio does it again! Great job my friend!
Thank you!
I really liked the video, I'm advancing it on your platform, I had a question that was what brought me here, do you plan to include AI in future projects? Greetings
I definitely plan on using AI in the future projects :)
@@codewithantonio Thanks 💜
I can watch this hero all day🥇thank you so much, Antonio!
My pleasure!!
If any one got stuck in the image generation implementation like me. The api function and response object has changed in the latest openai version.
You need to use this:
const response = await openai.images.generate(
{
prompt,
n: parseInt(amount, 10),
size: resolution,
});
return NextResponse.json(response.data);
Can you please tell me if I can complete this whole project just by seeing the video and is the api free?
What a time to be alive! Thank you for this precious content, sir. Keep it Up!
Almost good, this tutorial have a big problem with the new API 4, so, it causing me a lot of troubles, nothing works and errors everywhere
Great tutorial! Great mic, totally worth watching.
Glad it was helpful!
Hi Antonio,
In the mobile view, the button to pull the sheet does not go to left with sheet when clicked. It just stuck in the same place.. along with the Dashboard protected text.
How to make it go to the left when clicked?
Very much appreciated if you can help
Yes this was an issue I also faced.
Clerk is sick! Antonio this is a great find.
Thank you!
Did openai api get updated? ChatCompletionRequestMessage doesn't seem to be working for me
Exactly I have the same problem
Yes it gets updated
Now OpenAiApi changed to OpenAI
Also there is another changes.
You just search youtube, it will help you
@@MelvinManoj-kx2msHey have you completed this project and its working perfectly?
this channel is underrated for learning, great job antonio
Glad you think so!
I have not gone through the project but Sir, I appreciate your effort. You have empowered me with knowledge. Thank you.
You are most welcome
Hey Antonio, Amazing video!
After completing the whole project, I am getting error as: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"
and "Something went wrong" from hot-toast
I have tried multiple openai keys from multiple accounts, still facing this problem
Please help!
How did you fixed this?
This is what i have been looking for in a long time, thank you so much
Glad I could help!
for the middleware in the new version of clerk:
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/forum(.*)"]);
export default clerkMiddleware((auth, req) => {
if (isProtectedRoute(req)) auth().protect();
});
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
Thanks a lot!! I was so confused!
nice one! especially the stripe stuff!!! I will be referencing this when integrating stripe to my platform over the next few weeks
Glad it was helpful!
1:52:32 unable to find the module in openai . Cant find resourse on this . How to fix this can anyone help .
Same problem
@@HAMOKA- solution 1 : install old openai version: v3.3.0
Solution 2: try this ChatCompletionMessageParam instead
Hope this helps
Use ChatCompletionMessageParam instead, this is due to the updated SDK of openai.
Stripe is not supported in my country. What are my alternatives for a subscription model?
same problem lol
@@danialdevelops7368 Since he is ignoring us, I did some research, and the easiest solution that I found is Paddle.
Look for Paddle, they are super easy to set up, and there's a video on youtube that explains how to set up Paddle on your nextJS project.
@@SerRGilk Hey, he likely is not 'ignoring you' but just has more things on his mind. Try being a bit more considerate for the amount of stuff he just gave you for free. Sucks that your country isn't supported by Stripe (it really is) but it doesn't mean Antonio should spend time coming up with alternatives for you. I don't think you would like that when the situation is reversed.
Finished 🎉🎉 , it was great 5 days with you😇 , thank for this amazing tutorial ❤
Great job!!!
I followed you but when using Clerk's SignIn and SignUp components, it doesn't render anything, why? Please help me fix it pls
I am running into that same issue. Were you able to determine what the issue is?
Error: The default export is not a React Component in page: "/sign-in/[[...sign-in]]" that's what I got oops
I run into the same issue :/ @@Gh05t_Dev
OMG, I love you Antonio❤️. I am currently watching one of your videos and I have to pause it to comment this. I recently watched JS Mastery explain the same NextJs Concept but I didn't understand a thing. But barely 20 minutes into your video I feel I can build anything because your explanation is just the best on RUclips. You deserve 100 million subscribers and much more.
Thanks for making these video's. I'm looking forward to more from you.❤️❤️❤️❤️❤️❤️
I can use google gemini api in the place of openAI API key?
Yep you can use gemini api key, but that changes the code in the api directory since now you have to use the gemini docs to use it.
@@bhavkushwaha give me the api's code for using gemini api
i had error in configuration and openaiapi
Same bro
What the solution of this
Open ai has updated and changed its api. That was used in v3. The new V4 has a different method of doing it. Check the documentation
Hello bro, did you manage to solve this problem? I'm stuck here too.
Great project. Learned a lot, I customized a lot of it too. Added some new models (speech, image optimizations etc), Also added a full Admin Panel with app management, user management, and software metrics. I managed to add some metrics for users too so they can track their usage. Thank you for putting in so much effort.
Amazing job!
@@codewithantonio Hey! Thanks a lot for responding, you're doing an amazing job. Absolutely love your videos.
great to hear that. @codewithantonio provided great base for me too. I also want to build some thing like that. Can you guide me how you dd that ?
Ufff, I don't know how this content is free, is absolutly incredible, thank you very very much for this. Simple, you can almost copy this and start winning some money with this amazing SAAS software in your own country.
Glad you enjoy it!
Can you bring this course updated ?
There aren’t any critical changes in next 14 within this project. But I agree that for the new videos it would be better if it could see similar micro saas products rather than whole spotify, trello or duolingo clone
Thank you, I really whole heartedly admire you. Your projects are awesome and unique that based on real world problem solving.
Thank you very much!
MANY MODULES are deprecated
Hey can you tell me which ones are deprecated and how do I manage making it otherwise
@@pragyashrivastava9270there are many modules are deprecated and I want to say if you want to make the project for CV don't make this project , choose another project
@@pragyashrivastava9270ｕcan refer to the documentation to switch for the deprecated function
Dont follow if u are a beginner
Welcome to software development 😅 Time to learn how to read documentation
thank you very much for this tutorial and especially for the discovery of Clerk which is just incredibly simple compared to Next-auth which requires more work in the configuration of providers!
Do not hesitate to use it in your future projects.
Thank you for your amazing videos
Glad it was helpful!
if someone has problems with lucide react -> downgrade next to
"next": "13.4.12",
I accidentally ended up watching the entire 5-hour video. Fantastic!