Hello guys and welcome to this comprehensive tutorial on lovable in this video I'm going to be building an AI enhanced calorie tracking web app from scratch it will have authentication and open AI integration and I will even deploy it live to production so anyone else can access the website and a beautiful mobile responsive UI right so let's get started so the first step in building a website with lavable is the Prompt okay so this is my prompts so we have the different pages here the landing page the dashboard and the various features within this pages
and then we also have the meals page where we have like an input field where the user can describe their meal and then they press on analyze and then we will use gbt 40 to analyze the meal and then gbt 40 will return all of the nutritional values within the meal and then the nutritional values will be Added to our daily nutrition as we add more meals as a user and not only should you be able to describe a meal and then analyze it you should also be able to take an image of a meal
and then have gb4 analyze it in the same way and then we also have the chat page where we can chat with gb40 about our meals then we also have some styling guides and also this is important so we will start with the UI right now and make it look beautiful and then we will integrate Super base later on to add full stack functionality so we don't want to add you know any features related to the database right now so this part is pretty important make sure that you're explicit about the fact that you want
to start off with the UI then I also explain how navigation should work so I'm just going to press on Create and now lava ball is doing its thing now you don't have to have such a large prompt you can actually have a way smaller Initial prompt but in my case I do kind of like to give some context even though the AI is not going to implement all of these things at once I still think it's good to provide the context of what we're actually building and to describe the functionality that we want to
see exist later on once we have developed more parts of the application but to start off we just want the UI there we go and now we can see that lava ball has responded with some information here so It's telling us let me help you create a beautiful AI powered calorie tracking app this is an exciting project that can draw inspiration from Modern Health and Wellness app like my fitness pal and N with a unique AI twist the love ball AI is always excited which is very nice and we actually got a build error which
you know is quite unlikely to get in the first PR but if this does happen you can just press on it and press on try to fix it and then the lavable AI will most Likely resolve the build error and what a build error is is that something is wrong with the code which is causing it to not be able to compile okay and there we go and here we have our app so we just have to press on try to fix and this looks really beautiful and here we have the the main app and
here we have the landing page which is exactly what I outlined so now once we have this General structure we want to integrate our database and for that we're going to Press the super base button up there but before we do that I actually want to give some additional context to why we do things in this order so I'm going to open up exol drop which is a nice way of visualizing things so another thing that you can do with prompts in lava ball is that you can take images so you can actually take images
of different Des signs and then you can include them in the prompt so what you could do is that you could use design your app in figma And then you can just take screenshots of your figma design and include that within the lavable prompt and that way you can be more precise with kind of the design that you want inside of lavable but in my case my prompt was very comprehensive so I didn't do that but if you already have a design you can just take images of the design and then include those in the
prompts is make sure that you take multiple images such that you get multiple highr images to Include within the prompt and not just one image as that can actually make it harder as the the quality will be lower so essentially when you're building a web application you can kind of think of it as building a building you want to start off with the scaffolding the structure and then you can move on to the layers on top of that right the the details the functionality so you kind of want to start off by just planning out
the web app right like what type of user Experience do I want what do I actually want my web app to be able to do right and I already know that and I included some of that in the initial prompt so I want it to be a calorie tracker and then you kind of want to create the pages so that's like the first step of the scaffolding right this is like the planning board and then we have creating the pages which is the first layer of scaffolding and then we have creating the database schema so
we have already Created the pages the pages are pretty empty right we don't have any of the functionality and that is because we want to do this in a step-by-step manner such that we don't come across any errors or problems so the next step is to create a database schema and you don't actually need a database right you could make an app which is totally local right where all of the information is just saved locally on the user's machine but that won't be as good because then We can't actually use external resources that require us
to have a sensitive information and in our case we want to make API calls to open Ai and because of that we have to store an API key and we will store that API key inside of our back end where it will be kept safe but in our case we do want to sustain data outside of the user's local machine for instance we want to use to be able to log into his account from his mobile phone and then have access to all of the Data that he has saved from his computer and the only
way to do that is to actually save that data somewhere outside of the user's computer if that makes sense so we got to save it on on the cloud or the server and that is why we need a database and we also need the database and the backend functionality for some other parts of our apps as well but I will get to that later so to connect to the database I'm going to press on this superbase button and you Do have to make a super base account first so you go to superb.com and create an
account uh they are one of these backend providers so they will provide us with a database and a place where we can store data once you have created your superbase account you can create a superbase organization and once you have created an organization within superbase you can create a project so I'm just going to create a new project here I'm going to call it AI calerie tracker and Then I'm just going to create a password Here we can select servers I'm just going to stick to the server right here in Frankfort in Germany yeah it
doesn't really matter in my case this is just a test app but if you are uh building a real application you actually want your servers to be close to the users but it's also very hard to tell where your users are going to come from uh most of the time and there we go and now we can go back to lavable and we should be able To see our project right here so here we have it AI CAD tracker so I'm just going to press on it and then I'm going to press connect and now
La ball is telling me I'm now connecting your sub base project to gather your datab Bas structure tables and security settings this may take a moment and while that's loading I'm I'm going to go back to super base go over to authentication go to providers so these are the various authentication providers the various Ways in which we can log in to our app that we're building the email provider is the default one and I'm just going to toggle this such that it gets turned off such that users don't have to verify their emails each time
they create an account within our application and then I'm just going to save that so that just to make things easier while I'm developing so here we can see that lavable has set this up it's still loading a bit and there we go now it has Finished loading and now it's telling us the various things that we can now do when we have a sub based connection so we can create a user accounts so we can add authentication we can store data we can even make Edge functions which I will explain what they are later
on so I think a good first step to do once you have connected superbase is to add authentication because you want the users to be able to store information so it makes sense to First add Authentication and then add the ability to store information such that you can actually link the information information to the user which has kind of added the information in our case the information will just be a meal right like you know two eggs or maybe two blocks of tofu or something so I'm just going to write add authentication what we can
do as well is that we can specify how the authentication should be added right like it's going to add the Authentication in a totally normal way but the question is how do we want the authentication flow to look like do we want a sign up page to appear when we press get started or maybe when we press sign up lavable will probably automatically create some really nice flow for us so I'm just going to send this but you can be more precise about this and kind of describe the functionality that you want but most likely
what will happen now is that when You press get started or sign up you will get to the sign up page or maybe the login page and then maybe you can select another page and right now we can see that lavable has created these SQL commands or this SQL code and SQL code is a way to describe your database schema programmatically right so it's the most you know common way to create a database and in our case we don't have to worry about that we can just press on apply changes but it's actually fun Because
now we will be able to see these changes within sub base so if we go over to table editor and we wait for these to be applied and then maybe we press refresh we can see our tables right here so profiles and then we can see different properties in this profile table we have ID we have the username the Avatar URL and we have these different things and you can think of this as an Excel spreadsheet right so if I go over to a sheet. new and I open a Google sheet it's very similar it's
called a relational database and the reason why it's called a relational database is because we will actually relate the profile tables to our meal tables such that we can link a user to an actual meal right so in our case we want a user to be able to have multiple meals we can also do it the other way around like a meal having multiple users but that doesn't make much sense but you can do that and that is why these types Of databases are so powerful because you can do all sorts of relationships within them
but of course we don't really have to worry about that because we have lovable and lovable will use handle all all of that stuff for us so if you wanted to do a meals to user uh you know relation we could do that we have to tell loable but in our case this should be good so now we get to the login page I'm going to press on sign up so that we can create an account and then I'm just Going to create a test account so I'm just going to do test gmail.com and then
sign up and here we are inside of the app so now once we have added that we can do some other stuff but before I go through that I actually want to show you guys a feature so we have this feature called custom knowledge which allows you to add a knowledge or kind of context to the AI and this context will always be in The Lovable ai's memory so The Lovable AI will always remember the Context that you put in here and of course the lovable AI has access to the chat history but if you
chat a lot and you have a very long chat history then The Lovable AI will start to forget get things at the top of the chat history so if you want to sustain some information about your project then you can put it right here and in my case I might just want to put kind of the the general guidelines for a project so I'm using this font and I'm using this color theme And then I always want it to be mobile friendly now lavable usually makes your project mobile friendly by default and you can check
that by pressing this button right here and you can also go to this preview URL which is URL that you can go to and see how your app looks kind of like for normal browser and then you can right click and go over to inspect and this kind of works on all browsers and then you can change it like this you can actually also see the code Over here and you can also see the console but you don't have to worry about those things all right so I'm just going to save this custom knowledge like
so and now I'm going to implement the actual functionality okay so the first page I want to make is the meals page so I'm just going to write make it such that we have an input field where we can Des scribe or meals and then have four nutritional values that I can add to the given meal and then I'm going to list Calories carbs protein and fat and then have submit meal button to the Daily meals and then we also want to display these meals so I'm just going to write and then display the meals
we have added during the day underneath and of course save this data to the back end and then I'm just going to send that a very nice prompt now we can see that lavable is writing the tables again so I'm just going to apply those changes while lavable has finished loading there we go Apply changes and yeah if you want to get technical you can read this and you can see that we're creating the meals table now and we can see that we're kind of referencing to the user and that way we get the relation
going between the meal and the user now while we're waiting for this I can actually quickly just explain the credit system on lavable So currently this might change over time where we have the starter plan the launch plan the scale one plan and The Enterprise plan so with these plans you can kind of select one which fits you the best and they have different limits on them and the reason why we have these limits is because each time you send a message allowable is actually enduring a lot of costs because of the enormous amounts of
computes required to run these large AI models so that is the reason why we have the the pricing in the way that we have so some ways in which you can actually make sure That you save upon your credits is to be very precise with your PRS it's also to kind of follow this step-by-step process where you're very conscious in the sequence that you implement things right you can kind of think of it as you know building a building like I said before you start off with the scaffolding the structure and and then you move
on what you can also do is that you can edit the code manually but that can be quite unintuitive but if you really want to Save on tokens you can do that right like for instance if it's a very small change then you can use edit the code yourself like for instance if you want to edit a text and to do that you go over to edit code and then you connect your GitHub account and then you press on transfer GitHub repo and then you can go over to your GitHub account right there and also
by the way we can see now that this functionality has been added if we go over to the GitHub account but If we create a repo like so and then we press on edit in vs code we can open this little code editor in the Chrome browser or in any sort of browser and then here we have our codebase and this is another great thing about lavall is that you own your code you are in complete control over your code if you want to you can just take your code and move it into any other
code editor you're not stuck with lavable which I think is really great so in our case I'm Just going to go over to the meals page and we can find the the text so what you can do is that you can just take the text and then you can search for it and then once you have found it I just press command F we can just type like explanation mark and then we can go over here and then we type something in this will will be our message after each update that we make inside of
GitHub which is the service that we're using we can write something like updated the me Text and then we can just press on Commit and push and then that will be reflected within lavable so we can see that we have this thing called external commit which means that someone else or you you know added something to the code and then that's reflected within lavable which I think is great so you can go back and forth with between GitHub and lovable all right great so now we can describe our meal here so let's just say two
blocks of tofu let just add some Values here add meal and we got this error so I'm just going to press on try to fix to see if we can resolve this error now one thing that you can do when you are thinking about adding some sort of feature is that you can consult with Laval before kind of implementing the feature if that makes sense before telling Laval to implement the feature and we actually have an experimental feature for that called chat only mode and the way that you would activate that So you go over
here and then to account settings and then again to account settings and then down here we have a labs and then you just have to toggle this right now I actually have it toggled but yeah you move it to the right and then it's toggled and then you can go back over to lavable and if I go back to my project I can uh press here and I can go to shat only mode uh so that's a pretty cool thing that you can try out as well if you want to kind of Plan ahead of
what you want to build okay so now this should work so if I now type two blocks of to and then I type in the calories like so and then I add meal and there we have it perfect and now if I refresh because it should be saved on the server it's still it's still there and then I can go over here and I might have to log in so let's just log in and then we go over to meals and there we have it now you can actually store this meal locally as well right
right now We're storing it on the server but you can also store it locally within your browser and then if you kind of refresh and stuff it will still be saved but now because we have stored it in our database on super base we can actually go on our phone and then go into you know Chrome and go into the web app and we will see you know our meal over here which is fantastic and now also this is quite interesting fixed the RLS policy so when a user adds a meal that's adding Something to
the database and then once we go into the website we're reading something from the database it might be good to do some visuals right here so I actually use this for for another video but you can imagine that we have our website right here with our pages and then we have our database right here each time a user on the website and it's logged in we're fetching the data from the database and we don't want one user to be able to fetch another users data Because that's like a security issue so that is why we
write a row level security rules and lavable actually does this for you so lavable writes these lowlevel security rules over here within these SQL codes so you can see right here set up row level security Rule and yeah you don't really have to worry about them right now but it's really nice that lall also does that for you and sometimes when you get stuck in in one of these update database scenarios It could have to do with a roow level security rules and in that case uh you might want to try out and use prompted
make sure to check the RLS rules but usually lavable just catches that itself so you don't have to write that in our case that is what happened lavable figured out what the issue was but in some case you might have to nudge lava ball a bit so that there is just some additional tips as well providing you guys with all the sauce right now now Now let's actually make it such that all of the data from our meals are displayed within this page so what I'm thinking is that we can have like a circle diagram
like this one like a circular progress bar so I'm just going to take an image of that and copy that to my clipboard and then I'm just going to write let's add four of these four of these round progress bars make them fit the new Tre AI theme so that seems to be the name of the of the web app that lava will picked Pretty cool and put them above the meal description let's add that and hopefully it knows what I'm referring to so I want four of them uh because I have four properties right
there and if you ever are unsure kind of how your database looks like you can go over to super base and they actually have this very you know we have this one right but they also have a very visualiz very nice visualization thing so if I go over to database I believe yeah there we Go and we have the schema visualization which is very nice I think I think this is kind of beautiful and you can see all of the properties and stuff and this is good for getting kind of a context of your web
app yeah and here we have the the progress trackers so I don't actually think they look great they look kind of I think they look very bad actually so I think the keyboard that I used was round the progress bars that might have been a bad description so I'm Just going to you know try to rely more on these images so I'm just going to take an image uh let's see here so I'm going to take this image and then I'm just going to say make it look like this image outline that gets filled in
with orange now in some of these cases when you want to use specific kind of Graphics or shorts perhaps lava wall will actually use a package for you so it will automatically select a package and what a package is it's kind of like A bundle a pack of functionality that other people have written and published openly such that other people can use it in their web apps so a lot of the times people use a bunch of packag within the web apps right like it would kind of be kind of be unheard of nowadays to
build the web app without using external packages so many of these web applications have like hundreds of external web apps but these still look kind of bad I can see okay I can see What what we're going for here but I'm just going to make it do not make it be like a clock make it be like progress bar with an outline I see what you are going for but I don't like it make make it more like let's see if we can find a better image with like multiple here this one is perfect kind
of like this and then I'm just going to write you may have to use an external package for this not sure I'm just going to nudge it a bit right you can see the Nudging going on here so we're saying you may want to use an external package so if we search up like progress bar that's kind of you I and then mpm so mpm is kind of the this website right here but it's it's called the no package manager but MBM is essentially the kind of thing which websites use to manage packages essentially there
we go so it's better to just yeah most of the times it's better to just let lavable choose the package and that way we also make Sure that lavable has knowledge of the package if we used tellable to use some random you know package online same thing if we used tell it to use some random API on line lavable might not actually have any knowledge of that API and then you would have to include that within the prompt or within the custom knowledge of lavall but yeah but in my case here lav ball you selected
this one and it looks perfect and it also told us that it's using this package right here Which looks great I think and maybe we can add tell it to add some icons as well I don't know how big of a difference that it's going to make but I think it will make it look a bit more beautiful all right so here we have some icons okay I think this looks really good we have some icons the protein like an egg and the calories is fire this looks really nice I think and then we also
have this message right here note the me.txt so the file is getting quite Long 165 lines so when we're building web apps we actually want to make sure that our files and our components are small and manageable you kind of want it to be like you're building Lego blocks in a way and that is why we have implemented the functionality which is that lavall tells you when a file is kind of getting too large and it's highly recommended to then use allow lavable to refactor it so we can see that it will actually tell that
would You like me to help you with refactoring it and then I'm just going to write yes you can be Factor it and that way our code will be more manageable and scalable and it will be easier to add more features so I highly recommend doing that and I can actually show you guys this kind of a component structure by using the select tool so the select tool is a way for you to select certain parts of the web app to ask lavable about right so you can go into this part And you can select
it and then you can ask LEL about that part and you can be like enhance this or change that which is kind of easier in certain scenarios uh where you kind of want to be precise and you don't want to have to describe where the component is located and when we hover these things you can see that if I hover this div which div is kind of a container we can see that it's actually hovering all of them and that's because we have one components which Might be called I don't know like nutritional short or
something and then it's used multiple times with different values and that's a way to kind of make the code more scalable right you don't want to hard code it for each of these values instead you have the data and then you have the structure and then you connect the data and the structure and you map out each component and that makes it way more scalable which is very nice but in our case we don't want to Use the select tool right now instead we have we want to test this out so if I write something
like two eggs and then I add some values to this like so me we can see that this gets updated uh very nice with an animation as well okay so now we want to make it such that we can chat with our meals which is this page right here so you can see that we're kind of going Page by Page and doing this very methodically which is which I think is highly recommended and helps a Lot at least according to my experience so we're just going to go over to the chat page now and work
on that so now I'm just going to write super nice prompt here now let's work on the chat page let's make it such that we can chat with our meals that we have eaten during the week we want to chat with an AI from open AI in our case we want to use GPT 40 and this is pretty important specify the model or it's not super important but if you're going to use images you Have to make sure to use an image model now lav will probably select an image model automatically but it can be
very good to make sure that you're using kind of a recent openi model so you can kind of search up you know best open AI model and you will probably find something I just recommend using gbt 40 and this is kind of how it's spelled and I'm just going to send this and we might already have some like context over here about what the AI Should give us it should kind of give us some a nutrition device and maybe meal planning and recipe suggestions and we can tell lavable that we kind of want to prompt
the AI such that it gives us these tips of course we will always be able to ask the AI but it can be good to kind of prompt the AI to in buub who's like a nutritional expert who's an expert in that field but yeah but here we have the chat and we can see that we have to add the API key and the reason Why we have to add an API key is because this is not a normal kind of function that we have added now this function that we have added which calls upon
open AI is actually being written inside of a cloud function so if we go over to super base right here and then we go over to Edge functions they're also called Edge functions you know all of these Services they call call it different things but we have this Edge function right here and we don't really have to worry about This but I think it's good get some context so if we go over to our visualization right here we can see that we have Edge functions and in our case we want the analyze me functionality and
we also want the shat with gb40 functionality then we can imagine that these are two different Edge functions and the thing with Edge functions are that they're ran on the edge right they're ran on the back end it's like a fancy word where describe an a backend Server being hosted close through user so if you have Edge functions they're kind of distributed across the world such that the user has like a fast response time to the database actually Edge functions are used ways of running code in the back end and they're also called endpoints and
Cloud functions and the reason why we don't just want to run this functionality locally like we do with all of the other stuff in our web app or not with all of the other stuff But with kind of the the UI when you press around that's happening locally right the the the program and the the JavaScript and the logic within our web app like most of our logic is located within the front end but the reason why we want this logic to be in the back end is because we will include our API key and
our API key is a way for open AI servers to be able to know that the request is coming uh from me and you can imagine that if other people had my Openai API key then they can actually make requests on my behalf and that can cost me a lot of money if they you know Ed spam requests so that is why we have this on the back end such that the only way for people people to kind of interact with open a with my API key is through the website so they're still you know
interacting with open but it's indirectly we're using our server as a proxy and that way we don't leak the API key so now we can kind of verify okay is This a paying user and that way we allow the user to use my servers and use all of the the services within the web app and also for this endpoint to be triggered so you can imagine that La bable might you know have something in this endpoint is the user paying L might check that and if the user is paying then it will allow the quest
to go through of course we haven't added any payments yet but you can imagine that lavall is already testing if the user is Signed up I believe lavall is and we can actually double check that but either way so lavall has automatically created this Edge function for us and now we're going to add the API key to the edge function so you don't just want to write the API key here that's very bad you instead want to write it in the little popup which occurs such that it's inserted in the edge function and not just
saved on the front end right if we type it right here it's actually Publicly available uh if we have a public lovable account because then other people can see your project and stuff so we want to you know add it right here and of course if you have a paying lovable account people won't be able to see your project if it's private I believe this project is actually public so if I go over here yeah it's like public I thought I would just cover this real quick so I forgot to do it in the video
but when you create a project With lavable it will be public by default which means that anyone can have access to your project within lavable and look at your chat history and kind of your code base as well and and even remix it so if you go over here and you press on remix projects then you create a copy of the project that you yourself can build upon uh you want to actually copy the super base instance so you will still have the super base be connected to my superbase instance or database Which means that
if I like update the database it won't be synced to your front end so you probably want to resync it and create your own subbase instance if that makes sense or superbas database but yeah you have access to the chat history so I thought I will just make this one public uh so you guys can have access to it and I will link it in the description so if you guys want to go more in detail you can you know check out which prompts I written and stuff Like that uh so right now I have
it on public and then also for the API key I prob we just mention it so right here they of course will not be exposed to the actual uh people viewing your project if anyone were to view your public project because you're adding them uh in this spe special you know input field right here they will be safely stored in the back end but if you if you do type them in chat then yeah if your project is public then people will Be able to see those so yeah another reason not to type them in
in the chat other than you know not you know exposing them on the front end uh but but yeah either way if you want to change it just go over here you do have to be on the starter plan to be able to create private projects uh and then you also yeah so you can change it over here uh or you can change it you know once you have created the project uh to a you know a private project as well I'm just Going to go over to open Ai and then I'm going to type
dashboard and you will have to create an openi account developer account and then I'm just going to go over to API Keys create API key calor app and then create secret key I'm going to copy this and then I'm just going to paste it in right here press submit and then we're going to send another message to loable telling it that we have submitted our API key but I believe it should work now so if I type Hello we actually get an error so fail to send message try again so I'm just going to tell
loable at that it did not work and then lava ball I will hopefully fix it but we can see here that it's actually updating the code a bit so let's just wait for it to update and let's try to write something again hello let's just say we still get an error because we don't know the issue I I actually have no idea what the issue may be if you are technical you can press Here and you can actually see the code uh but yeah you don't really have to do that you can tell all what
the issue is and kind of the the thing that you want to see to to happen and sometimes you have to have a bit of grit to get it to work some more advanced functionality but essentially the best method of getting things to work is to be very clear with the desired functionality that you want and be very clear with what's actually occurring such that Lavall can help you debug so now we have a build error so it will mostly most likely not work but maybe it will let's see oh there we go it seems
to be working now actually I forgot about telling lava ball in the prompt that we want this AI to have access to our information so I'm just going to tellable that nice now it works and the reason why I tell it nice now it works works is because I want to clarify to lavable that the thing that I tried to Implement now works right so I'm not just doing this to be nice I'm doing this such that to to confirm that what I was trying to implement now works and now we can move on so
it's it's a way to to kind of segment different things to move on to the next step uh to have that logical process I should I should name this something but the the the kind of development you know stages if that makes sense okay either way let's now make it such that the AI shat Has access to all of my meals during the week so include all of them in the prompt so kind of on the back end if we were to kind of get an overarching overview of what is going on we have the
Endo we have the chat with gbt end points and then we need to retrieve all of the data from the database or not all of the data but the data for the week so you can imagine that we have the two cups of tofu right here and we want La ball to implement the functionality that Takes these meals and include them in the prompt so you can imagine that we have this prompt right here which is called you are nutritional expert or something like that and then we also you want some Dynamic values in the
prompts and the dynamic values are going to be the users meals which change all the time this is kind of the flow you don't have to worry too much about it but you can Nodge the AI to utilize that flow if it does not work so let's just type Hello what have we got an error I'm going to press on try to fix and if you guys want we can see here the kind of logic so we can see here that we were're getting the super base client and we're getting we're kind of doing a
query to get the desired data and we see that we're making some sort of I think yeah some sort of filtering here but you don't have to worry about this too much okay so let's try this again hello what have I eaten today okay I'm just going To take a screenshot of this and send this to lavable such that lavable can see it does not have access access to my meals please fix so hopefully lavable can see the the issue what you can do also if you're technical is that you can go over to the
to the logs right here and you can kind of see the logs for the edge functions and uh yeah what logs are is yeah they're used the kind of the the data that you choose to display so you can kind of debug we have the message That we're sending to opening eye here okay let's see if lavable has debug this so let's wait for it to load okay and let's try this let's just copy this message to make it easier it still does not work and I'm just going to be more explicit make sure that
you are including all of the meals for the week for the user that is logged in and making the chat request in the prompt to gbt 4 right so I'm very explicit you don't have to be this like detailed Oriented you could probably just say it does not work and just kind of say that over and over again but it can be uh beneficial to be more more precise but sometimes you can't be more precise right you don't actually sometimes you might not know what to say to lavable and uh and that can be can
be frustrating but then you kind of just have to have a grit and just you know go through it let's give it this try so hello what have I eaten today AI does Not know what I have eaten make sure to include it in the user message or the system prompt right so when you're using these llms you can include the context within the system prompt or the user message so that those like two different things of providing context to these AIS so let's give this a try what have I eaten today let's see yeah
and this works now okay perfect so sometimes you might have to be more clear where you want to include the context the dynamic Data in the prompt of course I'm doing something very precise you might not be implementing like AI functionality but in our case that helped to actually include the context within each user message and I know we're kind of you know in Inception right now we have an AI the loable AI building another application using AI which is very you know kind of confusing but it's it's very very cool that an AI can
add the AI functionality within a web app but now I Think this is fine I think this looks good uh so let's uh move on to this functionality right here now I want to go over another feature so I'm just going to do something very weird here so I'm just going to make the background color green I'm just going to send that this is going to look horrible but I want to send that to display one of the features that we have on lavable that I think is very cool so we have the you know
select feature but then we also Have the revert feature so if I used you know tell lavable to do something that I didn't actually like we can just press the revert feature and that way we can save upon credits then we don't have to tell Lao to revert it and this is also useful if you're like implementing a feature and you're kind of struggling it can be helpful to just go back to a point in which in which you hadn't actually implemented the feature and then you can try a different approach Though note that when
you revert your database schema changes are not reverted so these SQL changes right here will not be reverted and that can mess some things up and we're actually working on making it such that those are reverted but here we can see now everything is green but if I press the revert button then everything will go back as it was before now I want to add some AI functionality right here so I want it such that you can analyze your meal once You have written the description of it and then in llm instance right a large
language model an AI will analyze the nutritional value of the meal right it will do some sort of estimate based on your description so I'm just going to write that functionality so now make it such that we can analyze meal by pressing analyze button button or maybe estimate button which will be next to the the meal button maybe you can split the meal button in half that makes sense Visually okay this is not a great promp but I think it will do so we have the analyze meal button I'm just going to take this image
just to be super clear right so you can do this if you want to save upon tokens you can do like analyze meal and then we have the meal we're going to take an image of this and now we even want to add some more things so that's the UI but how do we actually want this to work we want to use CBT 40 for this and we also want to accept Images paste in images to the input field or like press on an image icon to upload an image if an image is uploaded then
you don't have to Pro provide description if not so you can do image or description or both so you can do image or description or both gbt 4 should pick a description for you if you only provide an image and nutritional data should be automatically inserted within the input Fields if the user has manually thir it and then the user can Press on add me the words to add it to the Daily stats I think this is good but let's also write and this is pretty important so each time you want form mathod responses from
open AI from gbt you want to use something called function calling and this is something that essentially these llm providers kind of came up with so of course a function in programming is just like a piece of functionality like it runs some code but a function calling you can Imagine also is just you know calling a function so in the L l space function calling is actually used getting formed responses from these large language models right so if you tell laal to use open AI function calling to get formatted response from gbt 40 then it
we actually know what you're talking about and we want to be explicit about this because we want to use function calling to get formatted responses from gbt so we can kind of you know add them To our actual logs the default behaviors of these LMS is to chat right so we want to be very explicit that we want to do a function call because we don't want to chat with LM right now we want to get a formatted response and add that to our database so I'm just going to tell it to use opena function
calling to get formatted response from GPT 40 make sure to include the image in the users prompt and of course also the description and then I'm just going to send that and That was a very long prompt but I'm just going to try that out because it can be can be good practice to write these long promps and it is totally fine to do long promps and I would you know recommend it as a way to save credits but if you want to implement multiple functionalities at once not on kind of describing one Function One
feature but if you're implementing multiple features at once it can be quite difficult to do that in use one promp and then I would recommend Breaking it down kind of like we with did with the different pages but now we kind of have this this one functionality that I think can be done with one prompts so I'm just going to try that out so here we have the the code and we can see here actually that we have the function here so if you're interested we can see that we have the function the function calling
and then we have the different kind of properties that we want to derive from 40 so let's give This a try let's just say like two eggs I'm pretty sure two eggs have actually we want to leave this empty and then let's press on analyze meal 12 protein okay and yeah I think this is correct I'm quite sure so if I if I search two eggs and then like maybe nutritional value nutrition yeah it has yeah 12.7 protein according to this website so it's actually pretty accurate now we can try to do an image as
well so I'm just going to find an image of some tofu very Healthy stuff here tofu meal and I'm just going to take an image of this to I'm just going to paste in the image right here so we can't actually paste in an image yet so we will have to just select it right here so there it is so open and then let's analyze it we want the description also of it so yeah we got a description and we got some values and meal and there we have it and it updates the screen perfect
now we could make it such you can just paste in the Image but either way this this works fine so yeah this is perfect now we can you know add images of meals and we can also add descriptions of meals and if we don't have a description and only an image we will also see the description right here and we can also make the images a render on the screen let's now add the dashboard so now I'm just going to write let's now add the dashboard page work so we want a short of the weekly
and the Daily Progress let's just Check the original prom what more do we want let's just add this make sure it's connected to the back end and that it looks beautiful let's send that now while it's loading I'm actually just going to prepare a new prompt so I want to remove this navigation thing so I'm going to press on the select tool and I'm going to write remove this text element and that should be fine and I'm using not going to submit it yet because I yeah I got to wait for this to load U
But that's like a good tip to write your prompt while it's loading and this looks absolutely beautiful wow nice this is really nice so you know a prompt matters a lot if you have a nice prompt then then that can really help and we see that we don't really have much data so we can't display much on this weekly graph but I do like this this ch right here so I'm just going to submit that and we did get a build error but sometimes these build errors are kind of Fine they might not matter but
I do recommend fixing them but it seems like it didn't matter in our case okay this is funny so uh now we kind of made a mistake and we don't have to panic because we have the revert feature but as you can tell I was just going to revert to Navar or the Navar taste but we remove the whole Nar just going I press on the revert feature uh lucky we have that and I can go back to the previous previous thing and I'm going to Be more explicit so I'm just going to take it
image and I'm going to say sorry we don't want to remove remove the nav bar was my bad we just want to remove this text that says navigation but keep the side or as usual I think what happened there is that we used the select tool but we go didn't go deep enough maybe so we might have us selected the thing around the actual text elements so you have to make sure that the kind of scope of your select Tool is good and accurate so let's see if this works not uh there we go and
now it's gone perfect so now I think this actually looks really good and we can probably enhance this Landing pitch I'm just going to make make this Landing pitch look really nice with the shards and stuff is make it really really good I'm going to send that and we're going to enhance the landing page and then I think it's time to implement payments so this is something that I wanted to do in The video Implement payments but the payment functionality is still an experimental feature so sometimes when implementing payments right now you can get stuck
but uh but then I would just recommend reverting and trying it again uh but yeah it's just it's an experimental feature but if you want to give it a try I will show you guys how to do it right now and here we have some the landing page enhan and I think this looks really nice so we have like a Short here and some more things to start your journey we can add even add the footer so I'm just going to write the footer on the landing page perfect now we have this foot tour and
this looks really nice we might want to add some more things but yeah for for the sake of time I'm just not going to add anything additional and now let's add payments so the next prompt I'm just going to prepare now will be now I want to add payments I want it to be recurring Subscription service that users have to pay for to actually access the main app so users will land and get redirected to the landing page if they are not paying customers and then if they press get start started they will get to
the sign up page if they are not signed up if they are signed up slash logged in they will be taken to the stripe checkout to the stripe checkout if they are not paying customers okay perfect now I have kind of described how we want the Payment flow to function but I'm just going to send this and then lavable with tell me the steps that I have to take to actually Implement payments so the payment provider that we use at lavable and that we have this integration going the integration isn't finished we're going to make
it just as smooth as the super base integration like a button that you can just press on but currently we just have the lavable AI tell you the steps so we see right here that it gives Us steps and we can see that we have already finished the first step which is setting up authentication with super base but now we have to create a stripe account and set up a product and then we have to include our stripe API key within one of these buttons and then we also have to create this stripe checkout Edge
function but lava ball will will do that for us but we will have to create this product manually within the stripe dashboard so I'm just going to go to Stripe and I already have a stripe account so I'm just going to log into that okay there we go now I'm logged in I'm going to create a new account and I'm going to call it lovable AI calorie tracker I'm going to select United States and then I'm going to create it and sometimes stripe might ask you to fill in a bunch of the company information and
that can be quite tedious especially if you haven't actually set up a company so you can Actually most of the times just skip that you can get around that if you're using test mode right so stripe will kind of let you test out stripe without having to fill in a bunch of that information though you have to create an account but uh yeah that's just a random tip that I have like look here it's telling me complete your profile but because we're inside of test mode uh which we'll be we'll be using the test out
uh if it actually works before we Kind of deploy the app and use real money and now I'm going to go over to product catalog and I'm going to create a product and I'm going to call it standard plan and I'm going to skip creating a description and I'm going to select recurring and let's do $12 a month and the period is monthly and then I'm going to press on ADD product and now the product has been created and now we can go over to developers down here and we can go over to API keys
and then We can copy our secret key which we want to input to lovable so this is you know your sec secret key so you don't want to put this key in your front end instead you want to add it right here to the edge function which lava ball will now have created for us and I'm just going to add it like so and then while lava ball is loading I'm going to go back to our product catalog press on the product that we used created and then press on the price of the product and
then I'm Going to to copy the price ID up here so you want to go H Deep you don't just want to go over here you want to go into the price and then copy the price ID and once you have the price ID uh we want to convey that lavable such that lavable can select the correct product that we want the user to pay for if that makes sense uh so the price ID is like public information it doesn't have to be uh secret or it's not secret it's supposed to be on the front
end but the secret API key right the stripe secret key has to be on the back end so that is where you add API key so for the price I'm us going to prepare prompt uh here is the price ID and then we're going to paste that in and we can also see here I kind of which Step we're on so this was the old message so now we have already finished this step right here and this step but we haven't added the price ID so I'm just going to add the price ID it actually
tells us that we should start Off with the price ID uh so I actually did this part beforehand but I don't think it matters that much but yeah but generally speaking you probably want to make sure that you're doing things in in a logical order but in this case I don't think it matters perfect so now it says subscribe now instead of get started which I believe it said before which which makes sense so now if I press on subscribe now I believe we should be taken to the stripe checkout so let's Try to press
this button it just have to load let's see there we go now we're in the stripe checkout and we do get this error right here but I think it's all right and you can tell that the rendering is kind of stuck but this is completely fine and it's because we're inside of this web preview right here where if you go into the live preview over here and we press subscribe then everything should actually render and the perfect perfectly it does and Because we're inside of test mode we can actually use the test stripe credit card
so I'm going to press not cash app I'm going to press credit card and then I'm just going to search this up so stripe test card and then I'm going to go to the stripe documentation so each one of these like apis so you can imagine stripe is a API an external service they have a documentation where you can kind of read how it works and they stripe has this test card that they have in their Documentation that you can use this doesn't really matter probably want something that makes sense though so we have the
month and then maybe the year can be 27th and then this can be random and this this can also be random and we should be able to pay and proceed with checkout perfect and now we get redirected into the main app perfect this is the functionality that we want and now we can also test if we go onto the main app right here inside of Incognito it should yes redirect us perfect so that's kind of now we're trying to be Shey we're trying to access the main app from an account which doesn't have a pay
user and yeah and it's we're seeing the correct behavior and you know I think it helps to be explicit in the beginning right you remember I prompted the AI The Lovable AI to have this functionality such that you know we don't allow users which haven't paid to get access to the app And now we can see if we press on the Subscribe button it will actually have be a get started button because we haven't you know logged in yet so now if we create a new account test
[email protected] then we will not have access to
the app as well I think if I what was the URL me there we go we don't have access to the app so then we have to subscribe again and uh but of course we can also just sign out and then log in to our original account and then we have access to the Dashboard perfect yeah I mean this is exactly functionality that we want that was very smooth and I think that the way that you make your lovable experience smooth is that you take things step by step and you're very clear with your prompts
and if you come across an error that you stay composed and you try to resolve it in a methodical kind of logical way and that's kind of how developers work when you're building a web app with you know actually writing The code yourself you come across a bunch of errors this is why this experience is so much better because if you come across an error in lovable in most of the cases you use tell lavable to try to fix it and you can try to you know you of course want to be clear about the
functionality that you want and the kind of the error that you're getting and what you're seeing on the screen but in programming you know errors occur all the time like in Programming 90% of your your time is spent on debugging as you use lavable you will learn how to debug and how to kind of resolve errors more quickly and quickly so you kind of become a better lovable user over time so when you're integrating stripe and when you your stripe integration works you also want to add the customer portal so the customer portal will allow
users to update kind of their payment information and also cancel a subscription so yeah That that's very important to add now they can technically cancel subscription through the email that they get when they purchase something with stripe so yeah it it is still possible but you want to have this in the UI as well such that users can you know change their subscription status so I'm just going to go over to here and I'm just going to write can you now make a new page called account where users can manage their account and let's have
the stripe Customer for portal be there as well so can manage their subscription unless you send that and hopefully that should be added right there we could have been more explicit about that you know have it in the sidebar but I think I think La bable will Le add it over there okay perfect so now we can press the account button and now if you press on manage subscription uh we do get this error and error when we press on manage cryption make sure that it Let's do the stripe check out it seems to be
an error with the edge function so I'm just going write it seems to be problem with with the edge function so I'm just going to send that all right so let's just try this again Manor subscription okay and we still get the error let's press on try to fix and hopefully it should work after that now this is why the the strip integration is still experimental because you come across these kind of Errors which you do Like in in many cases so it's telling us that we should go through stripe checkout portal so you might
actually want to do that beforehand yes so you might want to press on activate test link so let's just press on that and then we can also just try to toggle one of these things so let's just the toggle this and press save so maybe you have to refresh it inside of the stripe you know the stripe page like so so then you go over to billing it seems like I believe You might be able to search the building and settings and then to customer portal and maybe like change something and press on Save and
maybe it should work now and yeah I think it does work we we get that thing that pops up because we're inside of the the sort of ined website but now if you press on manage subscription yes we get taken to the stripe portal and now we can cancel our subscription okay so I forgot to add the actual customer portal within the stripe UI so you have to go over to stripe and then go to settings and then billing you can also just search here billing and then building settings and then if you go over
to stripe portal you can activate this you can activate this custom link to test out the portal and then you need to also like make a change here and press on save so it actually makes the stripe portal work so yeah you can see that lavable actually told me that so it was like the error message Indicates that the stripe customer portal settings haven't been configured in test mode before the portal can work we need to configure the stripe customer portal settings so it's telling me kind of the steps that I took and I just
pressed this link right here to do that so now it works and yeah perfect now we have one last thing to do before we end this video and that is to deploy the project so to actually deploy the project on lavable you can go over here And then you can press deploy and that will make it such that anyone can go to your website and use the product so if I just wait for this to load and then I go to the URL we have this URL right here called diet dialogue at lovable and yeah
then anyone else can use this and we can use share this around but we might want to use a custom domain so right now it's deployed but we might want to have our own domain right but let's say I went over to some like domain provider and I Bought a domain then I might want to set that up and in our case we haven't implemented that functionality yet within lavable but we will soon to make it super smooth and easy so because lavable is open and because you own your code when you use lavable you
can upload your code to any other service any other hosting service so in our case I'm just going to show you guys how you can do it with netlify also read this on the lavable documentation so if I go over Here and then I go over to docks we can actually read the lavable dos and here we have a bunch of like upto-date information about lavable we're also you know trying to keep up to date with the information on the YouTube channel we can go over here to the documentation and then go over to setting
up a custom domain and we're going to use neifi so the first step is kind of to create a netlify account so you can go over to netlify create an account I've already Done that and you also want to connect your lavable project to GitHub and yeah you might also have to you know create a GitHub account for that so GitHub is just a way to kind of to share source code between developers so it's kind of a collaborative coding platform almost almost all companies use it to track the progress under source code so it's
a way to collaborate on projects and to save your source code so in our case we have connected the project now to my GitHub Account and we have access to the source code so now we can just go over to netlify actually and we can connect nfy to our GitHub account so we can go over to sign up but I already have an account so I'll just get logged in and then we can go over to add new sit import an existing project and then we select GitHub and then it will ask to authenticate your
GitHub account I've already done that and now we want to add our repo to these repos so you will Probably see all of your repost right here I will have to add this GitHub repository manually because I have some like authentication settings that tells me to do that so I'm just going to go down here to cancel your repo and then I'm just going to log into my GitHub again I got to get this authentication code there we go and then I'm going to go down here to my GitHub repos and then I'm going to
select this guar repo that Lev B us created for me so it was called Diet dialogue so I'm just going to save that and now I should be able to see this inside of my netlify UI there we go diet dialogue and now we have some information so netlify has already set up a lot of the stuff right here this is like our build command how we you know compile our code we don't have to change any of this netlify actually knows kind of what framework we're using uh to build this application so laow bable
uses V which is a very fast and smooth Framework to build the web apps and then of course we're using subase for our back end but neifi doesn't really care about what backend we we use in this case so I'm just going to deploy this like so and we can see that the deployment is in progress and then to add custom domains to nfy you go over to domain management and then you can like add your domain and then of course you would also have to purchase your domain but you can use all sorts of
domains you Know Brokers for that like you can use search up how to purchase a domain kind of and then netlify also has like a documentation so if you go to netlify custom domain and then you can go to docs you can kind of read up on how you create your custom domain to neifi or you can just watch like a YouTube video about it like this one right here you know I I prefer YouTube videos I like them I think they're good but but yeah most of the time you know the Documentation is better
because it's always kind of up to date it seems like it has successfully been published and this is the you know kind of default domain that netify uploaded it to and this looks great so now if we add the the custom domain to netlify that will be reflected and then we can go to like I don't know what we would call it diet dial.com or something I'm not sure it's kind of funny it Rhymes but yeah so if you want to do that you search up how to Buy a domain and then how to connect
your domain to netlify maybe there are videos which display the whole process and another thing like sometimes when you upload your project to netlify it might have an error in it so when you deploy things to netlify you might get a build error so if I search up netlify like build the error you might get something like this right where it says it failed in that case you can go over to your logs so you might be able to Upload the deploy logs and then you can copy those logs and then you can paste them
into lavable so if you go back to lavable with the logs you can say I am trying to deploy the project to netlify here are my logs from netlify something like that and they just paste in the logs and then LEL will most likely be able to resolve the issue sometimes these deployment issues have to do with kind of the the preciseness Of nety servers right like some of these hosting servers want everything to be like super syntactically correct so sometimes if you're using two packages which might not actually work together even though they're actually
working together within the app netlify might run like a certain script which tells you that they don't work together and then you you know take the logs I think you you go over here actually and then you can see the build right here and you Just copy the the logs you don't have to copy all of the logs netlify kind of has a nice way of displaying the error so you can just copy the error logs over here and then just you know copy them go over to your lavable project and then just paste them
in right here and you just say I got this error while building the app so that is kind of what you do and then you can just send that and then lava ball should be able to resolve it but in our case we didn't get any Deployment errors and you usually don't get any deployment errors but but one time I did and yeah I think it's just good to so you guys have that knowledge as well I'm trying to you know provide as much context as possible but I think I covered most of the stuff
one other thing which you might want to change which I actually do recommend H changing when you're building like a website is to change this logo right here right now it's using a lovable kind of default Assigned logo and you may want to change that to your own logo so that's called a fave icon so if you search up fave icon you will see that this is the icon on websites which show up over there and then you also have some other metadata on websites so this is called metadata it's like the data on the
website that is kind of outside of the website's context if that makes sense it's not in the website even though it's in the code of the website but it's it's displayed Outside of the the context of the website and you can actually change all of that so you can tell lavable to add a fav icon so I can use fa icon example let's just search fa icon example and uh we can probably used download one of these but the resolution has to be correct so I believe it's 32x 32 this one is not either 32x
32 so what we can do actually maybe is that we just take an image and let's just sure that it's 32x 32 this is a bit tedious uh so I'm Just going to attach this icon right here and then I'm just going to right can you make this the websites faon and can you also So Meta data we can call the website n three AI like you have also add some meta tags and description and stuff so the metatags kind of help search engines rank your website they don't matter that much it's it's more about
the content of your website which matters and also what your visitors do on the website at least that Is how like the the Google algorithm works I believe but yeah it can be good to add this kind of metadata so he going to prompt bable to do that then he's going to change file and you can actually go into the code or we can just look at changes and we can see that it has added this metadata and you can of course change this yourself if you want to be more you know precise about it
but I'm just going to go with with lava Ball's suggestion right here if you want To change it yourself you would have to find the file with the metadata and the way that you can do that quite easily is just to copy this right I just press that copy this and then I'm just going to search for it right here we might have to refresh this let's try to refh refresh this let's search for it it and there we have it so here we have the meta file the index.html we can change these things as
we would like but of course there are certain requirements For this so you cannot you know make this enormous so that is why probably you want to do it through lavable to make sure that it actually works that it's a valid HTML so now we can see that we have added all of this meta information and there are some other things that you can add as well so there's something called an OG image that you can add to a website that is like the image which shows up and the space as your website when you
send it Through different social media platforms for instance like on Facebook or Discord or something like that so uh you may want to change that as well and you can do that as well use tell lovable which image you want to use as your OG image and lovable which change it and you can like search up OG image size just to make sure that it's like you're using the correct format and stuff like that and now when you make a change neety actually automatically refreshes it Though it can take some time but essentially how it
works is that netify is connected to GitHub right and La ball is also connected to GitHub so when you make a change in lavable the GitHub repo updates and netfi listens to the GitHub repo and makes a new deployment so we go over here if you refresh I think we should yeah there we go we see a new deployment and this deployment has the changes that we just made and that way we can see our favon right there but Yeah it might take a while though for a deployment to finish maybe a couple of minutes
or so but either way that was it for this video I hope you guys enjoyed it and it was very comprehensive and we will make more videos in the future but yeah comment below what you want to see me build and kind of we're thinking about making like a tips and tricks video which I think will be very nice but then if you have any particular like kind of how to add this feature or how To integrate this API or maybe how to do that or this then comment it below and we might make a
video about it
