How To Build A Complete AI SaaS Using Bolt.new

in this video we will build an AI SAS using bolt. new we will start off with building a landing page proper authentication app dashboard complete back and set up even the stripe integration this is a proper landing page with all the headers Footers all the features all the you know social proof the pricing monthly plans annual plans you might think these doesn't work but you can integrate your stripe as well if you scroll down if you create a pricing table on your stripe you can indeed subscribe with all the info that you've seen earlier if I enter some test uh this is in test mode actually so I if I enter my test card info here they would even let me sign up once I sign up I'll be redirected to register my account and then I can log in I can register and I will also discuss how to you know integrate your GitHub and external access and stuff we'd be using um super base for that and if you go back to our presentation this is we talked about landing page the features the pricing uh the access terminal this beautiful looking authentication and once you're in the dashboard you can integrate any AI you want you can integrate a chatboard on a vector shift you can integrate a synth flow um voice assistant and shout out to Brock mesich this is this video Inspire is inspired by his video an AI SAS video that he did using synth flow and bold. new and I thought if I you know build upon what he has done and integrate with super base to provide proper authentication and proper you know saving nodes and show you how to integrate stripe as well I thought it would be super valuable so you can integrate any app you want uh for it doesn't even have to have the reason you're seeing a Wy assistant here it is because I embed I have emitted an actual link an actual web page instead of using proper embed code and stuff that is not always the best practice but it works uh and I did that to show you how to achieve that functionality and we use super Bas for database and authentication and it is indeed true building a weekend skill to Millions so I will also show you how I generate prompts the prompts that I have used all the stuff and this is not the final version we will be updating as we go and if you want this guide it is available in the first or second link in the description in my free scho school Community you can um join and download this and a lot more stuff that I have in there so without further Ado let's get started let's go to bold.

new and for the first prompt I am using I am so to show you because I also did a three-hour long course on bold. new and most people were asking yes your prompts are great and it's working how did you even come up with that do I I have to write every single line myself so I wanted to show you how I would generate my prompts so that it would be helpful even if you are not building this app if you are interested in building something completely different completely different from mine then it will be helpful right to see to get an insight into how I would do stuff so I if I like a terminal if I like any UI I would just screenshot that and I say can you describe this image please the signup screen also has GitHub and Google options and the buttons feature how animations output and code block I take this prompt to I I either use CLA or I use Chad GPT doesn't matter and once I ask the description of it it will give me the whole thing and I will add both image and text and bring it back to bold to get it done so we are not just giving an image as an inspiration to go off of we're also explaining what we need and this is this approach has been more powerful and uh got me consistent results and as you can see one other prompt is please provide if you don't have an inspiration and if you just want to go by what uh the large language model would suggest I would say something along the lines of please provide a prompt for an AI app developer this prompt will be used to create an attractive worldclass landing page for an AI SAS application again output in code block so easier to copy when I say something like that it will give me you know a really really long um prompt and chances are bolt will ignore some of this stuff so I didn't want that to happen I say make the prompt half the size please and it will cut the you know um prompt in half and the length is good make this landing page for ultimate AI assistant please rewrite so that would you know use keywords related to an AI SAS obviously you'll have to if you have your own copy you should have your own copy but if you are if you don't this it might be a better approach but as a placeholder when you're demoing a client or something but still if you have your copy then that's even great and I that that is how I come up with my prompts I won't be sh um doing that now that is what the research prompts are for so first prompt I am using something like this I am creating a modern aias application with multiple Pages including lining page um authentication interactive Dashboard please maintain consistent um yeah The Branding Etc and we need for authentication purposes we are since I said we are using super base you will need to create a super base project and copy your url an API key if you don't you won't be able to use your app in your first after your first prompt you'll have to manually update stuff and uh it sometimes it wouldn't create a NV file so so that's an extra two to three steps I don't want to do that so if you create a project and include your URL and API key here it makes things a lot easier so let's go to super base if you um if you need a link it's here somewhere um continue once you in uh if you don't have an account it's so easy to create one once you log in this is the dashboard that you would see I will click on new project and I will click my organization name and for project name I would say aias demo I think I already have an aias so for strong password just use something um um and create a new project you can save it um once you create the project it will the home page or the page that you would see right after will have a URL and an API key you need to copy that I don't know why it's taking unusually longer just give it uh one second while we um copy our prompt and paste it in let's copy our first prompt and paste it in bold so that we can also update our URL and URL and the API key so let's go back see if it's done yes it's done now this is the URL project configuration copy this URL I will delete this project once we are done with this tutorial but best practice you shouldn't share your API Keys even though it's public you you shouldn't be sharing this anywhere um let's update the key we have it color in mind it's it helps if you add it and I will also add an image so that it has something to go off of you know uh the terminal that I was showing you earlier we can use that and if you want to use these yourself you will have my guide you can just copy the image or screenshot it or whatever and uh use it so let's begin and probably it will be using uh uh creating a react app um in in most cases so again if you haven't watched my bold course video I always like to include this in my prompt let's create separate components for better organization and maintainability when I do that I save a lot of you know tokens when if we have to change let's say simple example if you don't like something you see in header or you don't like something that you see on footer or authentication page or landing page in general if you don't break up your app into components it will be under one file and each time you request a simple thing it will rewrite the whole code again in a sense you are using a lot of tokens yes and there is a every time you do that there is a really good good chance that something would break and I I don't want that to happen and we may not see landing page in when this is done you know there there is an ongoing issue where Bol sometimes ignores some of the parts of the prompt that you have I don't know why this is empty but let's so let's a good practice when you don't see something sometimes it will ask bolt will be asking us giving us U some steps that we need to finish I don't see that now but always check before you prompt it um for next steps if it ask for example if you don't provide a super base key and a URL it will ask okay to use this application update these two and then it will work right so right now I don't see that nice it worked this time and uh it fixed something it navigated to O and as you can see it did not generate a landing page and a dashboard that's completely fine we can fix that in uh future prompts but for now I just wanted to update colors and follow the referenced image so this is a prompt and this prompt is not available in my um previous when I when I was building this so I will update obviously update the prompt that I'm using right now so let me do that here so that you'll have added in code block so it's easier to copy oh okay it's still updating that's good um once we have that this is more you know close to what I was imagining I like that and now we can go to the next prompt that we have prepared which is the landing page prompt it is I've shown you how I have come up with this prompt it's really easy straightforward so let's use the prompt that we have prepared for the landing page and it will um probably take a minute there to complete the whole thing now let's see what we can do and in order to make authentication work I will go to super base and there are mult so this is the page that we that this is the project that we created right in authentication you need to click explore o and I need to go to Providers and this is the email provider that has been enabled right you need to go to when I have have this confirm email option it is not um it is giving me errors it will not let me sign up so I am turning this off for the time being and once I know more info I will update it in next videos and why that's happening what else we can do uh all of that stuff so let's go back to Bol and see if it's finished with the creation it's nice created feature chat pricing card all the fun stuff okay you're brilliant AI partner for everything looks really nice it is much different than what we had earlier nice ultimate AI free 1 million nice it also gave me testimonials the pricing um perfect so when we have uh try this start free trial it's not going anywhere okay I know about to prompt so I thought doing it using a prompt without connecting existing landing page to authentication is a bad idea so what I would do now is let's let me go back to what I have prepared in terms of next prompt I had um okay yes I will update my own brand name before even this uh I would say something like it should be um you know add a professional footer social media links and copyright information also update the landing page to its position U it as an ultimate AI assistant with compelling copy so compelling copy customer testimonial social proof elements it's already um it already exists but it also should include a sign in button that is connected to um authentication so that's the extra prompt that I need to add let me go back to bolt and use this prompt so I included what I just said landing page should include a signin button connected to uh the authentication not worry too much about gr there but uh let's see what happens and it is creating a footer section uh which I believe will look really um nice and it's a really cool edition if you want to you know replace this link with with um your own website your own social media your own um you can do that you don't even have you can give bold okay this is the link to my Instagram this is the link to my Facebook this is to my YouTube this is for a form you can say all of that or if you want to do this uh you know more manually I would come here and if you go to in the components um if you go to where where is footer created uh if you go to footer link to this pound key if you change that to about a section of your own page it will update uh to show you a quick example I will do that real quick growth creators. a is my website and there is an about us page right if you if I copy this about us page and go back to bold.

New and if I paste it in here instead of the pound key and I um save it and in the preview it should update so AI growth creators features pricing all of the good stuff and okay it's not it it it is missing other stuff that's not good but if you click about a section it is uh it is now saying refuse to connect but uh in the in a deployed when we deploy this in an know production it will update so okay you can replace do do the same thing for all of the others and now we have we kind of have two choices we can either go back or try and further fix this and if I say sign in it is giving me the terminal uh that is perfect now okay what else do we got let's go back to we missed also update the earning page with the compelling copy um yeah let let's say this I shouldn't have deleted this previously I had it there for a reason and um let's see let once they update it we should be seeing a much better version of um what we've seen so there is new icons there is new blogs line chat there is testimonial so it is I believe doing a really good job right now and the thing with what we have the chat widget uh the demo chat. DSX is that is a really nice edition if you are indeed building a chat application but if this is voice obviously you'll have to you know try a different approach show add a video include a video demo video or something to um of your AI agent actually interacting with people so we are back with all the you know testimonials all the features and I am really liking this color how everything looks the H animations and stuff so this is perfect this is really good and we are okay let's go back to our bold and see let's build our dashboard after login it should have two sections AI assistant and AI nodes I will start off with the lazy way of doing things and I will show the proper embedding way also I will okay let's do two things one is showing you a proper embeding one for voice and the other one is the lazy be like I said let's copy this where did I get this URL from this is the lazy way that I'm talking about if you go to vapy where your assistant is if you go to wppi you will uh once you log in I this video is not about how to build AI assistance on bapy if you want that I have a 3-hour tutorial on this channel so if if you do please watch that but what I the advantage of using vapi is you can build this to you know to the extreme to your heart's content basically what you can do is you can go as far as in the advanced setting you can have uh a server URL that will catch the end of the call reports and each time it is done with uh the end of the call report they can send it back to web hook response to you know the superbase d uh super base um database that is saving all of this and you can really build amazing products just using this yes there is uh there needs to be you know create one assistant for every user if you do go that route or if you are using some kind of air table there is a way to you know set the user email so that all the even though we are collecting all of the end of the call reports in one air table there is still uh distinction based on okay filter all the reports all the the summaries based on their email address based on an API key whatever and only display uh the summary that is for them that is uh only the customers if that makes sense so we we won't be covering that complex AIS S I just want to show okay if he built this um assistant or it doesn't need to be an an existing one it can be you know a game NPC let's say and I want to create an assistant and once I have that let me see what the voice is because this cost is super low instead of cartesia I want to use 11 labs and I updated the voice and okay let me publish this and we have an NPC voice and it is a g character of Elina um some czy crazy crazy assistant here right so if we copy the demo link this is the assistant demo link and if we go to the demo what we would see is this is the page that would be uh that we see and this is a really goodlook interface right so what I want to do now is just copy the URL that it's here and we can go to to Bol and we can ask basically we can go to Bol and basically say um what is the prompt that I have created let me go back to this okay copy come back uh I will paste it I will replace my code my link with this this is super lazy way of doing things if you want to embed the web page itself this is what you do it should have two sections AI assistant have an embed it should display contents of the page and note section should let user enter nodes and save it to superbase database so once we see that we will see an actual embed also don't worry um okay let's see what happens it will create so dashboard page it is creating that it's really simple and now we have to do some things in terms of um you know it to make this work to activate kind of activate this database we need to add some code some run some code in uh super base SQL editor don't don't let that intimidate you it's super straightforward you just ask Bol do I need to add something to my superbase SQL editor and uh it should probably give you what the next steps are let me sign in um when I say sign in let me register first will register initialize registration okay if this have worked I should have uh I should be in already let me see in authentication what's going on if I have users yeah it is created just now I should be in it is not letting me in uh let's go back to bold the new refresh let me sign in with the exact oh okay uh one of two things might be happening because um wait I'll help you run command a complete [Music] dashboard I don't see a dashboard after authentication simple as that let's see what happens um okay now it's updating the dashboard access so let's not waste too much time uh we have what else do we have uh do I need to add anything to my SQL editor in super base this is for the note section ideally I should have done this uh as soon as we're done with this but uh it it doesn't go as planned right so let's see let's see what happens we have we should have a working dashboard oh okay it already signed me up okay it right now it has error fetching nodes right I am liking the interface I see the nav bar I see the sign out button um this is good so let's Okay create notes table it is giving me as an SQL code to run uh copy this SQL and run it in your super base SQL editor I will do that just that copy this and go to your you know SQL editor make sure you're in the same project I will paste it and I will hit run and success noos and notes stable you can see here if we go back to bold now it should have updated let go go to that dashboard we are not receiving an error that we are um that we've seen let's say hello let's see this is this will be updated Chan awesome it it does okay vapy AI refus to connect so this is good because this is happening um because we it will work this is because we haven't deployed the application yet we are not seeing it this is perfect I mean you can go ahead and start using it now couple of things before we go ahead and deploy this is we can update our you know we we have this application we need a stripe account we need to way to collect payments we need a way to you know let people update subscribe do all all those things right if you have that if you it is a lot trickier than it sounds I this is the stripe account that I have um and once you log into your stripe account once you create an account this is what you would see a new account right you need to toggle test mode on for this uh I don't want you to trying this on an original account I will copy this key um or or you don't even have to worry about Keys uh if you uh you don't have to integrate you know stripe within the application what I love about strip is you can create these products that you like U you can create links for each for example I want to create a $29 product Also let's call it basic or something and I you can describe this give it a lot of description test yeah let's stop with test and recurring payment you can do USD uh 29 like I said 29 right and we have monthly we need to add a product and the way that you you have these products right if you want to add this to um a pricing table let's say there is something called pricing table you need to click create pricing table and it will let you add all of these products I want to add basic to my list and add another price um sorry add another product it can be starter and add another product it can be Pro we have these three right if you want custom branding you can do so to too I like black and um I use this neon blue kind of color that goes well with what I have and I will continue and this is the confirmation page and for confirmation I will once the payment is done we I I want to do something else so do not show confirmation page I want to include my own um website once it's done for example I will usually this step comes after deployment after you know if you know which custom domain that you are going to use I would probably go with that right for example netlify DOA if you are if I know um that let's say so uh instead of tubular all all of this or you can have that right you can create this uh Instead This is a previous deployment of mine so once someone pays for this I will I want them to redirect to that page and what I love about strip is you have these customer portals where they can update their own subscription they can update their plan for example you get for $29 plan you only get uh voice and uh I'm sorry you only get chat or voice for 99 or 49 you get two instead of one so we can do all of that I will finish it for now and pricing table with three products I will copy this embed code and I will go to my Bol and I say I will uh I want you to update pricing with this embed and what this does is it will replace what we have uh the table we have with the new pricing and um this is important because instead of manually linking okay $29 product go here $79 use this link $49 use this link that is too much you can add multiple prices for each product for example if I edit this payment page and edit pricing table back uh let's go back and include a free trial that is there and include an option uh which let's say 21 add 21 as a new price um flat rate um you can make it one off or you know this is more ideal for if you're doing an yearly rate or something that you get 20 uh% off uh or whatever there is a lot of functions a lot of features that are available on um stripe so let's go back to bold and see whether it updated so if we go down again it is saying it's not uh responding it's not it it's refusing to connect it will work let me show you open and stack BL create a repo and make this repo private create repo the the reason there is a reason why I do this um when I first create a repository on my uh GitHub it will help me in one of two things it will help me update a code uh later if I go to netlify it will help me use their visual editor that's one and it will also help me add uh update any minimal code um changes that I see I will try to find something that I did just now yeah awesome and I will deploy this uh this is to show you that it's working that it's the stripe is working then um you know the the authentication is working and then once we log in we should be able to see the vapy and but also we we should be able to see our old nodes because the hello that we have added should be done by now I don't know why it's taking longer site not deployed okay cool uploaded published perfect we have the site here and obviously you'll you can update all the buttons you have the sign in and all the fun stuff perfect it's displaying perfectly let's see this is the 291 that we created I will update the test info again and see how that is working subscribe yes perfect it obviously you'll have to use your new site not the old site uh to make this work right so let's go back to our original site and try and sign in and initialize login okay um so it is stupidity on my part for not having it tested so let's sign out and sign in um I would say um so initial initialized login it was only working because we have uh logged in previously so it should already have all the details all the requirements from previous uh messages from us so it is still possible to use simple sentences like this the authentication screen is not working and B it should probably get it but if it doesn't we'll have to you know uh send in the message again let's see everything is in order once we sign in yes we can see that right and uh once we log in obviously we'll see this vy. AI refuse to connect and we see the hello that we have um Sent test test so in the next one we should be able to see um I don't want to make this video unusually longer so if you are wondering about how I am coming up with these embed codes and how you build an assistant on for example let's say vaapi or I will in the next section we will embit a chat widget I'd be using Vector shift for that I have already made tutorials you can just go back and watch them uh if you don't know how to build those things so I will be skipping um I will be skipping the development part and go right into for example Vector shift in my previous video I've built a portal which looks really nice and if I log in and go to my existing um portals for example you can embed any of this chat BS or voice boots or uh any search functions and all of that now to share this this export portal you can copy this portal link and embed the lazy way that we did or we can embed the portal itself we will copy that let's let me show you how a portal would look like so this is really nice you have a customer service chat bot that you can uh chat you I mean it will also save the previous you know chats that you had there is a voice voice bot Voice Assistant section that will let you interact with AI in the voice there is a customer support form section so all in all having a portal and multiple assistance at that is a tremendous value for your client and you can obviously if you go to The Branding Etc you can um change all of that if you go to there there is a um way to change your logo there is you know obviously if you want to uh go with the color that we have been using uh That Neon turquoise um kind of interface we can do that I am trying to see if we can edit the change the portal color to black but I have seen a lot more options when I was deploying the first deploying it the first time but um for some reason I'm not seeing it right now no worries I will just copy this embed code I will I will go back to bolt and I say existing components are voice section I want to now include a chat section in the dashboard with this embed and I will include the embed code here and I will paste and what this does is it will update this dashboard section with a new uh a chat section also and based on the you know user level you can either display one two um you can customize that further based on authentication and uh there needs to be few settings that need uh that needs updating in terms of okay uh Voice Assistant chat assistant this should probably work uh the reason I say that is is um it is a portal right and if you look at if you look at the actual uh window size and this portal window size portal is much larger than this little guy here what I would do ideally is I will ask them to select one of three options voice chat and a hybrid or something and then they can log into each uh thing separately so like I said this video is already long I still need to show you how I would connect this with GitHub Etc right so it will more of be um a direction instead of me doing the actual thing is if you go to um the super base and home let's go you're still in the SAS demo and when you explore authentication you go to Providers and there is a lot of providers here you know you know so let's say GitHub is a funny one right we are using GitHub a lot these days but Google uh phone Apple LinkedIn um they they still follow the simple Direction so what I would do now is they ask they are asking for a client ID client search ID call back URL and there is a doc section if you are you know um if you are are willing you can read the dogs you can follow the direction I what I would do is I will go to uh perplexity and I will ask I will try I'm trying to add GitHub to my super base authentication it's asking me for client ID can you help me set this up and it will it has given me step by step what I need to do I need to go to my uh GitHub account I need to create an app give it an app name homepage URL authorization call back so providers all of the steps and I did just that I need I went into my GitHub profile I I go to settings and the bottom one is developer settings and I created an application name I gave it a homepage URL I have the authentication call back URL that I have gotten from um this super base this URL and when I did that and when we update the application it will um right now it will show zero users and all you need to do is go to Bol and say um yeah my GitHub is functional update that so it will do so um I I won't be covering all of that in this so I have deployed this and if you go to the sign in and you can close it go back and let's uh let's make sure if the page is displaying correctly perfect it is working and if you go to sign in and we sign in with so when I initialize login nice okay as you can see this is this this is working uh so this is working you can interact with it you can uh have a chat let's see what Vector shift is doing oh nice uh this is not bad at all if I can update the color scheme that would be amazing which I am hoping uh it is possible when we first use it for example let's see we can minimize that and see hello yeah uh I mean we can do a lot of things we have uh the voice assistant on the portal as well we can go to voice assistant and have a chat with the voice system we can start speaking um there is also if you have a support questions you can do so so having portal makes a lot of sense than this and for this account we have added test test and hello this is perfect and for voice assistant we have this um I want to now since I know this is working I want to update this to synf flow right if we go back to synth flow and we can and create new assistant start from scratch I will select a widget and I will um so this is one of the features I really love about synth flow is they can we can ask AI to create a prompt for ourself we have been doing this for a while now but having it included in the app itself is good you can obviously play around this uh play around with this for a little bit I don't want to do that because this is not a synth flow tutorial uh let's um let's go to dashboard and update this assistant to match our branding right uh to do that I will go to configure and this green needs to be more like my blue and once we have this blue and I want to change the background color to Black and button color to that blue as well yeah perfect I like this I want to go to Bol I said I want to update the voice assistant side with this in ideally you'll have to you know um enhancing these prompts so that you can get the best version of it but I don't really care as long as we achieve the result right uh so we Let's test this one last time to see okay sign in uh once we hit sign in it will ask me for email password authenticating widget.

sin.