How to Master Lovable.dev (Step-by-Step Tutorial)

in this video I'm going to walk you through how to use lovable. deev which is another text to web app platform similar to bolt. new that lets you build MVPs and prototypes with relative ease while bolt is great lovable has some advantages that make it a lot easier to use for certain functions such as setting up authentication hooking up a database as well as even enabling payments through stripe which has been a bit painful using something like bolt. new up to now I'm going to start with a big picture overview of some of the key

Concepts you should understand understand when you're trying to differentiate between these two applications and when you can or should use each of them and then I'll jump straight into lovable to start building and showing these Concepts step by step instead of just going through a bunch of slides we'll actually do application right away so you can see how to connect a database how to enable stripe and how to build certain types of web applications that you can now embed in other websites as well I'm going to first Go full teacher mode and pull out a

whiteboard to walk you through some of these differences what level is and explain what superbase is the core database that it uses to actually enable all its functionalities all right so teacher mode activated I'm going to walk through the difference between lovable let's just capitalize that as well as bolt. new so let's make a little separator here and then we'll use bolt. new all right so on The Lovable side it's built on top of this database we'll call it a hypercharged or supercharged database it's called superbase it's even in the name super database and then

you have bolt. new built on top of I'm just going to call this web browser infrastructure so I'm going to call it infra I don't want to get into semantics and details cuz that's not the point of this video this is super high level just to grasp the core key difference here that is responsible for all kinds of different functionality differences so on The Lovable side you can imagine you have this database okay and then we have some rows and columns and then on top of this database you also have functions so we call this

let's say function one and we have function two these functions are called Edge functions okay so these Edge functions are what allows you in lovable to actually create a stripe integration to create a hook to a database to allow for authentication so these are let's say mini helpers that help the database do more than just house data it helps it actually be very Nimble and execute different workflows from One Core environment versus building a whole backend similar to what bolt does where you are hosting that somewhere and it's being executed while you're going through the

app it's a lot more lightweight in the capacity that you're using an actual database on the bolt side you basically have again with the actual web browser it's not built on top of a core database now they have added superbase integration recently so this is as a few weeks ago but it's not actually fundamentally designed on superbase or a database like superbase so the way this creates functions is wildly different from the way this creates functions meaning certain things are easier to do in Bolt certain things are easier to use in lovable it really depends

on the use case you're looking for now in terms of the llms that play or how the app actually fundamentally Works they're very similar in the idea that they both have an llm or llms actually orchestrating everything so with bolt you primarily have Claude 3.5 sonnet as the llm of choice whereas based on the documentation of lovable you have open AI you have Gina AI you also have uh I think also CLA or anthropic so I think there's a hodg podge of ones being used in lovable versus ones in bolt on you so this is

one core one that's being responsible for the bolt on new infrastructure and then you have a midly for lovable and I realized I should have made this orange but you get the point comparing some other features at a high level so both of these functions have the ility to go back in time that is my poor way of drawing that let me do that in blue actually so both of them allow you to roll back if things get hairy which you know all of these things are still experimental meaning at some point you will hit

errors it's almost a guarantee if you want to build a prototype or an MVP of value so that's one thing they share one thing that lovable has that bolt doesn't have is it allows you to select a specific element so I'm just going to push down the marker here so in the actual box instead of taking a screenshot of your actual application saying hey fix this thing you can actually click on the very bottom of your screen which you'll see an actual element detector where you can click on the screen and say this part of

the actual web page I want you to change it whereas bolt has a function that lets you automate basically the writing of a prompt it helps with the prompt engineering side a lot more which most of the time is super helpful and that's a feature that's yet to be in lovable itself both of them also connect to GitHub with level bolts kind of a oneclick button whereas with bolt you just have to do a little work to get there but it's completely doable they both actually use pictures as input if you wish so I'm just

going to put that in the middle here so picture and when it comes to using them for specific use cases I find that for now obviously these things change by the hour and the day that bolt. new is better for General UI plus ux so in layman's term it's nicer on design so has a better understanding of user interface and user experience whereas lovable has an advantage that you can render certain elements in a page that are tricker to do in Bolt And if that will make no sense but imagine you had some form of

weight list you were setting up and on that weight list you not only wanted to easily connect some form of database right to apply early or to apply right so this would be super base so I'm just going to put Supa but maybe you want to throw in a loom video or a vsl so you want to be able to embed something on the actual web page so imagine you want to have a video here right so if you try this and I'll show you an actual example of this as one of our first use

cases this will work pretty well on the first try on bolt it won't and it does get back to how both are designed it's not to say this is impossible but it's infinitely easier on lovable at least the way it's designed all right so that's enough yapping I'm going to ditch teacher mode now and we'll jump straight into lovable where we'll experiment with a few things you can gauge these differences in action versus me just speaking about them all right so before we even write our first prompt to create a very basic application in lovable

I'm going to walk through how to actually set up superbase which I've been speaking about non-stop the whole time so this is the actual website again there's nothing crazy about the actual app itself it is a database one advantage it has over a lot of databases is it allows you to store vectors and if you don't know why that matters if you say want to store certain VOR values maybe an input from a user in a way that uh an llm can scan and use as input vectorizing is essential so one key Advantage with superbase

is you could create an edge function if you remember that's a helper function that would allow you to take certain columns and create vectors out of them which are just texts and numbers that allow llms to process it and understand them so if there is some form of follow through in the application you want to create that gives you a certain Advantage so if you go here to product and you see here Vector toolkit you'll see that it basically lets you have a mini Vector database on top of your normal database which is why it's

really useful and it keeps you very Nimble in terms of the types of applications you can actually create so when you go in and you log in you'll see some blank screen and then you'll be able to create your first project so for the purposes of this tutorial let's create a project and one prerequisite is that you'd set up some form of organization on the free plan I believe you get two different projects for free and beyond that you have to pay a certain amount per month so let's create a new project and we'll call

it lovable demo and for this I'll use small or let's use micro so there is a payment here per month uh to be used so be mindful of that and then you set up a database password so I'm just going to set up a pretty simple one here and then you choose the region where your database should be hosted so I'm going to choose Canada since I am in Canada I'll create new project and this will take around 4 to 5 minutes so I'll just wait for this to render and load and you'll see here

it will say setting up project and once it's done you should see two buttons on the right hand side both that are green that tell you greens means go you're good to actually use this database all right and it took around 6 to 7 minutes I actually finish but now you can see project status and security issues are all resolved so I'll give you a very quick tour of superbase on what the features that you should care about are so if you go to table editor here this is where lovables is going to actually create

and write the databases depending on the application you're looking to make so you're going to see this populated once lovable actually knows what you're trying to build when you go to Edge functions here this is where a lot of the functions that you'll need let's say if you want to integrate stripe or you want to do different functions that are outside the scope of normal backend this is where it would be hosted and if you go to Project settings and look at Edge functions here this is where certain secrets are going to be stored so

when you set up your database for the first time which you don't have to do lovable will just know hey we need to create some form of database because you want to store XYZ information about the user or their preferences or whatever it's going to create some API keys for superbase here because it's going to be integrated with your infrastructure and then you can click on add new secret to enable things like openai or other llms to have their secrets actually embedded in the app itself beyond that if you are logging in and setting up

an account for the first time you're going to want to go to authentication and providers and pick which providers you want to set up out of the box for me personally because I like to spin things up pretty quickly I just choose email and I remove this confirm email and secure email change to make things a lot easier otherwise when you create authentication in the app it'll have to confirm the email and what happens is the confirmation goes nowhere because you have to set up what's called a redirect URL where it comes to here this

URL configuration so if you're just experimenting with this to see what's possible I would I just remove those features for now just to remove any headaches or friction from actually getting going so with that we can now use this database and we'll create our first mini demo just hooking up to superbase to see how that works so we'll go into lovable here and in here I will first click public to private if you start with a free account it will be public by default meaning if you go to featured or latest you will be able

to access other people's projects there and look at their chat history if you did want to make sure that all your projects are private then you would want to upgrade to their $20 a month plan that allows you to do that and one thing to do is if you want to stick to the free just to try this out be very careful not to put API keys or anything publicly available that could hurt you or your wallet just because you can theoretically go into any of these featured apps right and go through their history and

scroll up and see pretty much everything that happen in that conversation which is awesome if you want to be able to see some of the building blocks and examples of prompts that are more effective than others to build actual applications but not so much if you're putting publicly available information such as API keys or anything that can hurt your wallet that would be ideal so be very wary of how you enter certain API keys if you use public now if we go back up here we will say something very basic so let's create an app

that allows me to enter my top five business schools create a design that is futuristic modern and has moving gradients in the background that are minimalistic now I'm keeping this very basic just to be able to show the functionality so I'm just going to click here on private we're going to send this and we'll wait for it to do his first actions and this took around 2 minutes but now you have a very basic user interface that lets you enter goals so I want to make more profit you can see the little gradient behind the

scenes um let's do another one I want to hire many Allstars let's add that and I don't think save goals actually does anything because if we refresh the page because there's no database to store this information there's no what's called persistence so if I refresh this everything will go away because it's not tied to a user account so this is a good opportunity to show you how their native super base actually works so if you click on super base here and you go down for the first time you'll just need to authenticate into super base

and then after you'll be able to connect to whichever database you wish we're going to use our actual project we put together here which is lovable demo I'll click on connect and then it pretty much enters an actual request that says please connect my super based project lovable demo so one thing you'll notice about lovable is even when you get errors it writes a prompt that you can see to actually send it to the app to try to resolve the issue so you'll see here it says I'm now connecting to your superbase pro project yada

yada yada it says it's properly authenticated it stores real data and there we go it tells you what kind of edge functions you can use and what you can do with that so email notifications payments Etc so now if we go into our lovable backend we still don't have a database because we haven't told it what to store so in this case I'm going to say can we create a authentication with email and password that will allow us to log in and save our goals by account so again we're keeping things very basic here so

as this is actually generating the first time I won't actually cut I'm just going to show you even if you're not uh SQL Savvy and SQL stands for standard querying language which is a database language to actually create tables it is doing all the work on the front end here to create a table called business goals it came up with which Fields it should store so in this case it came up with ID which is some form of random ID that's assigned as a primary key that's basically the ability to create a very unique novel

ID for a user that is different from user ID which once in a while can be um null meaning it's non-existent if the user hasn't actually authenticated yet and goal text is what you'd actually save here once you add a goal and then created at would basically create a Tim stamp which is basically what time and what day was this goal created so one thing you'll notice is this thing called create policy and there's a lot loaded here that you shouldn't care about unless it becomes a problem later on the only time it becomes a

problem is let's say you have different user accounts and let's say it's a matchmaking app of whatever use case you need to be able to see and remove security at an individual account level to be able to see all the values from all the accounts in order to do the matchmaking um in layman's terms if you know user a has four goals and user B has three goals because of the security the way it's set up by default user a can't see user be's goals but let's say we wanted to matchmake these business owners by

their very similar goals we'd have to remove this layer of security to enable that again you can remove that for now until it becomes a problem so one thing that lovable does is it tends to ask for permission a lot so in this case it tells you what the plan is it says after you approve the SQL commands again SQL is the language that you create right to databases it will do the following so it'll create a UI a user interface with email and password authentication it will set up superbase to create the actual table

and then it will do some error handling meaning it'll set up some notifications to know um if the user hasn't signed up with a proper email or they haven't authenticated themselves it will have different roots to handle those scenarios so if we click on apply changes most of the time for something simple like this it'll say the migration has been applied successfully sometimes you'll run into scenario where it says it there's an error and it'll get this little notification on screen that'll say fix so most of the time I'll click fix two to three times

and then I'll intervene myself if things are starting to get a bit hairy all right so now it has the UI with the email and password and you can notice the font Choice here is absolutely horrific so I'm going to use this feature I alluded to before called select I'm going to go into this box here until it hovers so you can see this is a section this is just the text and as you go down it'll tell you whether or not you're selecting something that is editable so I'm going to click on this so

now it knows I'm referring to this part of the screen I'm going to say the font is awful please make it something that goes with the background and ideally throw some design on the page with Emojis so let's see if that applies properly so now you'll see it's edited the core font here and one thing I couldn't select was this lime green font so let me screenshot this and use this as input and say change lime green to bold white font I can't see anything all right so we got our first error here it did

change momentarily the font but then it said build unsuccessful so we have some error here I'm going to act like I don't know what it is I'm going to click on try to fix it and again sometimes this can be a loop that lasts two three times sometimes you have to step in one thing you can do is click on show error and see what the error is this might mean absolutely nothing to you but worst case you put this into something like perplexity and GPT and maybe you can nudge along what it should do

to resolve it but typically for something like this it's pretty straightforward that it should be solvable pretty quickly so I ended up getting a few errors here you'll see here build unsuccessful build unsuccessful so it for some reason couldn't realize that I'm talking about this specific email address so it remained green so I'll show you a little hack and I'm happy this ER came up so what I'll do is I'll click on open preview to new tab and even if you're not Tech Savvy you'll see exactly what I'm doing here so if you go on

and this is on Google Chrome you have the equivalent of this in Firefox Safari Etc if you go to more tools and you go to developer tools you can click on this icon and by the way this works on any website so you can actually look at the element of any website if you want to emulate it as well so you can see here as I'm going down I can see the name of certain elements so when I click on this it shows me some name so all I did is I copied this name and

then clicked on this Arrow went back found this copy pasted it if you see here all I did is I need to change this color to bold white I just copy pasted what the element name is from here as well as the second one and then I just said make it white and as soon as I did that you'll see here it worked immediately so that part was alleviated there so now if we close this and we set up an account for the first time and we'll do this and let's make some password and sign

up so in this case I just want to double check that we disabled authentication so if we go on authentication and then providers I think email went back to confirm email so let's take that off here and let's we can log in it'll even if we didn't confirm the email it will be able to log in given how it's structured so I'll just click on sign in let me try this okay so let's let's see um let's do this let's paste the error what's going on here so I ended up getting a few more issues

here that popped up and I tried to click fix and what happened was because originally our super base for some reason it reset so if you go to the the section I said authentication and then providers you'll see if you go back to email these are all clicked on so it did need you to confirm your email and because the email was not confirmed it was having issues so if I disable these now and I refresh just to make sure this took effect let me just do this one thing that I forgot to do is

after actually toggling these off you have to go and actually click save so that didn't help my case and just so I can start from scratch I went to here users and then the two users I made which is my prompt advisor email as well as the temp email I put together I deleted them from the database so they atically if I go in here now and I do Mark a prompt advisors and I create a password and I sign up right so I should be able to log in immediately because there's no confirming email

and now if I add a goal and I say I want to make millions as a goal and I add that theoretically that should update our database in real time if it's synced up in the proper way so how you can check that is if you go back to table editor you'll see now lovables created through superbase a table called business goals and if if I refresh this you'll see that there's nothing here so what I'll do is I'm going to ask it um so I was able to log in but it doesn't seem like

my goals are being stored at the account level so you'll see here in the message you came up with it said looking at the RLS policies so just think of that as security policies I noticed that while we have yada yada yada basically there's no permission to write and read from there so it basically wrote this SQL code this database code and I'm going to click on apply most of the time they'll say successfully so there we go so theoretically if I now have this View rerender and I add a goal it should add it

to the actual database let's sign back in and then I'm going to enter password and we have nothing logged in now right so let's do I want to make millions whoops let's do add goal and click on Save save goals okay goal saved so we have an error here so I want to see if the errors is associate to saving at all so it did save it so the error we got was for something unrelated so I'm going to click on show logs here um I feel like it's just not communicating in the correct way

but it did the right thing so I'm just going to click on try to fix it I won't hold you hostage until this resolves and I'll show you what it looks like after so it looks like we're in the clear now so if I say another one I want to hire unicorn I do add goal I click on Save goals and I go back here I don't even have to refresh you can see it's actually sync towards here so this is working now and if we log out our test can be let's sign up with

a temporary email so I'm going to go to Temp hyphen mail.org I'm going to create a new account okay I'm going to create another password I'm going to sign up and then let's just add a goal test goal and I click add this should save under a different user ID a different created ad and it should store separately so if I refresh here we should have oh one thing I forgot is to actually save the goal so that should be something I changed in the actual interface so for now let's click on this you can

see here we got test goal for a different user ID a different unique ID for the actual goal itself so if we go back here let's now step this up just a tad and say okay now I want to be able to automatically save the goal anytime I enter it without having to basically click save goals to click save goals in order to write to superbase this will make the oops spelling mistakes here will make the user experience more seamless so it says there's an autosave functionality now which is looks weird it looks like it's

infinitely saving things to the database so I'm just curious what chaos is happening okay um so I'm just going to take a screenshot here and then I'm going to paste it here I'm going to say we don't need this to autosave every moment like it is now just when we actually enter the core goal otherwise there's useless functionality Autos saving nothing all right so now it finished it didn't take more than just one little reminder and now it said something very important here so it said the business goals whatever file is getting very long so

one thing lovable is interesting at doing is it looks at all the AI code that's been generated and once in a while it will tell you hey I think you should summarize this down cuz it's getting a bit too meaty there might be too much fat in your code so you can actually say sure refactor the code without disturbing any functionality and then one thing to check here is when we did add goal now if we do test goal three and we click on ADD goal right this will automatically save so if I refresh here

this should say test goal 23 like you saw here so we're good on that front so I'm just going to send this here to do that code refactoring which again is just summarizing and leaning down your code to be as Nimble as possible all right so now that it's done refactoring the code we can say let's now rework the underlying design to look more like Spotify design but instead of green and black It's a combination of white and the current Violet we have so I'm just more so showing you how you can alter design by

giving it a reference point so Spotify is very well known in terms of the actual design principle so if you send that we should be able to change it so with a few different iterations at first it gave me a poor attempt here where it wasn't the nicest it was on a blank page I basically said try again make it a bit more sleek and nicer then insisted on the white background versus the purple so then I said make the background purple and the core Parts white so vice versa of what you have and then

we got something like this so we'll just settle with this for now I can see the font's a bit more Spotify esque um let's focus on integrating stripe which was a bit of a Frankenstein show using it in Bolt if you watch that last video I did a few weeks ago if not then we're going to go into stripe here and what you can do in lovable is say I want to integrate stripe so that anyone who wants to use this application has to pay $1 let's do1 199 a month so now what it should

do is it's smart enough and I think they've trained their back end to be able to tell you exactly what elements you need to set that up and what it's going to do if you remember at the very beginning of the video we now are going to take advantage of an edge function so a helper function to go and create some form of integration into stripe so here it tells you step by step you need a stripe account then you need a stripe account with a recurring price of $1.99 then you need your stripe API

key so what I'm going to do is I'm just going to go into a test account of stripe so I've logged into stripe and I've gone on test mode which is good because we don't want to spend real money on this and you can simulate actual payments so if we go to payment links I'm going to create a new one I'm going to say um business goals and then I'm going to say it's recurring and then it's $199 per month okay so we'll do add product and then we need a few things it told you

you need a price ID so I'll show you where to get that when you create your product you can go and then click on the product itself and then you can go click on this number and then if you go down you'll see here a new price was created if I click on this you'll see here the price ID if I click on this one you'll see this ID at the top right this ID is what we need so I'm going to take this and I'm going to go into lovable and I'm going to say

here is the price ID okay and then what else do we need we have the stripe account we have this the API key I think is going to offer to embedd it itself so I'm going to say ask me for my stripe API key so I can give it to you so this is an actual feature within lovable that it actually prompts you for API Keys instead of you just entering it in the chat uh I realized I spelled this wrong give it to you okay so let me just send this so so it should

Now log this price ID as our products price ID it'll now come back with an actual request for the stripe API key while I won't show the actual ID where you have to go to retrieve it is you want to click on developers here and on here you want to click on API keys and then you'll see a section that says secret key you want to copy paste that and then input that into lovable so in this case I'm going to enter my stripe key into this handy dandy button it gave us I'll click on

submit all right so now we get a subscribe to gold tracker from the get-go which looks very much like a normal software as a service application if you click on subscribe now we get an error so it's something with the actual Edge function so I'm going to let it figure that out on its own so I'm going to click on try to fix so now we'll get this page again and if you click on subscribe now within this actual view it will just load forever so what you want to do is you want to click

on this which is open preview to new tab you want to go here and then you'll get that view rendered again and then once you actually log in so let's do this let's log in right so now I have to pay going to click on subscribe now it says fail to start checkout process so I'm just going to tell it so I opened it and let me screenshot it to make it easier and then paste this so This should lead to the stripe page that then I can pay and then it sends some more request

back to the database saying hey Marcus paid so if if I say so I opened it and got this error when I clicked subscribe now um I think it has something to do with the edge function after two more tries I'm still getting the same error and one thing that I'm realizing is because I can't actually render this within the view itself this little mini view it doesn't really see the error so again if we go back to our old trick here if we open this in a new tab and if we go to the

three dots here and go to more tools TOS developer tools and then we basically try this again let's click on subscribe now you get this failure you now at least have some traceability of the failure so what I'll do is I will just take this and I will screenshot it and I'll say here are the errors right it has the same error here is the main error and one thing here it's invited me to do now after running this again and showing it that error is it says create checkout logs so if I go to

create checkout logs this is our Edge function for create checkout and you can see an error every single time so this is the full error message and if I copy this it says error combining currencies interesting um so if I go to this this is the core error should only be $199 USD per month shouldn't be an issue with the currencies so getting the error again this is what I'm going to do and then this is the whole point of this tutorial I'll show you what do you do when things go wrong so I'm going

to go to history here and then I'm going to go to right after we did the purple to White authentication thing sorry purple to White redesign of the app so let's go to that I'm going to click restore and now we've reverted to before chaos ensued and I'm just going to go in here I'm just going to delete some of these older subscriptions so let me deactivate this because I think maybe my test account is malfunctioning with all of these different uh actual payment links so let me just deactivate all of them and then we'll

create one from scratch and just for Simplicity we'll make it Canadian dollars because I don't know if it really wants me to be Canadian so we'll create a new one we'll just call it uh add a new product goals I'll just make it recurring $1. 199 Canadian a month and I'll click add product and then I will just create this link and it'll do the same thing um I will just go to goals I'll go to the actual price I'll go to Price ID I'll click on this I'll take that link and I'll go back

and I'll close this and I'll say Let's uh make it so that any anyone who wants to use the app has to pay in order to use it ask me for my stripe API key and here is the price ID okay we'll paste that so we'll redo that part and I'll go into my developers thing again and get an API key here we'll go to stripe secret key what add it and we'll see if this makes things a little bit easier so now when we take our second attempt here I'm going to open this in

a new tab we're going to get the Gold Tracker now when you log in you're going to see subscribe now which should take you to an actual account here and you should be able to subscribe so I'm going to use the fake stripe credit card credit card test so then I will put this 424242 and let's just go into here to make sure we have the right CSV so let's do copy and then let's paste here let's make up some random dates some random numbers and then I'll just put test and then some postal code

and we should be able to click subscribe here and then it'll quote unquote go through because it's a test function and once that test function actually functions we should be able to log in and actually use the app which you can see here so that's this part and I did want to show you one more use case before we sum it up so while everyone goes over how to build end to end applications using things like lovable or bolt or wind surf what people don't talk about is that you can build components with these services

that lets you embed certain elements in your existing web pages so let's say you're a small business owner and you want to be able to create some form of calculator to help with lead magnets or lead engagement and let people calculate the value of whatever it is that's relevant for your business you can actually create this mini embedded app in lovable and then be able to use it as an element in your existing application so we're going to create a very basic calculator and I'll show you how we can quickly embed that and it'll give

you some inspiration for what else you can use these text to web app applications for so let's say you have a cleaning business and you want to be able to generate a rough estimate for how much cleaning per week would cost for someone's house given the number of bedrooms the number of amenities Etc and they can do it self- serve so let's go here and let's say I want to create a very um engaging calculator for cleaning business for a cleaning business um it should take the number of bedrooms number of bathrooms uh square footage

of the home um and be fairly simple for anyone to use and then when someone clicks submit it will then send all that information via lead form and realistically The Next Step here would be to create it via superbase like we just did and log that in but I won't prioritize that since we know how to do that I'll just worry about the form itself um I'll just say don't worry about making the calculator submission um usable or functional create the shell where you can enter things and select from dropdowns Etc so we'll just click

on private here and then we'll click Send and then this is going to now send that request and ideally create that shell to show us exactly what that would look like all right and here's the first version of the draft of the calculator on the left hand side you have like we said the number of bedrooms bathrooms square footage type of service you're looking for to calculate the quote if you want a custom quote or something more detailed then you can put your name email and number again I don't care to make this functional because

I want to show you how to create what's called an iframe so you can actually embed it on an existing website so what I'm going to do is I'm just going to publish this and I'm going to click on private here I'll click on on deploy this will generate some link I don't care to make it a custom domain yet what you can do is you can go to a custom domain go to netfly buy an actual domain and attach it but we don't necessarily need to do that if we click on this now this

is the new URL that we have so this is important because this will be needed in our iframe that we need to embed in a website so now we can actually go and ask can you create an iframe of this calculator I can embed on my website and what this should do is create some very specific code that you can copy paste into a portion of the web page to actually do the integration and here we get the code it says if frame at the beginning and end so I know it's the right type of

information in SRC it has some placeholder for website that placeholder is this so we're going to need to put that so I'm going to just make my life easier and say this this is my deployed URL can you tailor the ey frame just to be extra lazy here so it should now make another version of this that just has that embedded URL just created input it in that iframe object all right so what we're going to do is we're going to copy paste this and I see it added one component here that immediately is jumping

out to me so in case you see it on your end make sure you remove it you want to remove this slash embed because it's pretty much meaningless we just just need the actual full URL of the app so if you put this in here which is html-only docomo this embed component and then once you do that it should be able to actually render and you can see here on the left hand side you can see the actual screen or if frame that we created with that core calculator where you can actually click and interact

with it so let's say we actually made a web page from scratch so let's go to chat gbt I'm going to use my Pro here I'm going to say create a beautiful um HTML CSS for uh a web page for a cleaning business you don't need to do this on your end this is purely just to show you how this would work assuming you had the website so it finished actually creating the website and if we copy paste this into the HTML online you can see on the left hand side here you have some formulaic

cleaning page okay so I can go back with some quick feedback to chat GPT I'll be like hey um I don't like this that's all good some picture here is not rendering we don't need that um I'll say please make the landing more minimalistic and remove the non-existing image here and I'll say please provide me with downloadable files to see this local all right so now I created an HTML file that we can copy paste as well as a CSS file if you don't know what a CSS file is it's pretty much responsible for all

the styling of a particular web page so think of icons colors fonts Etc so we can copy paste both of these into two separate files so that's what I did um I created a new folder called uh web page and then I called one index.html and the other one like it said uh styles. SS it's important you name them these specific names because they reference each other so if you name this Styles 2 without updating certain components of the HTML to refer to Styles 2 then they'll not be able to talk to each other and

then you'll have just a one page full of links and hyperlinks that looks pretty ugly so what I did next is now that I have them both in one folder I use this app called brackets it's free to use it basically lets you basically render things like HTML or css on your local desktop so if I click on this bad boy you'll see the actual web page as we saw it before now it looks a little bit more minimalistic and what we want to do now is go back and the whole point of this is

to take this and then I want to ask it where do I put this iframe to embed it in the middle center of my web page and then we'll put this here and I'll just remove the embed like like we did before and then it should give me some updated HTML not CSS necessarily to be able to make sure that embed actually appears on that web page all right so initially chat gbt gave us small Snippets of code where it said hey take this and put this wherever you want let's say we don't want to

deal with that headache I just asked it to Output the entire HTML and CSS file so I can just copy paste so it gave us these again I just copied each one went into brackets and now I just copied and then pasted same thing with the HTML I saved and then once I click Refresh on the web page itself you can see now that we have our normal web page and we have this embed from lovable you can see here we remove that and theoretically you can make this into one page you could extend it

you could play around with how it appears on the web page but the bottom line is now you have a smart app that you can even integrate gbt 40 or gb40 mini if you want to add some natural language components that you can embed on your existing website so the whole point is just to show you you don't have to necessarily build something end to end if you don't want to if you already have something if you have an existing web application you have an existing website you can also use lovable to create components that

make your services that much more helpful especially if you want 2025 to be a year of more leads more interest and whatever you offer this is a good way to actually get around that again without having to hire a web developer necessarily to do the thing for you and while I can keep building tons of different use cases on lovable what'll give you in the meantime are two different things to help you Kickstart using it or if you have already started using it and you've been comparing it against bolt this will help you at least

understand the nuances so a lot of the things that I mentioned today such as super Bas stripe um how this works compared to other Tex web app applications I have this full guide for you that will be downloadable in the gumroad link in description below and as usual in Mark fashion I put together a GPT to help you as a co-pilot so like I said before there are some nuances in prompting lovable compared to other text to web Builders so the idea here is that similar to my bolt. new GPT I put together more than

a month ago you can go on frame my project and you can say something like I want to build a web application that takes people's goals in their business and create a full road map who for them right and then this will try to create an application for you like the actual what the look and feel design it thinks is a smart idea any features you might want to consider and if you want to ask it hey can you create a succinct prompt for me I can enter into lovable then it'll do that as you'd

expect so there you go create a web application that generates business schoal road maps and it goes through the different features and then you can actually ask it questions like should I integrate super base at the start or later and it should have some logic from what I fed it so it's highly recommended to integrate superbase at the start of your project here's why and goes through some of the benefits and even gives you some boiler plate code in case lovable hallucinates for whatever reason but this should be really helpful for you to get started

or imilate what you already done in terms of your prompting capacity and if you wish to take apart my GPT and customize it for what you like to build on level you can just say what are your custom instructions let's open a new chat here and you click on oops new chat and then I'll just do this and say output in a code Block in markdown you can see all of my underlying instructions you can edit them create your own custom GPT of your choice whatever makes it easier for you try to load it as

much as possible but maybe the examples you want to tailor to your specific use cases feel free to do that it's all yours it doesn't hurt me whatsoever so enjoy if you found this video helpful let me know down in the comments below I know it takes a bit of trial and error with these errors but once you get past them you can now build things that otherwise you would have had to Outsource to a full stack developer and you can really prove a concept or a prototype out pretty quickly and even collect payment using

lovable. deev I'll see you all next time