Transcription
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 OpenAI 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 Lovable is the prompt. Okay, so this is my prompt. So we have the different pages here: the landing page, the dashboard, and the various features within these 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 GPT-4o to analyze the meal. And then GPT-4o 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 GPT-4 analyze it in the same way. And then we also have the chat page where we can chat with GPT-4o 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 Superbase 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 Lovable 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 Lovable 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 apps like MyFitnessPal and Noom with a unique AI twist." The Lovable 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 Lovable 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 Superbase 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 Excalidraw, which is a nice way of visualizing things. Another thing that you can do with prompts in Lovable is that you can take images. So you can actually take images of different designs and then you can include them in the prompt. So what you could do is that you could design your app in Figma, and then you can just take screenshots of your Figma design and include that within the Lovable prompt. And that way, you can be more precise with kind of the design that you want inside of Lovable. 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 high-res 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. 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 sensitive information. And in our case, we want to make API calls to OpenAI. And because of that, we have to store an API key. And we will store that API key inside of our backend 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 Superbase account first. So you go to superbase.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 Calorie 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 Frankfurt, 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 Lovable and we should be able to see our project right here. So here we have it: "AI Calorie Tracker." So I'm just going to press on it and then I'm going to press "Connect." And now Lovable is telling me, "I'm now connecting your Superbase project to gather your database structure, tables, and security settings. This may take a moment." And while that's loading, I'm I'm going to go back to Superbase, 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 Lovable 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 Superbase connection. So we can create 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 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"? Lovable 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 Lovable 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 Superbase. 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 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 handle all all of that stuff for us. So if you wanted to do a "meals to user" relation, we could do that. We have to tell Lovable, 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 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 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, Lovable 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 a URL that you can go to and see how your app looks kind of like for a 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 describe our 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 a '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 backend." And then I'm just going to send that. A very nice prompt. Now we can see that Lovable is writing the tables again. So I'm just going to apply those changes while Lovable 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 Lovable. 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, Lovable is actually incurring a lot of costs because of the enormous amounts of compute 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 Lovable 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 Lovable, 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 meal text," and then we can just press on "Commit and Push," and then that will be reflected within Lovable. 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 Lovable, 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's 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 Lovable before kind of implementing the feature, if that makes sense, before telling Lovable 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 "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 Lovable. And if I go back to my project, I can, uh, press here and I can go to "Chat Only Mode." 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 tofu," 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 Superbase, 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 fetching the data 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 user's data because that's like a security issue. So that is why we write Row Level Security rules. And Lovable actually does this for you. So Lovable writes these Row Level 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 Lovable 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 Row 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 Lovable just catches that itself, so you don't have to write that. In our case, that is what happened. Lovable figured out what the issue was. But in some cases, you might have to nudge Lovable 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 Lovable 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 Superbase, and they actually have this very, you know, we have this one right, but they also have a very visual, 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 keyword that I used was "round 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 Lovable 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 packages within the web apps, right? Like it would kind of be kind of be unheard of nowadays to build a 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 a 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. We're saying, "You may want to use an external package." So if we search up like "progress bar," that's kind of UI, and then "npm." So npm is kind of the this website right here, but it's it's called the Node Package Manager. But npm 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 Lovable choose the package. And that way, we also make sure that Lovable has knowledge of the package. If we used Lovable to use some random, you know, package online, same thing if we used it to use some random API online, Lovable 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 Lovable. But yeah, but in my case here, Lovable, 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 meal.txt 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 Lovable tells you when a file is kind of getting too large, and it's highly recommended to then use allow Lovable to refactor it. So we can see that it will actually tell, "Would you like me to help you with refactoring it?" And then I'm just going to write, "Yes, you can refactor 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 Lovable about, right? So you can go into this part and you can select it, and then you can ask Lovable 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 component 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, "Add Meal," 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 a 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 OpenAI. In our case, we want to use GPT-4o. 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, Lovable will probably select an image model automatically, but it can be very good to make sure that you're using kind of a recent OpenAI model. So you can kind of search up, you know, "best OpenAI model," and you will probably find something. I just recommend using GPT-4o, 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 nutrition advice and maybe meal planning and recipe suggestions. And we can tell Lovable 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 imbue 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 OpenAI, is actually being written inside of a cloud function. So if we go over to Superbase right here, and then we go over to "Edge Functions," they're also called "Edge Functions." You know, all of these services, they 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 to 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 Meal" functionality, and we also want the "Chat with GPT-4o" functionality. Then we can imagine that these are two different Edge functions. And the thing with Edge functions are that they're run on the edge, right? They're run on the backend. It's like a fancy word where describe an a backend server being hosted close to the 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 backend, 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 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 backend is because we will include our API key. And our API key is a way for OpenAI 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, use spam requests. So that is why we have this on the backend, such that the only way for people to kind of interact with OpenAI with my API key is through the website. So they're still, you know, interacting with OpenAI, 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 Lovable might, you know, have something in this endpoint. Is the user paying? Lovable might check that, and if the user is paying, then it will allow the request to go through. Of course, we haven't added any payments yet, but you can imagine that Lovable is already testing if the user is signed up. I believe Lovable is. And we can actually double-check that. But either way, so Lovable 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 Lovable, it will be public by default, which means that anyone can have access to your project within Lovable and look at your chat history and kind of your codebase as well, and and even remix it. So if you go over here and you press on "Remix Project," then you create a copy of the project that you yourself can build upon. You want to actually copy the Superbase instance. So you will still have the Superbase 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 Superbase instance, if that makes sense, or Superbase 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. So right now, I have it on public. And then also for the API key, I probably will 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 special, you know, input field right here. They will be safely stored in the backend. But 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, to a, you know, a private project as well.
I'm just going to go over to OpenAI and then I'm going to type "dashboard." And you will have to create an OpenAI developer account. And then I'm just going to go over to "API Keys," "Create API Key," "Calorie 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 Lovable 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 "Failed to send message. Try again." So I'm just going to tell Lovable at that it did not work. And then Lovable, 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 Lovable 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 Lovable can help you debug.
So now we have a build error. So it will 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 Lovable in the prompt that we want this AI to have access to our information. So I'm just going to tell Lovable that. Nice. Now it works. And the reason why I tell it "Nice, now it works" is because I want to clarify to Lovable 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, 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 chat has access to all of my meals during the week. So include all of them in the prompt. So kind of on the backend, if we were to kind of get an overarching overview of what is going on, we have the endpoint, we have the "Chat with GPT" endpoint, 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 Lovable 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 a 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 user's 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 nudge 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 getting the Superbase 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, 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 Lovable such that Lovable can see it does not have access to my meals. Please fix. So hopefully Lovable 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 to 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 OpenAI here. Okay, let's see if Lovable has debugged 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 GPT-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 precise. But sometimes you can't be more precise, right? You don't actually, sometimes you might not know what to say to Lovable. And, and that can be can be frustrating. But then you kind of just have to have 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's like two different ways 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 Lovable 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 Lovable 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 Lavable 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 an 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 prompt, 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 GPT-4 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 provide description. If not, so you can do image or description or both. So you can do image or description or both. GPT-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 typed it. And then the user can press on add meal 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 formatted responses from OpenAI, from GPT, 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 LLM space, function calling is actually used getting formatted responses from these large language models, right? So if you tell Lavable to use OpenAI function calling to get formatted response from GPT-4, then it will 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 GPT, so we can kind of, you know, add them to our actual logs. The default behavior of these LLMs 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 the LLM 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 OpenAI function calling to get formatted response from GPT-4. Make sure to include the image in the user's 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, it can be good practice to write these long prompts, and it is totally fine to do long prompts, 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 prompt. And then I would recommend breaking it down, kind of like we did with the different pages. But now we kind of have this, this one functionality that I think can be done with one prompt. 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 GPT-4. 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. 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 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 chart of the weekly and the daily progress. Let's just check the original prompt. 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 chart 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 removed the whole Navar. Just going, I press on the revert feature. 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 didn't go deep enough, maybe. So we might have 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, 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 page. I'm just going to make this landing page look really nice with the charts 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, but then I would just recommend reverting and trying it again. But, uh, 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 enhanced. And I think this looks really nice. So we have like a chart 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 footer. 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 a 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 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 will 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 Supabase 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 Supabase. 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 Lavable 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 Lavable 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, which we'll be, we'll be using to test out, 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 Lavable. So this is, you know, your 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 Lavable will now have created for us. And I'm just going to add it like so. And then while Lavable 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 copy the price ID up here. So you want to go 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 to 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 just going to prepare prompt. 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. 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 has 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 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 an 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 sneaky. We're trying to access the main app from an account which doesn't have a paid 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 Lavable 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, test2@gmail.com, 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 the functionality that we want. That was very smooth. And I think that the way that you make your Lavable 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 Lavable, 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 Lavable user over time.
So when you're integrating Stripe and when 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 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 Lavable will add it over there. Okay, perfect. So now we can press the account button. And now if you press on manage subscription, we do get this error. Error when we press on manage subscription. Make sure that it, let's do the Stripe checkout. It seems to be an error with the edge function. So I'm just going to write, it seems to be a 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 Stripe 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. Let's just 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 billing 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 get that thing that pops up because we're inside of the, the sort of embed 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 billing 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 dietdialogue.lavable.app. And yeah, then anyone else can use this and we can 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 to here and then I go over to docs, we can actually read the Lavable docs. And here we have a bunch of like up-to-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 Netlify. 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 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 Netlify 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 site, 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 repos 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 Diet Dialogue repo that Lavable has 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 to build this application. So Lavable uses Vite, which is a very fast and smooth framework to build the web apps. And then of course, we're using Supabase for our back end. But Netlify doesn't really care about what back end 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 Netlify, 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 Netlify. 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 Netlify 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, dietdialogue.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 Lavable will most likely be able to resolve the issue. Sometimes these deployment issues have to do with kind of the, the preciseness of Netlify 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 Lavable 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 changing when you're building like a website, is to change this logo right here. Right now, it's using a Lavable kind of default assigned logo. And you may want to change that to your own logo. So that's called a favicon. So if you search up favicon, 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 favicon. So I can use favicon example. Let's just search favicon example. And, uh, we can probably use download one of these. But the resolution has to be correct. So I believe it's 32x32. This one is not either 32x32. So what we can do actually, maybe is that we just take an image and let's just sure that it's 32x32. This is a bit tedious. So I'm just going to attach this icon right here. And then I'm just going to write, can you make this the website's favicon? And can you also, so metadata, we can call the website N3 AI. Like you have also add some meta tags and description and stuff. So the meta tags 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's going to prompt Lavable 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 Lavable'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 refresh, refresh this. Let's search for 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 in 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 Lavable which image you want to use as your OG image. And Lavable will 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, Netlify actually automatically refreshes it. Though it can take some time. But essentially, how it works is that Netlify is connected to GitHub, right? And Lavable is also connected to GitHub. So when you make a change in Lavable, the GitHub repo updates. And Netlify 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 favicon 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, 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.