Build Your AI-Powered MVP in 90 Minutes

So today we are going from idea to market in more or less 90 minutes. It's possible, I have done it before, and many people actually managed to build small prototypes. So I would really encourage you to try to follow me on the screen while I am showing you steps how to do it. And we also have lovable credits to build something. I will be sharing them later. So please not just observe, but also try to also follow me and build something. Okay, let me move to the next slide. So today, as we are having now, welcome and introduction. It's a few minutes for everyone to join. As I mentioned, it's a very long list of people who are joining us today, and I think it takes a moment until Zoom is loading everyone, letting everyone in. Then we will move on with the Foundry Institute presentation, very short presentation about our organization and what we are doing. Then I will follow up with some AI tools for prototyping. Our main tool for today is Lovable. Please, if you know Lovable, you can react with hearts because their logo is a heart, so you can react with a heart or drop it in the comment. That you know it. Okay, I see some hearts going up, so many people know it already. Really cool, happy to hear that. But to give you a bit broader picture of what else is on the market, I will show you a few other tools that I'm using from time to time. I will be also sharing some vibe coding essentials. These are templates, how to build a more successful prompt for Lovable to get something very quickly out and save some time on avoiding pitfalls. Starting with Lovable, I will be showing you the user interface. So if you are a complete beginner, I will be explaining everything from the beginning. Then we will be building the prompt, and we also will be having at the end MVP, or maybe even a few. Let's see how will time allow us. And I would really like for you to also build something and use the function, share preview, and share it with us all here in the chat so we can all see what we have built and we can share our projects and we can see what's actually possible with LavaPool. And then at the end, we will close up, share some few closing words, I will share my contacts, I will share more information about upcoming webinars, about Thunder Institute program, and so on. So, about myself, my name is Kasia Sadowska. I am having a background in mechanical engineering, also in programming. Actually, high school was in programming, then I moved back to mechanical engineering, and then again back to the software. So, I am working in the software development here in Vienna for more than 6 years. And currently, I am also one of the directors of the Wanderinstitut, very long name we have. We are based in Austria, Stefan and I, but we are also supporting other countries. And currently our spring cohort will be having also France, Belgium, Netherlands, Luxembourg, and Israel, and Switzerland. So very pan-European and Israel cohort, very big cohort. And I am also having my own company, futurehabits.tech. You will have the website shared later because we will be using it also to share some templates for the workshop. And with that, I would like to give the stage back now to Stefan so he can also introduce himself and share a bit more about the Foundry Institute.

Yeah, thanks a lot, Kasia. I will be doing this. Yes, as Kasia mentioned, my name is Stefan. I'm also one of the directors of Foundry Institute, and I'm very happy to share just for one minute basically what what we are doing before handing back the mic to Kasia. So yeah, this is the theme of the workshop today. You will learn how to build an app with Lovable today. And what you will realize now during this webinar, if you don't know it already, is that building a product nowadays is basically easier than it was ever before. You will learn how to build a functioning web application within 90 minutes on Lovable. This is all doable nowadays. However, turning a product nowadays into a real business takes real skill. So building something is quick. Building something that people actually want and ideally also perhaps spend some money on, this is nowadays the real challenge. And yeah, this is where we can basically help you. So Foundant Institute is the world's largest pre-seed accelerator. We started back in 2009 in the Silicon Valley and so far graduated over 9,000 companies, almost 9,000 companies who raised close to $2 billion from investors. So how does this work? If you're a very early-stage entrepreneur, right, you might have an idea. You're still working a full-time job, but you have an idea. Or you perhaps already built your first MVP with Lovable after, after tonight, or you already have some first revenues, but you really want to accelerate your business, right? You really want to move faster, then we are starting our next FI Core program next week, and this would be a great opportunity for you to actually accelerate your business. It's basically a 14-week structured growth process where founders are building on their idea, on their startup, and they're constantly pitching their startup and their strategies to our mentors. Now, mentors are either successful entrepreneurs themselves, right, built and scaled startups successfully before, or they are, um, successful early-stage investors. But in any case, they're people who have a lot of experience with startups. And doing this, you know, we really shape your idea into, into a fundable business by the end of this journey. Um, we are basically open to everybody, so no matter your industry or your age or your background or where you're located or whether you're still working or already are full-time on your idea, um, as long as you're willing to roll up your sleeves and put in the work that is necessary to build a startup, You're very much welcome to join us. These are some of our alumni. One of the more famous ones is Udemy. Perhaps you know them. It's an e-learning platform. They started founder institute in 2009 just with a rough idea. It was 3 guys with, you know, just an idea of doing some e-learning on the internet. And they actually had an IPO in 2021 at a valuation of $4 billion. So if you are also thinking about launching your own startup, or perhaps you already launched your own startup but you want to move a bit faster, then our next cohort will be starting on February 18th. As Kasia mentioned, we're a big international pan-European program consisting of Austria, Switzerland, France, Belgium, Netherlands, Luxembourg, and Israel, and you're more than welcome to join us. This is the QR code, you can scan it with your phone, um, on you go to fi.co/join or /austria. I will also post the link into the comments. So much for the Found Institute. Now we'll be handing the mic back to Kasia, and I will be in the background now answering any questions you might have. So please, if there's anything coming up, just drop us a message in the chat or in the Q&A functionality, and we will try to answer those during the call. Kasia.

Thank you, Stefan. So again, we— the number grows. I will say the welcome again. Welcome to everyone who just joined. You join a Loveable session, how to build an MVP on Loveable in 90 minutes. I will go back to sharing my presentation. So as I mentioned, today we will be learning how to build Or not relearning, some people already have built lovable products, really cool to hear that, but I will be also explaining it from the beginning. For those who already use it, please share your best practices, maybe you have some cool tips and tricks that you can share with everyone. And before we start, I would like to also— not this direction— this direction. I would like to share a few other tools, right? Because Lovable is already building full application, full-stack application, meaning there is some data logging, there is backend, frontend, and so on. Maybe you are not yet there. It would be over-engineering. It might take too much time to figure it out, something that you don't need now. Ideation, validation, super important to validate your critical assumptions. Very early on if you are building something, and for that you have many different tools. For example, Figma. I'm pretty sure if you did not use it yet, you for sure have heard about it. Pretty common tool for actually building user interfaces. Now also Figma has an extension called Make where you can prompt it like ChatGPT, and you can also get a user interface To be honest, for me, this feature, it's not working perfectly fine. You need to be really clear what you want. I'm not a designer by background, I just have the foundation, so I was not really happy with it. I stopped using it because, for example, from UIZart, I was getting way better results. About UIZart, I will tell you a bit more on the second slide, but this is also a very cool tool to Prototype, you just prompt it like ChatGPT and you get your user interface, I think 7 to 10 screens very quickly. Another tool which I discovered pretty recently, it's called Google Stitch. It's from Google, as the name says, powered by Gemini. And this one, it's approaching the design completely differently. So here you can just prompt it like you would prompt Gemini normally and you get a user interface. As a screen of few different screens, so the whole kind of like a scrolling experience, and you cannot edit it in the classic sense. You only can take a snapshot and prompt it again to change something. There is no drag and drop anymore, there is no drawing, there is no moving elements around like you have it in Figma. So if you just want to ideate around your user interface, try out colors, different layouts, Google Stitch might be the tool for you to start with. So that's one category of tools, and there is of course many of them. If you are interested in learning one of them more, please drop a comment in the chat. We will be organizing more of this type of sessions. So if you are really curious about a specific tool, we are also happy to include it more in the next sessions. But now we will be focusing more on this middle vertical, which are tools for— I always put it MVP/full-stack application because actually you can build a production application, you can build a website with it. My own website is now built on Lovable. We have Lovable, I will be talking a lot about Lovable, so I will skip that one for now. But there are other tools in this category, right? For example, we have Bolt.new, we have V0, multiple ones, very similar, all of them offer freemium, which is capped with a daily usage. Premium starts from, I think, $20 something for all of them, and they are a bit different. So Lovable, it's considered to be the easiest for non-technical founders. You really don't need to know anything about how the code works and so on, and you can just prompt it into human language and you get it, but you don't get full control of your code. And with Bolt, the control of the code, it's a bit more advanced, while v0, it's really good with moving your designs from Figma into code actually. And the next generation, not generation, the next type of a category of tools for scaling, for using specific code stack would be Replit. And these two can be connected, so you can use your lovable build further in the thread. And specific thing about Replit is that actually you can try building mobile native apps, which is not possible with Lovable. With Repliq, it is. I did not try it yet, it's a very new feature. I think they released it on the 26th of January. If someone tried it, please drop a comment in the chat so we can learn. And then we of course have Cloud Code, Cloud Code, and GitHub Copilot. These are more for developers tools that are really helpful with debugging sometimes if something gets stuck with lovable, you can use one of those to help you get it unstuck. And that's about the tools overview. This is the tool that I mentioned before, the UI Search. This one, as I mentioned, you can prompt it like you would talk with ChatGPT, and it's adjusting your design based on the prompts. But you also have an option like a classic designing tool with drag and drop, drawing elements. You can do it manually, you can do it with this auto designer, you have two options. So it's actually pretty cool because combines both methodologies. And this one is good if you don't yet want to build the full-stack application, but you want to validate some assumptions already, test it with early adapters. You can get a Qlik dummy very quickly with this one. Okay, but back to Loveable. So we again have a bit more people joining. Hello guys, welcome. Today's session is about Loveable. We will be building our MVP, and if you just joined, you joined in the right moment because we soon gonna be starting to share the code and to share the 5 coding essentials. So let's start building. First thing, we're gonna load test my own website. As I said, it's built on Laravel and two things. One, it's a very large amount of people who have signed up for this workshop and I have obligations to report back that these codes were used only for the people who actually joined the workshop, not watch the recording. Therefore, I need to share it in a certain way. So now please go to future habits, dot tech slash resources. Stefan will also share this URL in the chat. That's my own website. We will be load testing it. I really hope it will not stop working if you will all try to download the resources. When you click on the download now, you have to fill in two fields, then click on the download button. You're going to get a PDF with a prompt. That we will be using into an AI of your choosing to build a lovable prompt. I will repeat that again. So in the Vibe Coding sessions, you are getting a prompt for an AI chat. It can be ChatGPT, Gemini, Claude. I will be using Claude. You can choose the one that you like the most, doesn't really matter. This one is there to help you build Very quickly, Lovable prompt, so we can all finish in the session and we can finish with a working MVP. You click download. When you download the, the Vibe Coding Essentials, your code should show up, and this code then needs to be put into Lovable. Now, important part is, if you already have a paid account, that's okay, you can still use the code, but you cannot use it in the same workspace. So for the people who are using, uh, Lovable already, you have Lovable Pro or higher tier, you need to use the code in the different workspace. So you just click Add New Workspace and then you sign up for the plan again, redeem the code. If you don't want to continue with the plan because you already have a plan, you can cancel it instantly and then no charge will be coming to your cart. But you will still have this 100 credits to be used for one month. We have questions. Alp, you can drop an answer in the chat, maybe. Sorry, you can ask the question in the chat and we will try to answer. If the question is about how to get the code, I can share my website now and I will show you.

Yes, we shared the website already in in the chat. So you need to download the code, and then you can basically from the futurehabits.tech/resources, um, you get the code, and the code is then you can redeem with Lovable.

Okay, so we—

there are some questions about how to redeem the code.

Okay, let me show you then. So now we are on Lovable. As you can see, I do have an account already, and it's a paid account, so I cannot redeem it here. What I have to do, I have to create a new workspace. We call it test, continue to plan, What happened now? Did I lose anyone? Did I lose anyone? Should I repeat this step? We can go back again. So again, back. If you have a plan already, or if you just open an account, you go to lovable.dev. You create an account, you sign up with your email, your default workspace would be called "Your first name workspace," and then to redeem the code, you follow my steps. If you have a paid account, then you have to create a new workspace, so I will be doing it now. We call this "test," then you have to click Continue to plan. Then here the first plan is €25. Make sure this toggle is disabled because otherwise you will be charged for the whole year. You can do that if you are sure you will be using it. If not, you can just keep it as it is. Just click Select. I think it's actually even selected. And then we click Create workshop. Workspace. Okay, now I will give a moment for everyone to be on the same stage as me. So here, what's happening, you are prompted to add your credit card. In this case, my account is already connected to the credit card, so I just have to confirm it with the SMS, but you will have a window with the credit card details. You need to put them in, and as I said, you can cancel them afterwards, but to start with these free credentials from Lovapool, 100 credits, you need to add to cart. That's the requirement. And then what happens? You have to put it here, right? Add code, you put it here, You type in the code exactly as you see it on my website, and then you just click apply, and you will see minus value exactly as you have it here, and you will just see zero. Then you connect your card, you click, I think it's, uh, proceed or something like this, and then you have your account, and you can cancel it after the session. This is nothing that you have to keep it until your credits are there. If you cancel it, you still have one month to use your Lovable Pro and your credits will not be disappearing or anything like this. Okay then, are we good to continue? Let me stop sharing my screen. I will look at the chat. I do not see a code. Okay, I think we can continue. It's—

do you get this pop-up once you click download, right? And then that code will be displayed at the bottom. But I think, Kasia, we can move on.

Okay.

Let's go.

Code does not have— yes, it does actually. So one month, if you not use it, if you still stay on the paid program, then you get the credits re-enrolled to your next month. But if you cancel it, I think you will lose it. Someone says just a minute. Okay, but I will slowly move on because we would like to really build something today. So let me go back to my normal workspace. Okay. Yes, you can use free program. Okay, a few people said you cannot see the code. Let me show it again just to be sure that it's really there. So again, you go to futurehabits.tech, resources, guides and templates, get it now, your name, your email, get it now, and here you have the code, right?

Yeah, we can't see your screen if you're sharing.

Ah, okay, I was sharing actually. Okay, one more time again. So, get it now, you enter your name, email, get it now. When you click on get it now, a code will appear here. Okay, Let's move on. And now you should be able to see my Claude account. So what we are doing now, we will be starting with using this vibe coding essentials. This is this PDF that you have all downloaded. I can also show it. Is it visible now, Stefan? Can you confirm? Yes. Okay. Right, so this is just a prompt that I have built to really collect all the must-have information that Lovable can build your app. It's not that you must use it. You can also just go in and type however you feel your app should look like. Lovable will always answer. Lovable will always build you something. But you might get surprised. It might not work in the way that you want. So it's a bit easier when you go to AI, you ask AI how to use better wording so the other AI understands you better. That's the way to do it to avoid spending too much credits, also avoiding your energy loss and frustrations. It can get really, really annoying if Lava Ball gets entangled in its own thoughts and doesn't know how to continue. So we will be using this PDF, which is a template to build a prompt for Lovable now, to build a prompt for Lovable, and then we will build the app with this prompt. So let's go. I will upload this, and here you can use any AI you have. It just has to support the has to support the upload. I think all of them do now. If not, you can just basically copy-paste everything and upload it there. That will also work. And I type it wrong, this prompt. Here we go. Okay, and now Claude is thinking, processing the document. This can take a while. I am also using the latest model. I think it's a bit slower depending on the usage. But okay, we have a question already. I will make it a bit bigger. So the goal with this prompt is that your AI will start asking you questions. What is your idea? Either an app or a website, what you are trying to build. First question that we are getting, I am making this bigger so you can all see it, is: What is your product idea in one sentence? And here you can see it's actually giving us example how a proper answer should look like. For me, a skill of typing and talking at the same time, it's something that I don't possess yet, so I will be cheating a bit. I will be just copying my answers. But all of you, please try to follow the process and just type in what you are building. Okay, so my first question is about the product idea. I will be building a digital nomad guide helping travelers plan their trip in Poland. So my one sentence idea description is AI-powered travel buddy for digital nomads in Poland, helping them combine unique live-your-story experiences with affordable coworking and co-living. And this is all planned under 10 minutes, so it should be easy and fast to use. Okay, we are answering with this, and then your AI should give you next question. See, it said perfect. Let's define what users can actually do. This is very important because you might—

Sorry, there's a short question. Can you also post the prompt basically into the chat? I think people want to also create this product document live on the side.

Okay, okay, let's do that. I will stop sharing for a moment because I don't see chat when I am having this. Okay.

And just to understand, this is now the PDF basically that our audience downloaded from the website, right? You just uploaded this one and Claude started creating from this PDF.

Exactly, exactly. So this is this PDF that you could download from my website. If you did not do it yet, please go ahead and try and download it. And you can also do it after the session. This is for free, always there. You can always access it, right? So this is, as I said, I did try this multiple times to really cover the must questions that you have to put in to answer to be able to actually build something which is usable. Otherwise, it might go different directions. I am now sharing it here. Can I actually copy-paste? No, it's not allowing me. Let's see if I can upload the PDF in the chat. No.

I can post the PDF. The question was basically, I think, about the prompts, whether you could share the prompts that you wrote to Claude in the chat.

Ah, okay, yeah.

I can upload the PDF.

Sure. Yeah, okay. Okay. So let's continue. Prompts, yes. So if you contact me, you get— if you did download the PDF, I will get— I will have your emails. I will follow up with the prompts that we are actually using. This is not part of the Wipe Coding Essentials because it's kind of dynamic, right? We can change this on the go to test different things. Okay, so we are back and now I am at question number 2. So this one is about your must-have features for the launch. So what do we want to have? And again, it's giving us an example that must-have feature for the MVP would be to actually have at least 4 cities listed. The AI version, somehow smaller AI should be already there if we are building something AI-powered. And then saving my trips. Okay, then let's answer this. I will again use my prepared answers. Okay, and I am answering without the question. I am answering that the must-have is to browse 4 Polish cities around coworking, co-living, and other experiences. I'm not saying which cities, so the AI will decide which cities will it be, but if you have some more specific details, you can always add them here. AI travel buddy chat that will be building our personalized itineraries. And then leave your story experience card, the option to save your trip, and book through partner links if we will have any partner links. Okay, I am answering this one now. Okay, we got great, so Claude is happy with the answer. Now we got next question: describe the user journey in 3-5 steps. This is also quite important because you can create multiple beautiful screens, it's very easy on lovable, but those screens have to be connected. You need to describe how the user is behaving if they see your website, what they do first, do they click on the button, do they enter the chat, is the chat opening first, what exactly they are doing, right? So they land on the home, land on the home page, click the city, plan with AI, we are describing all of this. So I will again copy my answer here. So my— and how you describe this very easy thing, you can describe it in this way. Land on the homepage. Okay, so actually here I have prepared the answers which cities I want to include. Landing on the homepage, first thing you see the city cards, then from city card You can click on the city and basically browse different listenings for co-living, co-working, your stories, and so on. Then we also have our AI, Plan with AI, and this is the chat feature where we can also use this to plan our trips with AI, get personalized itinerary, book co-living, co-working, and so on. Okay, let's answer. Okay, you can see it's actually prompting us to continue, almost there. So I am almost there, I hope you are also following. We need to now tell it how the data will be stored. So if you are not sure, you can also skip this step. This is more about the backend, how the data are stored, what's the relationship between data. If you are yet not sure, you can just skip this step and we just start with building the UI. I will use my prepared answer to also answer both the design and the data objects. Okay, so I will be using light blue as a primary color, warm orange as an accent color for CTAs, And my data storage will be having, yeah, of course, tables with the names of the cities, categories, some price range descriptions, and so on. Okay, and this is now a very important question. So it's asking us what actually you are building. So with Lovable, you can only build a web app. Mobile app is not possible, but if you prompted that it has to be mobile optimized, sometimes it's building it in a very nice way that's actually very usable on mobile as well. Or you can go for the PWA, the progressive web app, which can be downloaded on your mobile and kind of used as a native application. That's also an option, but we will just prompt it with the web application because it's a bit faster to build it. It's a web app and we say AI is needed. Use OpenAI for it. Any integrations? No, we don't want to integrate anything else for now.

Asha, may I interrupt you for just a second while this is building? Because there's a few questions basically about the user interface, like how do you specify the user interface, right? Can you upload a slide or a picture to Claude, or can you describe colors? How do you do this?

Very good question. So this stage, I will not address this stage with Claude. So Claude is more for actually fine-tuning your wording. You can upload images to Claude. You can actually ask it to generate user interface. It can actually do it. But then Loppable might not be really able to follow up with what it generated, so it's better to do it a bit differently. I will explain that in the next step. Any other questions about how to start?

No, I think those are the basic questions, right? Perhaps can you just briefly outline the process just once again within 20 seconds? Where are we currently at? Which stage and why we are not yet using Loppable?

Yeah, exactly. So as I mentioned, with LOVABLEs you can build anything very quickly, but sometimes if you don't plan it accordingly, if you don't start with a good foundation, LOVABLE can get lost a bit in its own thoughts. It will start creating screens which are not connected to each other, and it's very hard to then get it untangled and to build a proper data model for it. So this is why it's better to use an AI tool like Claude or ChatGPT to help you fine-tune your prompt. And you can do it simply by answering these 5 questions that I just shared here with this prompt. And this is the basic minimum you need to have a proper application with design elements and so on. So now you can see that I got my prompt. It starts with product overview: AI-powered travel companion for digital nomads in Poland. We have the home screen, so it described what exactly should be on the first thing that the user is seeing, and so on. I can share those prompts after the session with everyone, but now let's start building. I'm just copying it. And now it's the final time that we are building something with Lovable. I hope everyone redeemed their credits and you are all ready to start now. So how we start, and now it's also important how to start. You copy your prompt. Sometimes you might hit a limit. I'm not sure because Lovable is changing quite often, quite fast. So it did not happen for me for a long time that I hit a limit of characters. If it happens to you, you have an option here with the plus that you can actually attach files, and in those files you can attach your custom databases. So for example, this for me could be cities, specific locations that I would like to recommend in those cities, like coworking spaces, coffee shops, and so on. For the moment, I won't be doing that, but I would like to answer this question about the user interface. Because yes, indeed, it's very important. And you might not be designer— I am also not a designer— you might not know how exactly the components are named, and sometimes it's a bit difficult to get to the point that Laravel understands what you try to build. What I think could work, and it does work if you are really drawing it properly, you can just take pen and paper and draw your user interface. I don't know if you can see it, I think it's My background is interfering with it. Now you can see it. Yeah, I will show it to you later, but basically what I did, I draw a basic outline on my page. It has to be simple. So you rather draw that you are using cards, you draw the top, what should be on the top of the website, which buttons you want to have, so on. If you start drawing like freaky flowers and you try to build that the button is a freaky flower, that might be too much. It won't be able to build it. But a basic outline, just showing it that you want to have, for example, cards with rounded corners, some shadows, this can be possible. You can just draw it with pen and paper. If you draw it very clearly, Lovewell can follow. So now I have actually took a photo of my design, which was not nice, but we will still try to use it, and I will just attach it here. Here we go, this is my design. So what I'm uploading, I'm uploading the prompt and my design that I have drawn by hand. If you have designs from Figma, you can also upload them here. If you have screenshots of your existing solution and you are just building a new feature, or we are prototyping how you could improve the user interface, You can also attach your screenshots here. Another cool thing that Loveable is offering is the design feature here, that if you click on the design themes, you can actually check already existing themes and you can choose an existing theme. So here, right, you can Click Manage Themes, we select, let's take Glacial, and here you can see how the app would look like if we change to a different one, everything is changing. So this is something that if you would not prompt Loveable to use specific color, specific style, you can decide it right now. You can also ask it to just create you something randomized. Look, it's changing the elements. How they look like. But we will close without saving and we will just continue with what we have with our prompt and with this small design that I have created. What's important to understand here is if you are starting to close—

Natasha, perhaps because you have the screenshot already, can you show real quick how you drew it? Not the screenshot, the drawing of the user interface just so people get an idea.

It's a bad drawing. It's not best practice, definitely not, but happy to share it. Yes, I will just stop sharing the lovable because I cannot have multiple things shared. Okay, here we go. So this is my beautiful Picasso-style design. You can see that I have built here what's called hero section, basically your main one-liner that you have to put in, then my pattern, and then that I would like to have the city cards squared this way, right? If you draw it really, really well, Trust me, you can get very nice designs with Lovaball and it will understand what you are trying to build. I think my design is not really there, it was a very quick, just to have a sample to show you something. So we will go back to Lovaball now and we will try to build it. Just one more thing before we start, this is very important to know. Lovaball changed this feature, this was called differently before, now it's called Plan. As I said, planning is very, very important to the level that they even implemented a planning mode in the building of your applications. If I click on it, it's highlighted in blue, and this means that Lovable will not build anything, but if I execute it now, it will write us a plan what it will build. If I will disable it, it will go instantly to the building mode. This I will do it now because it takes some time to build and we want to have it today finished. Okay, and now what's happening, you can see and follow the steps what the Lovable is doing. What I usually do, I have it enabled, just send me notification when you are done, and I go and do something else, either go back to cloud and like think already what the next stage would be, or watch it what it's actually doing. You can see here we have building your AI travel companion for Poland, calm blue-orange travel aesthetics, and so on. Here you can see the way it's actually executing it, starting with images, setting up the design system, generate city hero images. It's actually telling you what it's doing. What you can do while Lovable is also building, you have this cool animation here which actually explaining. Now we are seeing the Shopify extension. If you want to build a webshop, you can do that with Shopify extension. Yeah, so it's actually explaining you how to use Lovable. But while this is building, I will move on with explaining the user interface. So let's We're going to start from the top. Or actually, no, this is more important, from the bottom we're going to start. So this is your prompt building window where you are communicating with LavaVault. Very simple, same like ChatGPT, you just text it in the natural language or you can actually talk to it. This is a voice mode. I will not enable it now because it will start picking up what I am talking to you and it will not work. But you can just enable it, you will talk to it like you would talk with your developer, your CTO, and you can build your app. As I said again, it has this plan button. If the plan button is enabled in blue, Lovable is not building anything, it's creating a plan what it will build, and you have to approve your plan, and then it's getting built. If you don't like your plan, then you can always prompt it, "Oh no, I don't like it, I would like to build something else." Okay, and then here, so you can— this is a button which is changing. It's actually very important to notice because if it's not doing anything, this button, it's an arrow. If it's doing something, this is adding a message to the queue. This is also a very cool feature from LovoBall. I really like it because previously I had to wait before I could add another prompt. Now I can just type it in while it's building and add another prompt to the queue which will be executed next. Okay, that's about our interface here. We also have visual edits. I will show you how it's working when we have actually something built. And the plus, plus, it's of course for adding files. So we can attach files, we can add screenshots, we can connect GitHub, we can connect our knowledge. If I click on it, that's also a really cool feature implemented not so long time ago. That again, it's all about planning. If you keep changing, changing, changing, at some point Lovable will forget what was the original prompt. This is very important then to make sure that you also put the must-have important details that you want Lovable to follow in this knowledge base. It also has get inspiration, you can look for the best practices how to write it. I will not be adding it now to make it a bit faster, but it's possible. Okay, we are going back and our Lovable is building, building, building, and look, it's confirmed. So what do we have? We have "Your Nomad Poland app is live." Okay, it's loading now. Oh, look at this, we have an app. Look, it's even built it, right? Do you remember how my beautiful design looked like? I had 4 cards and actually did it, right? So we have 4 cities organized in the row and we have nice pictures that it actually generated. The button is here. I also had this button. It added some tag here on the top. This was not in my design, but that's okay. And here we have our AI. So what now we are seeing, it's a frontend, it's just the user interface. We don't yet have the backend. And the backend is here. So, but let's go back again to the first thing. So what you are seeing now, it's something more than the click dummy. You can interact with your chat, you can tell it Tell me what to do in Warsaw. And it will respond. But this is still a look. It actually gave us a nice plan for 5 days. Okay, nice, we like it. But this is still just the frontend. So all these messages are stored in the frontend, meaning temporary memory. If you refresh, this will be all gone. To have something more tangible, to have your full application, you also have to connect your data storage. You need to put it live, and I will show you how to do that. But before, it's always good to first tweak all the UI elements. So first, okay, do I like those city cards? If I like them, I will not change them. Maybe you want to add more cities, then you would prompt Lovable What do we have? We have also Kraków, Wrocław, Gdańsk. We can ask it to add Gdańsk. Add. And this is how you describe it. Add one more. So add one more city card called Gdańsk. So now we are learning names of Polish cities. And this is how you do it.

I have actually one question. Will I always need to prompt Lovable or will I at some point also be able to basically take the code of the website and then manually edit it in the future?

Very good question. Yes, it's possible. So while Lovable is adding one more card for Gdynia, I will explain to you what you can do in regards of the code right now. So you have the code feature. Please look that I am now marking the text. I will click— I will copy this text to use it later. And now we click here, code, and this is the code mode, which is not fully a code mode. It's not allowing you edit everything. For example, you cannot upload or delete images. You need to do it through the window here. But what you can do works really well changing texts. So if you don't want to waste any credits on changing text, you can just look for the phrase in the code. And this one is not finding it. Let's try again. Oh, it's not finding it. Okay, this one is not finding it. We cannot change that one. Let's see if we can change something else. Choose your base in Poland. Because not everything can be edited in Lovable. Some things can be— oh, look at this. This one needs font actually. So some texts are actually text, some of them are loading as styles tags which you cannot really so easily change. But with this one, it opened the part of the code where it's actually stored, line 42. Now we would go to line 42, look, the text is here, and we can just edit it. I will just choose your city in Poland, not base city. I change the text, I click here, save. It's saving it now. And look at this, I went back and it's not place anymore, it's city. So yes, you can edit your code, but this is not the full coding experience as you would have it if you are using something like Cloud Code or Cloud CI or GitHub Copilot. It's a bit different to have a full coding experience, you have to connect your GitHub repository. So this is very easy, you just click here on this icon, connect your GitHub. You need to have a GitHub account and you need to create a GitHub project. I won't be doing it right now because sometimes it takes a moment until the code is migrated and you need to wait for that. To save the time, I won't be doing that, but yes, I do, I did it for some projects of mine that I moved the code to GitHub for a few reasons. One would be if you want to use a different deployment environment and hosting environment like Netlify, you need to move your code to GitHub and then connect Netlify to it. If you want to use, for example, GitHub Copilot to edit your code, then also needs to land on GitHub. And with GitHub overall, you have a lot of possibilities, right? You can connect any coding agent to it, and it— you can then edit your code on GitHub. Same with actually moving your code to something else. So works well with Replit. I moved my apps from Lovable to GitHub, then to Replit. It's also possible. Up to you. Definitely it's possible just with this connect GitHub feature. Okay, let's Let's see what Lovable did. Oh, look at this, it added. And this is also interesting. I did not prompt it in the style, right? It copied the style exactly as we have it, right? The same image, the same rounded corners, exactly the same card. Like this for here. We have a new card. When I click on it, it's empty because it was not described what should be here. But here, when I click on those, we are actually having some color leaving recommended to us. Coworking. Well, those images are rather big. I would rather want to have them smaller so they are there without scrolling. We could adjust that. Let me go back. And now next thing what we could do, for example, we can check here what we have. We have one more trip already saved. So here how the saving trip would look like. It added pierogi making. It's a very— pierogi is one of Polish traditional dishes, and even Lovable without me prompting it knows that it's one of the parts of the cultural thing in Poland. You should go and either eat pierogi or make some pierogi. Okay, but going back to Lovable, what is very cool in Lovable, you could also— let me show it here. No, this is not it. We don't want to attach anything, not yet. A new feature of Lovable is to adjust your design. So this used to take me a lot of credits to get the colors right. Sometimes you don't get them in the first go. Here with this one, it's not only changing them automatically, but has this hover option. If I hover over a specific theme, you can see that my app is changing, right? I can see different color schemas, how it would look like. And if you click Apply, it will change the colors of the whole application in one go. This is a really cool feature from Lovable. And overall, in your design, you can always edit it, right? So you can click on your design, the current theme is here, you click Edit, and then you can always change the colors that you have in your application, typography. It's quite limited, you don't have all too many fonts, But I think it's more than enough to start building something. And when you edit your theme, you can always save it to use it also later. Okay, that's about changing the colors. And yeah, and now let's actually add our backend. So as I mentioned, what we have right now is just a user interface, beautiful user interface where we can click around, decide on how we want to have our website look like or application look like, but nothing gets stored in the backend. We don't have backend yet, we don't have a database. How to connect the database? It used to be quite complicated, you need to have another account to something called Supabase. These days Laravel enabled that as a built-in feature. You just click on this cloud here and you just click enable cloud And it's adding it. And you can see now the thinking process. So it starts with enabling cloud infrastructure. And here we see what it will do. Okay, I will add built-in backend. I will add an LLM to your app because it noticed that we need to have an LLM. And you can always enable this to Never allow, always allow, so the app will not ask you for that, I mean, Lovable will not ask you for that. I always have everything on allow so I can always check it first before Lovable does changes, and only then I allow it. Here it's also very important for your data privacy where your project is hosted. You click on it and we have two options. We have Europe, Middle East, Africa, or Asia and Oceania. I will keep the European one, click Allow, and here we go. Our backend is built. Again, what is backend? These are the data tables storing all the data from our application, the relationships between data, also our connectivity to our AI. If you remembered which model I wanted to use, I just set OpenAI, right? We can check it in the moment which model it actually will be connected. Lovable, if it will follow my recommendations to use OpenAI or if it will actually connect something else. Okay, here we go. It confirmed Lovable Cloud is now enabled. Your project has a full backend with database and storage, user authentication, backend functions. Okay, cool. Let's check it out. And here, this is how the backend looks like. It's a very simple thing, nothing scary, very self-explanatory also. Here you can add user authentication, so if you want to hide parts of your website, parts of your application behind the login, you can choose from multiple options, right? We have email, phone, Google, Apple. Pretty common ones. Here you can add new users simply by sending them an email or manually setting up a password for them. That's about the users, but the interesting part for me is this one. Okay, so sometimes it actually goes in one go, it enables AI. This time it did not enable AI on its own, it's asking us to enable it. So I will now click Enable AI and now It's building the connectivity to the AI model. We will see in a moment which AI model it will decide to work with. Okay, okay, you are ready to connect the AI travel buddy chat to a real AI model. Okay, let's Let's see. Let's refresh if it's actually connected or not. Okay, so now the message changed. Lovable AI is now enabled and we can have Google Gemini, OpenAI GPT-5, And I think it did not choose it for us, did it? No, we have nothing connected. Okay, so now we can ask it, what are my options? What models I can connect? And this is what I am asking is which models are already pre-integrated in Lovable. So Lovable is supporting a few models from Google, a few models from OpenAI. And you can choose from those. What I mean by few models, it's not only that those are possible to be used, these are already integrated in Lovable, so you don't need any additional API keys, you don't need additional accounts, you don't need to buy any credits because they are already integrated and very easy to just grab and use. If you want to connect something else, yes, it's possible, but you need to go create your own account, connect your card, buy some credits, and then generate it. An API key and add it here. And it's, you can see, wire up your AI travel buddy with Gemini Flash. This is a common, always recommended by Lovable Model. But what else we have here? We have 5 from Google Gemini models. We have 4 from OpenAI. I am usually using the small ones. We don't need the big one, but for this use case, we can actually go with the one which is recommended. So, wire up my AI travel buddy with Gemini Flash. Let's do that. Okay. And while it's connecting the AI model, let's answer some questions maybe. Stefan, do we have questions?

Yeah, there were quite a few questions about how to basically connect the AI and how to build a chat functionality. I think this was answered already, or do you want to share a few more things?

So exactly as I mentioned before, you have two providers, Google and OpenAI, and you can choose from those models. It's really easy. You can just name it as I did it here, that it should wire up with Gemini Free. Flash, for example. If you want to use a different model, it's also possible, right? This is the newest models, right? Look, even 5.2, it's already here. If you want to use the older model, which usually is a bit cheaper, I think the 4.0 Mini was pretty good. If you like the model, if you already have it trained on OpenAI, you can also generate your API key. And connect it here. So your API keys are always stored here. This is the one that we are using now. You can simply add a secret name here, you put the key, you click Save, and you connected another model to it. This is how it's done. Now it's updating our chat and creating chat edge function. What it's an edge function. Here we have this. This was not there before. Edge functions are in technical terms, backend API, less technical terms, is the way how your user interface and the chat window will communicate with actually, in this case, Google Cloud to use Gemini. So first, the user input is collected through the chat. Window, then it's being sent to the Lovable backend, and then it's sent to Google. And this is this Edge Function which is actually responsible for doing that. Okay, let's see what we actually have. So Lovable is always telling you what it did. You can click Preview and then you will see what's happened here. Okay, now we have twice the— let's click this one. So now it's really powered by our model. We chose the Gemini model and it will actually have better answers. So now you can not only use those, because now it's default, right? We did not do any training. If you want to train it, fine-tune it even more, what you can do, I also have a thing prepared for that, which is just for learning purposes, simplified version. So it's not a state of the art of anything like this, but it actually has all the must-haves. Let me open that. So next stage, what I would do when I have the model connected, and now Zoom is overlapping with my Word. And now please confirm if you are seeing the Word document.

Yes, we do.

Okay, so it's something called system prompt, and this is a basic minimum to tell your AI how it should behave, right? So in this case, my AI will have personality: warm, enthusiastic, practical, speak with casual but specific language. I also added some description how it should respond. So when a user describes their preferences, budget, dates, interest, build a personalized day-by-day itinerary. So that's also important, right? How it should respond, what should be the outcome. Cities we cover, these 4. I actually added now Gdynia, so this one is not here, but if you wanted, you can always edit it and add more cities. Here I also have added some coworking spaces, so let's say you want to have affiliate partnerships to generate extra revenue, and then you prompt your AI to refer these specific activities or sell these specific products, this is how to do it, right? You can simply add them in the prompt, in the master prompt, that it should take information from a specific URL first and then scroll through other options. And this is how it looks like to not talk about it too long. I will just prompt it and then I will continue. It's rather a long prompt because I gave it some suggestions and you just do it here, right? Unlovable will know what is this about because it's system prompt we can add for.

There's a few more questions regarding the chat functionality. So, you know, what credits are being used if you connect to Gemini? Are there credits used from Lovable or how does this work?

Very good question. So these are not calculated in the same way as the Lovable credits. These are calculated, I think, the same way as you would integrate directly with Gemini. I did not really compare those. It's also not so easy to actually calculate those costs, but they are not the same as the lovable credits. So don't be afraid, it's the better option if you are not having such a heavy traffic at the beginning, it's just an MVP, it's definitely the better option to use the built-in lovable thing. You can always, here I think you can always add some. So here we see that the model connector is Germany free flash. And if you would have other models, you can always switch between them and see the usability. And there is, I think, a way that we could actually limit the amount of credits that we are spending on AI. Do we have it somewhere? No, actually, no, I'm not— functions, AI. No, that's not actually possible. Or maybe it's actually, I think it's in the settings in the workspace. I think I saw it somewhere that you can actually have it capped that you don't overgo certain limit. That's definitely possible. Okay, here we go. So now what happened? System prompt updated and deployed with your full Nomad Guy personality. So now when I refresh this, it's actually changed a bit, the text. So it's using already the recommendations. The next step, what we could do, I did already provided some recommendations directly in this system prompt. If you want to provide more recommendations about the specific locations that the AI should recommend, you can always just click Add and attach the file. Files which are working really well, it's either Excel or just a basic data file like Markdown document or something like this. I would not— if it's a beautiful styled PowerPoint with some graphics on it, the AI might not really understand what do you mean by that. So it's better to have plain text. Data, database style, and it's easier for AI to actually follow what do you want. And now I just uploaded it without telling it anything, and I'm pretty sure it will understand that this is something that we want to use it for training. If not, it will actually ask. See, it's actually creating a database, so this will be then stored in our database, and we can always refer to this specific file. I see a lot of chat messages, so let's go on with the questions.

Yeah, there was another question basically, and if you will show how to deploy the results later.

Definitely, we will do that.

And perhaps another question, a bit more broad, but perhaps you can also cover this in 20 seconds, was How do you basically build a good MVP or what are some characteristics of a good MVP?

Very good question. I would say the most important part of the MVP would be your user journey. So you clearly describe what user is seeing first, what they see next, which action they should take. Do they start directly chatting with the AI or maybe they first should see the cities and explore the cities first. So actually describing how the user journey looks like, it's the first and a must-have for an MVP.

Perfect. And then there were a few other questions basically around how do you set up a multilingual page. I wanted to have it in German and English and Polish perhaps. How would I do that?

Very, very good question. This is actually— I did it for a few projects already. Lovable can actually build in the second kind of language support for you. We can actually do it now. Even we can try it now. So which language do we want to have? Let's say we want to have Polish. We are traveling to Poland. Let's put Polish and we will do it like this. I will click the plan mode because here I am asking it something new, so it might get confused. I would like to first see what it does and then approve it and then build it. See, I just described it in a very simple way. Okay, no big typos now, it's just capitalizing, it's okay. And here, important feature, right-clicking Plan Enabled, it will first tell you what it will do, so you can stop it if you don't like it. If you disable that and click Build, it will start building it, where sometimes it might go wrong. I don't recommend it if you are just starting with Lovable, because sometimes even if you are using prompts which worked for someone else, it might not work for you, because at the end it's an AI, it's probabilistic. It always does something a bit different. Okay, so here we go. It's creating the plan. While it's creating the plan, we can answer the next question. Do we have any other questions?

Yeah, there's two other ones. So first is a bit about connecting backends. How do the credits work with backends? Do you need Superbase credits? How does this work? And the next one— no, let's cover this one and then I will ask the next one.

Very good question regarding Supabase. So yes, indeed, Loveable is using Supabase, but Loveable have Supabase integrated inside its own ecosystem. If you are building a larger project where you also want to have more control how the tables are built and so on, if you have more experience with building more robust data structures, go for Supabase, but you have to pay extra for this. The built-in lovable version of Supabase, it's totally fine. I built large projects on it, works really well. You don't need an extra account, you don't need any extra credits. It's all calculated in this 100 credits from lovable that you get, or actually more. I will talk about credits in a moment when this will start building so I can scroll up. So talking about credits, What's actually pretty cool is that you can click on 3 dots here. You can see credits used, okay, 2.2, quite a lot. What did we do here? Ah, look at this. We just added this full spreadsheet of the database. Okay, it was quite not really big, right? For AI, we can have even bigger files, but it had some recommendations already and this ate up 2.2 of our credits. To give you a comparison, just to build those first landing pages, it took us, I think, 4-point-something. Normally it takes less than 5. We can check it here. Where do I have it? Oh, here we go. Yeah. Oh, actually no, even less, right? So 2.8 to actually build the app and almost the same to just add additional database. So yes, indeed, for the databases, it's actually eating up more. This is why I said first you prompt your front side, everything what the user is saying. If you are really sure this is looking good, you like it, then only build the backend to it to do as little edits on the backend as possible. But the answer is no, you don't need any extra accounts, no extra credits, everything can be handled through LovaPool. And regarding the credits, you also can have an option. So, for example, here I'm seeing that I have 38.2 left, and I am on the Pro plan, the same as you all now. What's really good, you don't need to upgrade for a higher tier. You can simply top up your credits. When you click top up your credits, you have an option to buy extra credits. So if you add 100 additional credits, it's I think €30. If we say 300 I want to have, it's $75, which is good if you are building a lot in one month. You can just top up your credits and keep building, don't need to wait for your account to be reset and to get more credits. If you are building a lot, then most likely you will need to upgrade and have a higher tier of lovable plan. Okay, it's still building our language support. This will also eat up a lot of credits because it's rebuilding the whole system, uh, using, uh, different, uh, language. It's going to be all in Polish when it's done. Uh, so we have a bit more time left to answer some questions while it's still building.

So two more questions. One is again basically on how to deploy the website, but I think you will show this in a minute, right? Um, so quite a few people are interested now on how to get this out onto the market. And the next step after going out onto the market is of course how do you basically measure and see what the user experience is like? How are users using this website? How, you know, what, what are people clicking on? Where are people staying? Um, so how can I basically monitor how people are using, using the website? How can I get this data?

Very good questions. I really like that you are also excited to learn more about your users. It's a very important thing to validate very early on. Just quickly about the language, you can see I did not translate anything. I just asked it to have two languages, Polish and English. And this button is not looking all too nice. I will probably style it better, but it's there. And look at this. Most of you probably doesn't understand. I can tell you it is in Polish and it's actually pretty good Polish, so you can really have it all done. Also, even AI is now talking in Polish. Everything is in Polish, just like this. How long it took? I think 3 minutes it was building. It ate, as I said, quite a lot of credits, 4.4, but still 4.44, it's costing you a few cents and it's still cheaper than translating it all manually. If you don't like certain words, as I said, this feature with going here to the code mode, searching for a specific phrase, editing it works really, really well. You can always do it with this. But okay, you are so excited, everyone is so excited to see it actually published, so let's do that now. And it's not building anything. Super easy. It's, I think, the easiest ever builder that's allowing you to publish things. You just click Publish. Then here, you can check review security. If you are building a production app, super important to resolve all the issues, and Lovable will help you resolve all the issues on its own. You just keep asking it, "Okay, resolve this, resolve this," and it will do it on its own. You can see it now, it's already showing us some warning, but our app doesn't have any personal data stored. We don't have any emails. We just have a basic training for the AI, but we are also not storing the user preferences. I will not be doing any security changes right now. I will just click Publish. That's it. This is how our app becoming to life. It's building now. It takes a moment and we have it. Our app is built. So now when I copy this link, we can share it with you all. I am looking for the chat. Here we go. Please tell me if you can access it. I think if I share it this way, you need to create an account. Yeah, you can. Okay, that's good. That's it. You can share it even in social media. If I click LinkedIn, look at this, it's loading my post. You can write about it directly. If you just build it, you can just say, hey guys, I just launched my MVP, test it now, and you have preview already here. It still says lovable app. You need to change this type of things. This lovable is not changing it. On the first go, you need to always prompt it, but this is also very easy to be changed. Okay, let's go back to our project. So next thing, when it's published, you can— this is also really cool, but it's all only available on the paid option— you can connect your custom domain. So if you have a domain already bought, you click Connect Domain, You type in the domain name and it's quite smart, it knows which provider you are using, either being it Hostinger or 1&1.com or GoDaddy. It picks it up automatically, redirects you to the login page, you just put your email, login credentials, and when you log in, the domain gets verified. Takes a moment to, to go live, and then you can just have your website or app completely connected to your custom domain in minutes. Sometimes it takes a bit longer, depends on your provider, but normally it's few minutes and you have it. You can also purchase the domains here on Lovable. Never done that, not sure if it's so expensive. You can try it. I always bought, bought it traditionally. My current domain is on Hostinger. I think it's pretty reliable and also not so expensive service, and I also use this function to connect it. Worked really well. So this is how to deploy your app. Very easy, right? Minutes and it's live, and then you can actually share it with everyone, test it with your early adopters. Next thing to cover today before we go to the closing words, you asked me about the analytics, and you have analytics built in here. So, okay, quite a lot of you clicked on the website. I can see it here. We have 45 visitors. We have 170 page views, visit, views per visit, visit duration 16 seconds. Okay, bounce rate 31%. Okay, so a lot of you actually close it very fast. That's okay. We can see pages which were visited. We can see from where you are coming from. Okay, quite a lot of people from Austria. You may know it already, but yeah, you can see those basic things here. We can also see how many users are using it on the desktop comparing to mobile. All of this, it's a built-in feature on Lovable. If you want something more robust, you name it and you have it. You can connect Google Analytics to it. You can connect Heap to track your users' performance. All of this have at some point some paid tier. So if you hit it, then you would need to pay for it. If you don't need it, if you are just testing, I think the built-in lovable feature is pretty cool for that. What you can also test, it's your website speed. This is the, yeah, SEO part, calculated live, best practices, and so on. While it's calculating, we will have a moment for the next question because we are running out of time.

Done. Quite a few questions came up. Now perhaps we won't be able to cover all of them, so feel free to connect to Kasia on LinkedIn and you can also follow up there. Basically, there's one thing. Are credits being used if users are accessing the web app now?

Very good point. Yes, indeed, they are being used, but a bit different way. No credits is being used when users are actually just going on your website. This is not using credits. What's using credits, they are using the AI feature because this is now powered by your credits. So if you are now trying out the AI feature, you're gonna probably use up all my credits, which is fine. I have other workspaces with credits, so go ahead and try it. But yeah, this, this is something that actually is using up your credits if you put your website live. You have AI feature on it, this will eat up your credits, yes. Any other questions?

Yes, there were a few other questions. So one question is also now this is a web application basically or a website, can you also transform this into a mobile app?

Very good question. Unfortunately, so let's define what we mean by mobile app. If you would like to have a progressive web application, the type of an application that you open on your mobile browser like Chrome, you go to the three dots, download app, and then you install it on your phone. Possible. It's called progressive web application, but it's not the native application in its own sense. It's not the same as the App Store or Play Store for mobile apps. You cannot do that on Lovable. What you can do, you can take your Lovable project to an agent like Replit And as I said it at the beginning, Replit did launch a feature to build mobile apps. I did not yet try it myself because it was just launched like 2 weeks ago, but in theory it should be possible. So if you try it, please drop me a message on LinkedIn. How was your experience? Did you manage to launch your app on App Store or Play Store? Or yeah, App Store and Play Store, and let me know. Okay, I think with that we will go slowly to the closing words because we are running out of time, but if you still have some questions, we can stay a bit longer.