Connecting to LovableAI - Lovable Tutorial

Let's incorporate AI into our application. I'm going to show you the easy way on how to do it, since we're trying to build our application as quickly as possible. So for that, we're going to use Lovable AI. So let's go back into our application and say, I want to add the ability to import exercises from an article that's in French, where I paste a URL, and I get five new exercises in my UI. Let's say I want to use Gemini Flash 2.5. So this is a pretty cheap model that I can use, and as part of the Pro Plan, I get $1 of AI credits, so I don't want to break the bank too much. So let's click Enter. And while this is going, let's go into the cloud option here and see what's enabled. So you can see here, I have AI, and this was enabled on my project. So it's going through the work. And with that, it's incorporating edge functions that lets me connect to the AI API to actually send the request to an AI model. Now this is being done in the background, so I don't have to worry too much about the details. So let's go back to our preview. All right, here we go, we got some updates here. And we've enabled AI into our project. So it looks like our application is ready, let's test it out. I have this article open here about the US soccer championships, but it's in French, so I want to translate it to English and practice my soccer vocabulary. Let's copy this URL, click on Import from URL, paste, and say Generate Flashcards. Looks like I have five new flashcards here. Let's click Next until we get to them. So I have this one, so Crown Championship, okay. Next one, I am Portay, one carried off, okay. Adobe SEAL at home, okay, these look good. If I go back, I actually noticed that these weren't saved. So we need to tell our AI model to actually save it in the database. So let's say article flashcards are not saved in the database. Can you please fix it? Right, here we go. So we need to create a table here. And to modify the database, we currently need to click the Allow option. Now, the reason that this pop-up comes up is that sometimes AI models can delete our databases. You might've heard of some of these stories, but if you want, you can enable it to be Allow Always if you're feeling a little bit more risk tolerant. So we're working through this, and you'll see that there is some kind of other issue that popped up. We're going to cover this in another video about security and optimizations, but let's focus on our current feature. Okay, it looks like our feature has been implemented. Let's click on Import from URL, paste that same URL, and click Generate Flashcards. Okay, let's click through them. We have some new ones here. Let's go back and click again. And it looks like they're saved. If I go back, I can notice here that these additional cards are not being saved as part of this prompt. So let's go ahead and go to Visual Edits. Click on here and say, we don't update the number of exercises based on the imported URL once. Let's fix that. So in this case, I'm doing specific edits. I could also change the colors or make other additions. Now, one more thing I wanted to show you as we're waiting for this to finish is that, as we're using different tools here, we can click on Show All to see what the AI model is doing. So in this case, it's reading the contents of the different front-end files to see what it needs to change. All right, it looks like we made the update, so we can see 5 out of 10 cards learned down here. So there we go. We've incorporated AI into our language learning application that allows us to add more modules based on articles that we think are interesting. In the next video, we're going to focus on authentication and user access. We're going to go a little bit more into the details of what our application has created for user profiles and progress tracking. I'll see you in the next video.