Build Anything with Lovable + n8n AI Agents (beginner's guide)

Today we're going to be talking about how you can build anything with Lovable and n8n. So we're going to be doing a live build of spinning up a web page with Lovable and then also building the backend on n8n. But first of all, I wanted to go over high level what this architecture looks like. So right here is Lovable. This is what we're starting off with, and this is where we're going to be creating the interface that the user is interacting with. What we do here is we type in a prompt in natural language and Lovable basically spins up that app in seconds, and then we're able to talk back and forth and have it make minor fixes for us. So what we can do is when the user inputs information into our Lovable website, it can send that data to n8n. The n8n workflow that we're gonna set up can, you know, use an agent to take action in something like Gmail or Slack, Airtable, or QuickBooks. And then n8n can send the data back to Lovable and display it to the user. And this is really just the tip of the iceberg. There's also some really cool integrations with Lovable and Supabase or Stripe or Resend. So there's a lot of ways you can really use Lovable to develop a full web app. And so while we're talking HighLevel, we just wanted to show you an example flow of what this N8N could look like, where we're capturing the information the user's sending from Lovable via webhook. We're feeding that to a large language model to create some sort of content for us, and then we're sending that back and it will be displayed in the Lovable web app. So let's head over to Lovable and get started. So if you've never used Lovable before, don't worry. I'm gonna show you guys how simple it is. You can also sign up using the link in the description for double the credits. Okay, so this is all I'm gonna start with just to show you guys how simple this is. I said, help me create a web app called Get Me Out of This. Where a user can submit a problem they're having. Then I said to use this image as design inspiration. So I Googled landing page design inspiration, and I'm just going to take a quick screenshot of this landing page, copy that, and then paste it into Lovable, and then we'll fire this off. Cool. So I just sent that off, and on the right-hand side, we're seeing it's going to spin up a preview. So this is where we'll see the actual web app that it's created and get to interact with it. Right now, it's going to come through and start creating some code. And then on the left-hand side is where we're going to have that back and forth chat window to talk to Lovable in order to make changes for us. So right now, as you can see, it's gonna be creating some of this code. We don't need to worry about this. Let's go into n8n real quick and get this workflow ready to send data to. Okay, so here we are in n8n. If you also haven't used this app before, there'll be a link for it down in the description. It's basically just gonna be a workflow builder and you can get a free trial just to get started. So you can see I have different workflows here. We're gonna come in and create a new one. And what I'm gonna do is we're gonna add a first step that's basically saying, okay, what actually triggers this workflow? So I'm going to grab a webhook. And so all a webhook is, is, you know, it looks like this. And this is basically just a trigger that's going to be actively listening for something to send data to it. And data is received at this URL. And so right now there's a test URL and there's a production URL. Don't worry about that. We're going to click on this URL to copy it to our clipboard. And basically we can give this to Lovable and say, okay, whenever a user puts in a problem they're having, you're going to send the data to this webhook. Cool. So hopping over to Lovable, as you can see, it's still coding away and looks like it's finishing up right now. And it's saying I've created a modern problem-solving web app with a hero section, submission form, and feature section in blue color. Looks like there's an error. So all we have to do is click on try to fix and it should go back in there and continue to spin up some more code. Okay, so now it looks like it finished that up. And as you can see, we have the website filled up. And so it created all of this with just an image as inspiration, as well as just me telling it one sentence, Help me create a web app called Get Me Out of This where a user can submit a problem they're having. So hopefully this should already open your eyes to how powerful this is. But let's say for the sake of this demo, we don't want all this. We just kind of want one simple landing page where they send a problem in. So all I'd have to do is on this left-hand side, scroll down here and say, make this page more simple. We only need one field, which is what problem 'Can we help with?' So we'll just send that off. Very simple query, as if we were just kind of talking to a developer who was building this website for us. And we'll see it modify the code, and then we'll see what happens. So down here you can see it's modifying the code, and now we'll see what happens. It's just one interface right here. So it's created like a title, it has these different buttons, and we could easily say like, okay, when someone clicks on the home button, take them here, or when someone clicks on the contact button, take them here. And so there's all this different stuff we can do, but for the sake of this video, we're just gonna be worrying about this interface right here. And just to give it some more personality, what we could do is add in a logo. So I can go to Google and search for a thumbs up logo PNG, and then I can say add this logo in the top left. So I'll just paste in that image. We'll fire this off to Lovable, and it should put that either right up here or right up here. We'll see what it does. But either way, if it's not where we like it, we can just tell it where to put it. Cool. So as you can see, now we have that logo right up there. And let's say we didn't like this. All we'd have to do is come up to a previous version, on these three dots and hit restore, and then it would just basically remove those changes it just made. Okay, so let's test out the functionality over here. Let's say a problem is we want to get out of— oh, looks like the font is coming through white, so we need to make sure this is changed. And boom, we just told it to change the text to black, and now it's black and we can see it. So anyways, I want to say Get me out of a boring meeting. So we'll hit Get Me Out of This and we'll see what happens. It says submitting and nothing really happens, even though it told us, you know, we'll get back to you soon. Nothing really happened. So what we want to do is we want to make sure that it knows when we hit this button, it's gonna send that data to our N8N webhook. So we've already copied that webhook to our clipboard, but I'm just gonna go back into N8N. We have the webhook. We'll click on this right here, back into Lovable, basically just saying when I click Get Me Out of This, so this button right here, send the data to this webhook. And also what we want to do is say as a POST request because it's gonna be sending data. So we're gonna send that off, and while it's making that change to the code, real quick we want to go into N8N and make sure that our method for this webhook is indeed POST. So I don't want to dive into too much what that means really, but Lovable is gonna be sending a POST request to our webhook, meaning there's gonna be stuff within this webhook like body parameters and different things And so if this wasn't configured as a POST request, it might not work. So you'll see once we actually get the data and we catch it in n8n. But anyways, now when the users click on get me out of this, the form will send the problem description to your webhook via a POST request. So let's test it out. So we're gonna say I forgot to prepare a brief for my meeting. We're gonna go back in n8n real quick and make sure we hit listen for test event. So now our webhook is actively listening back in Lovable. We'll click get me out of this and we will see what happens. We can come in N8N and we can now see we got this information. So here's the body I was talking about where we're capturing a problem, which is I forgot to prepare a brief for my meeting. So we now know that Lovable is able to send data to N8N, and now it's on us to configure what we want to happen in N8N so we can send the data back to Lovable. Cool. So what I'm going to do is I'm going to click on the plus that's coming off of the webhook, and I'm going to grab an AI agent. What this is going to do is allow us to connect to a different chat model, and then the agent's going to be able to take this problem and and produce a response. And I'm gonna walk through this step by step, but if you don't really wanna worry about this and you just wanna worry about the Lovable side of things, you can download the finished template from my FreeSchool community. I'll link that down in the description. That way you can just plug in this workflow and just give Lovable your n8n webhook and you'll be set up. But anyways, if you join the FreeSchool community, you'll click on YouTube Resources, click on the post associated with this video, and you'll be able to download the JSON right here. And then when you have that JSON, you can come into n8n, open up a new workflow, Click these three dots on the top and then click Import from File. And when you open that up, it'll just have the finished workflow for you right here. But anyways, what I'm gonna do is click into the AI agent, and the first thing is we have to configure what information the agent is going to actually read. So first of all, we're gonna set up that as a user prompt. We're gonna change this from Connected Chat Trigger Node to Define Below because we don't have a connected chat trigger node. We're using a webhook, as we all know. So we're gonna click on Define Below. And we are basically just going to scroll down within the webhook node where the actual data we want it to look at is, which is just the problem that was submitted by the user. So down here in the body, we have a problem and we can just drag that right in there. And that's basically all we have to do. And maybe we just want to define to the agent what it's looking at. So we'll just say like the problem, and then we'll put a colon. So now you can see in the result panel, this is what the agent will be looking at. And next we need to give it a system message to understand what it's doing. So I'm going to click on Add Option, open up a system message, and I am going to basically tell it what to do. So here's the system message that I came up with just for a demo. You are an AI excuse generator. Your job is to create clever, creative, and context-appropriate excuses that someone could use to avoid or get out of a situation. And then we told it to only return the excuse and also to add a touch of humor to the excuses. So now before we can actually run this to see how it's working, we need to connect its brain. Which is going to be an AI chat model. So what I'm gonna do is I'm gonna click on this plus under chat model. For this demo, we'll do an OpenAI chat model, and you have to connect a credential if you haven't done so already. So you would basically come into here, click create new credential, and you would just have to insert your API key. So you can just Google OpenAI API. You'll click on API platform. You can log in. Then once you're logged in, you just have to go to your dashboard, and then on the left, you'll have an API key section. All you'll have to do is create a new key, We can call this one test lovable. And then when you create that, you just copy this value, go back into NNN, paste that right here. And then when you hit save, you are now connected to OpenAI's API. And we can finally run this agent real quick. If I come in here and hit test step, we will see that it's going to create an excuse for I forgot to prepare a brief for my meeting, which is, sorry, I was too busy trying to bond with my coffee machine. Turns out it doesn't have a prepare briefs setting. So basically what we have is we're capturing the problem that a user had, we're using an AI agent to create an excuse, and then we need to send the data back to Lovable. So all we have to do here is add the plus coming off of the agent. We're going to call this a Respond to Webhook node, and we're just going to respond with the first incoming item, which is going to be the actual response from the agent. But all we have to do also to configure this is back in the Webhook node, there's a section right here that says Respond. Instead of responding immediately, we want to respond using the Respond to Webhook node. So now it will be looking over here, and that's how it's going to send data back to Lovable. So this is pretty much configured the way we need it, but we have to configure Lovable now to wait for this response. Okay, so what I'm telling Lovable is when the data gets sent to the webhook, we wait for the response from the webhook, then output that in a field that says, here is your excuse. So we'll send this off to Lovable and see what it comes up with. Okay, so now it said that I've added a new section that displays, here's your excuse, along with the response message from the webhook when it's received. So let's test it out. First, I'm going to go back into N8N and we're going to hit test workflow. So the webhook is now listening for us. So we'll come into our lovable web app and say, I want to skip a boring meeting. We'll hit get me out of this. So now that data should be captured in N8N. It's running. And now the output is, I just realized my pet goldfish has a life-altering decision to to make regarding his tank decorations, and I simply cannot miss this important family meeting. So it doesn't look great, but it worked. And if we go into N8N, we can see that this run did indeed finish up. And the output over here was, I just realized my pet goldfish has a life-altering decision, blah, blah, blah. So basically what's happening is the webhook is returning JSON, which is coming through in a field called output. And then we have our actual response, which is exactly what Lovable sent through. So it's not very pretty, and we can basically just tell it to clean that up. So what I just did is I said only return the output field's value from the webhook response, not the raw JSON. So we wanted to just output this right here, which is the actual excuse. And so some of you guys may not even have had this problem pop up. I did a demo of this earlier just for testing, and I basically walked through these same steps and this wasn't happening. But you know, sometimes it happens. Anyways, now it says the form only displays the value from the output field. So let's give it another try. So back in N8N, we're going to hit test workflow so it's listening for us. In Lovable, we're going to give it a problem. So I'm saying I overslept and I'm running late. I'm going to click get me out of this and we'll see the workflow just finished up. And now we have the response in a clean format, which is I accidentally hit the snooze button until it filed for a restraining order against me for harassment. Okay, so now that we know that the functionality within N8N is working, it's sending data back, we want to customize our actual interface a little bit. So the first thing I want to do just for fun is create a level system. So every time someone submits a problem, they're going to get a point. And if they get 5 points, they'll level up. If they get 20 total points, they'll level up again. Okay, so I just sent off create a dynamic level system. Every time a user submits a problem, they get a point. Everyone starts at level 1, and after 5 points, they reach level 2. Then after 15 more points, they reach level 3. And obviously, we'd have to bake in the rest of the levels and how many points you need. But this is just to show you that this is going to increase every time that we submit a problem. And also you'd want to have some sort of element where people actually log in and get authenticated, and you can store that data in Supabase or in, you know, Firebase, whatever it is, so that everyone's levels are being saved and it's specific to that person. Okay, so it looks like it just created a level system. It's reloading up our preview so we can see what that looks like now. Looks like there may have been an error, but now as you can see right here, we have a level system. So let's give it another try. I'm going to go into N8N. We're going to hit test workflow so it's listening once again. And we're gonna describe a problem. So I'm saying my boss is mean, I don't wanna talk to him. We're gonna hit submit. The NNN workflow's running right now on the backend, and we just got a message back, which is, I'd love to chat, but I've got a hot date with my couch and binge watching the entire season of Awkward Bosses. And you can see that we got a point. So 4 more points to unlock level 2. But before we continue to throw more prompts so that we get up to level 2, let's add in one more cool functionality. Okay, so I'm just firing off this message that says, add a dropdown after what problem can we help with? That gives the user the option to pick a tone for the response. So the options can be realistic, funny, ridiculous, or outrageous. And this data, of course, should be passed along in that webhook to N8N because then we can tell the agent to say, okay, here's the problem and here's the tone of an excuse the user's requesting. And now it can make a request or a response for us. So it looks like it's creating that change right now. So now we can see our dropdown menu. It has realistic, funny, ridiculous, and outrageous. As you can see, before you click on it, it's maybe not super clear that this is actually a dropdown. So let's make that more clear. And what I'm gonna do is I'm gonna take a screenshot of this section right here. I'm going to copy this and I'm just gonna paste it in here and say, make this more clear that it is a dropdown selection. And we'll see what it does here. Okay, perfect. So it just added a little arrow as well as a placeholder text. So that's way more clear. And now what we want to do is test this out. Okay, so now to test this out, we're gonna hit test workflow, but just keep in mind that this agent isn't yet configured to also look at the tone. So this tone won't be accounted for yet, but what we're gonna do is we have I overslept and the response is gonna be funny. We'll hit generate me a, or sorry, get me out of this. So we have a response and our level went up. We got another point, but if we go into N8N, we can see that it didn't actually account for the tone yet. So all we have to do is in the actual user message, We're basically just going to open this up and also add a tone. And we can scroll all the way down here and we can grab the tone from the body request. And now it's getting the problem as well as the tone. And now in the system prompt, which is basically just defining to the agent its role, we have to tell it how to account for different tones. Okay, so here's what I came up with. I gave it some more instructions and I said, you're going to receive a problem as well as a tone. And here are the possible tones, which are realistic, funny, ridiculous, and outrageous. And then I kind of said what that means. And then I said your excuse should be 1 to 3 sentences long and match the selected tone. So that's all we're gonna do. We're gonna hit save. Okay, so now that it's looking at everything, we're gonna hit test workflow. The webhook's listening. We'll come back into here and we're gonna submit, I broke my friend's iPhone, and the response tone should be outrageous. So we're gonna send that off and it's loading because our NNN workflow's triggering. And now we just got it. We also got a message that says we earned a point. So right here, we now only need 2 more for level 2. But the excuse is I was trying to summon a unicorn with my telekinetic powers and accidentally transformed your iPhone into a rogue toaster that launched itself off the counter. I swear it was just trying to toast a bagel. Okay, so obviously that's pretty outrageous, and that's how we know it's working. So I'm sure you guys are wondering, what would you want to do if you didn't want to come in here and every single time make this thing, you know, test workflow? What you would do is you'd switch this to an active workflow. Now basically we're not going to see the executions live anymore with all these green outlines. But what's happening now is it's using the production URL. So we're gonna have to copy the production URL, come back into Lovable, and just basically say, I switched the URL— or sorry, let's call it, I switched the webhook to this. And we'll paste that in there, and it should just change the data. The logic should be all the exact same because we've already built that into this app, but we're just going to switch the webhook. So now we don't have to go click the test workflow every time in n8n. And super excited, we have 2 more problems to submit and then we'll be level 2. So now it says the webhook URL has been updated, so let's test it out. As you can see in here, we have an active workflow. We're not hitting test workflow. We're gonna come in here and submit a new problem. So we are gonna say, um, I want to take 4 weeks off work, but my boss won't let me. We are going to make the response tone. Let's just do a realistic one and we'll click get me out of this. It's now calling that workflow that's active and it's listening. So we got a point, we got our response, which is I've been dealing with some unforeseen family matters that need my attention. I believe taking 4 weeks off will help me address them properly. I plan this time to use this time to ensure everything is in order so I can return more focused and productive. I would definitely say that that's realistic. What we can do is come in and end it in. We can click up here on our executions and we can see what just happened. So this is our most recent execution. And if we click into here, it should have been getting the problem, which was, I want to take 4 weeks off work, and the tone, which was realistic. Cool. So now that we know that our active new webhook is working, let's just do one more query and let's earn our level 2 status. I'm also curious to see, you know, we haven't worked in any logic of what happens when you hit level 2. Maybe there's some confetti. Maybe it's just a little notification. We're about to find out. Okay. So I said I got invited on a camping trip, but I hate nature. We're going to go with ridiculous and we're going to send this off. See what we get and see what level 2 looks like. Okay, so nothing crazy. We could have worked in like, hey, you know, make some confetti pop up. All we do is we get promoted to level 2 up here. But you know, as you can see, the bar was dynamic, it moved, and it did promote us to level 2. But the excuse is, I'd love to join, but unfortunately I just installed a new home system that detects the presence of grass, trees, and anything remotely outdoorsy. If I go camping, my house might launch an automated rescue mission to drag me back indoors. So that's pretty ridiculous. And also, by the way, up in the preview you can make it mobile so we can see what this would look like on mobile. Obviously it's not completely optimized yet, so we'd have to work on that, but that's the ability to do both desktop and mobile. And then when you're finally good with your app, up in the top right we can hit publish, which is just going to show us that we can connect it to a custom domain or we can publish it at this domain that is made for us right here. Anyways, that is going to be it for today's video. This is really just the tip of the iceberg with, you know, Anybin already has basically unlimited capabilities. But when you connect that to a custom front end, when you don't have to have any sort of coding knowledge, as you can see, all of these prompts that I used in here was just me talking to it as if I was talking to a developer. And it's really, really cool how quick we spun this up. So if you guys are interested in seeing some more in-depth videos with Lovable, like connecting to Supabase or Firebase and setting up some user authentication stuff, definitely let me know. I'd love to make some content on that for you guys. If you kind of liked this live build style, then definitely check out my paid community. The link for that will be down in the description. It's gonna be a pretty hands-on approach to learning how to build out these automations with AnyDen or Lovable or whatever it is you're working with. We've got a great community of members who are always sharing resources and challenges that they're running into, as well as a classroom section with some deep dive topics like building agents, vector databases, APIs, and HTTP requests, as well as step-by-step builds. And then we have 5 live calls per week to make sure you're never getting stuck and also meeting other people in this space. So I'd love to see you guys in this community on some of these live calls, but as always, Appreciate you making it to the end of the video. If you learned something new or if you enjoyed, please give it a like. Definitely helps me out a ton, and I will see you guys in the next video. Thanks.