Everyone’s Sleeping on This Lovable + n8n Combo (I’m Not Anymore)

0:00 I've been building apps every day with 0:01 Lovable for the past month. We're 0:03 talking over 200 hours and it's been 0:05 going great. But then I added N to the 0:09 mix and it blew my mind. This tech stack 0:13 actually works so well it helped me 0:15 place in the top 100 of this hackathon 0:18 competition last weekend. They're 0:20 announcing the winner today. Who knows, 0:22 we might even win. In this video, I'm 0:24 going to show you why N8N plus Lovable 0:27 is overpowered. We're going to build an 0:29 app front to back and it's going to take 0:31 us like 20 minutes. But more important 0:33 than that, I'm going to show you how I 0:35 would use this overpowered combo to 0:38 actually make money. Let's get started. 0:41 Today, we're going to build a personal 0:43 finance app with Lovable that shows all 0:45 your expenses. But that's not the 0:48 impressive part. We're going to use N8N 0:50 to set up an AI agent on the back end 0:53 that's going to be able to act as our 0:55 financial advisor. We'll be able to ask 0:58 questions about our expenses and receive 1:01 insights from our AI agent. This is just 1:05 a simple example. We all have expenses, 1:07 but there is one thing that you and I 1:10 like way more than spending money, and 1:12 that's making money. So, I'm going to 1:14 tie what we build today to a simple 1:17 framework that allows tools like Google 1:19 and Chat GBT to make billions. and I'll 1:22 teach you how you can leverage Lovable 1:24 and N to piggyback off their solutions 1:28 so you can make your own apps. If you 1:31 understand what I'm about to show you, 1:33 you can go out there and start solving 1:36 real problems with software. I'll tell 1:38 you a little secret. People are happy to 1:41 pay you money if you solve their 1:43 problems. Here's the framework. All 1:46 software is actually built on a input 1:48 output system. So what do we mean by 1:51 that? Let's take a simple example that 1:53 everybody will understand. If we go to 1:55 Google, we can input healthy food to the 1:59 search bar. And what Google will do, 2:01 what this software will do is output a 2:04 list of relevant links. So, it could be 2:06 links to websites that talk about 2:08 healthy food, might be websites that 2:10 sell healthy food, it could be a little 2:12 bit of anything. Whatever Google thinks 2:14 is relevant to your search term, healthy 2:18 food, Google will output for you. The 2:20 next level of this would be a chat GPT 2:23 or an LLM model where we input a text 2:27 which would be create a diet plan for 2:29 muscle growth. And what chat GPT will do 2:31 with it's going to output a custom meal 2:34 plan tailored to you which is basically 2:37 a bunch of text. It's going to tell you 2:39 how much protein you need to eat per day 2:41 and so on. All software is built on an 2:43 input output system. Now here's the 2:45 kicker. Showing input and output is 2:48 actually quite simple for a developer 2:51 nowadays. Building something that looks 2:53 like this. What chatb shows on the 2:55 screen is fairly simple. Like beginner 2:59 programmers can do this. Same with the 3:01 output. They can show this data on the 3:04 screen to the user. Quite simple. What 3:08 actually is impressive is what's going 3:11 on here in between the transformation of 3:15 the data from an input to an output. 3:18 This is actually the valuable part of 3:20 any software. This is really where 3:23 companies like Google, OpenI, which is 3:26 Chat GPT, this is where they really set 3:29 themselves apart from your 3:30 run-of-the-mill software. So, what does 3:32 this have to do with us? What does this 3:34 have to do with lovable and tools like 3:36 N8N? Well, now we can actually leverage 3:39 lovable to build the part of the 3:42 software that shows the input and helps 3:44 us create the input that we send through 3:47 our transformation here. But it also 3:49 helps us show and structure up the 3:53 output of the software. So in the case 3:55 of Google, if you wanted to build the 3:58 Google page where you have a search bar 4:00 and then you want to build the Google 4:01 page that shows the actual results, we 4:04 could use something like Lovable to 4:06 build that in, I'm not kidding, 2 3 4:09 minutes. And the transformation, the 4:12 super valuable part of the software that 4:15 transforms the input to the output, we 4:17 can build that with tools like N8N. And 4:19 I'm going to show you exactly how. But 4:21 you might be thinking, "It's impossible 4:23 for me to build something that works as 4:26 well as chat GPT or Google for that 4:28 matter." Well, you're probably right. 4:31 But we don't have to. And here's why. 4:33 N8N actually allows us to use the 4:36 information from ChatGpt. We can 4:38 leverage the AI capabilities of a 4:41 software like ChatgBT and we can use 4:43 that inside of our app without our users 4:47 ever knowing that they're interacting 4:49 with Chat GBT directly. And I can 4:51 promise you there are tons of apps that 4:53 you use today that do this without you 4:57 even knowing. I'm going to show you how 4:59 you can use Lovable and N8N to build 5:01 your own AI powered software that can do 5:05 pretty much anything a chat GBT model 5:08 actually can do by itself. If you 5:10 understand this how systems input and 5:13 output data and how to transform that in 5:16 between, you will make money. I can 5:19 promise you that what I'm going to do 5:21 for you today is actually show you how 5:23 to build one of these systems using 5:25 lovable and n from scratch. Let's get 5:28 started. All right, so let's start by 5:30 looking at what we want to build with 5:32 our different components here. We're 5:34 going to be using lovable for our input, 5:37 N8N and chat GBT for the brain, the 5:41 black box of our application, and again 5:44 lovable for the output. So, to jump back 5:47 over to our framework that we looked at 5:50 at the beginning, we're going to have a 5:51 level for input. That's where we're 5:53 going to build our nice design that 5:54 users can see their finance expenses, 5:57 but also have a little chat window to 6:00 write with our AI. The black box here is 6:03 going to be N8N and ChatgPT. And then 6:05 the output part of our application is 6:07 going to be again lovable where we 6:09 display the messages that N8N and 6:12 ChatGpt are creating for us. So the data 6:15 is going to flow from lovable to N8 to 6:18 chat GBT to N8N and then back out to 6:22 lovable. Let's get started by building 6:25 our brain of the application or at least 6:27 the the entry point of our brain. So 6:30 we're jumping over to NAN. And if you 6:33 don't have an N account, I'll drop a 6:36 link to where you can create one in the 6:38 description so you can get started right 6:42 away. We're going to create something 6:43 that's called a workflow. A workflow is 6:46 basically a way that we want data to be 6:50 moved around in our software. And we 6:53 actually need to tell N8N what's the 6:56 first step. How does this flow start? 7:00 So, we click on the plus icon and we're 7:02 going to say the actual first thing 7:05 that's going to happen is something 7:06 called a web hook is going to be fired 7:09 or we're actually going to be listening 7:12 to our lovable application to send 7:15 information to our web hook. So, lovable 7:18 is going to be sending information to 7:21 our n web hook. And we're setting up 7:25 this web hook right now, which is 7:26 basically what what we call what we 7:29 programmers call a listener. So somebody 7:32 that's just their entire job is just to 7:35 listen and see if your application says 7:38 anything. We're going to change this to 7:40 a post request because we actually want 7:43 to send information alongside this 7:45 message. So, Lovable is going to send a 7:49 user message like how much do I spend on 7:51 meals per week or per month and that 7:54 information is going to be sent. Here we 7:56 get the actual address where we send the 8:00 message to. And you can think of this 8:02 address as your your home address or the 8:04 address of your work. It's an actual 8:06 place on the internet where we send 8:08 information to. If we close down the 8:11 canvas, you can see we have our first 8:13 web hook set up. And now we can actually 8:16 start building the front end of our 8:19 application so that we can send 8:21 information to this web hook. So let's 8:23 get started on that. We're going to 8:24 build this really neat finance app that 8:27 shows a nice graph displaying how much 8:31 you spend per month and also every 8:34 single transaction that you've made. But 8:36 we're also going to have a chat window 8:39 so you can talk to this application and 8:42 get insights, intelligible insights on 8:44 your spendings. I'm going to actually 8:46 use this Figma design. I haven't created 8:48 it. Somebody way more talented than me 8:51 has. I'm going to use it and feed it to 8:54 Lovable to give Lovable extra context on 8:58 what I want my application to look like. 9:00 I think this looks amazing and I'd like 9:02 Lovable to make my app look as close to 9:05 it as possible. So, we're going to 9:06 export that image. You're going to find 9:08 this image in the description down below 9:10 along with the prompt that we're going 9:12 to use to feed Lovable. So, I'm jumping 9:14 over to chat GPT. And here I've 9:18 constructed a prompt that we actually 9:20 are going to give to lovable. But I'm 9:22 creating the prompt in chat GPT. The 9:24 reason why I do this is because chat GBT 9:26 is really good at helping me create 9:29 instructions that I'm going to send to 9:31 another AI. So, I kind of use it to 9:34 refine my prompt before sending it off 9:36 to lovable. The one thing you have to 9:39 edit in this prompt is the web hook that 9:43 we send that we send the message to. But 9:45 we're going to get to that. I'm getting 9:46 ahead of myself. Let's start from the 9:48 beginning here. So, the app overview 9:49 built a financial app with two main 9:52 views. So, two main views. First view, 9:55 expenses overview. Display the user's 9:58 monthly spendings and detailed 10:00 transactions. This is what we're saw 10:02 what we're seeing on the screen right 10:04 now. So this beautiful chart and monthly 10:06 transactions. This is going to be the 10:07 first view. The second view, the second 10:10 page will be this like AI chat 10:13 assistant. The purpose is to create a 10:16 chat interface that the user can ask 10:18 questions like how much did I spend on 10:20 food last month? Which category 10:22 increased the most? What's my average 10:25 monthly spending? And so on. And we want 10:27 to post these messages to the endpoint 10:31 that we just created on N8N. When the 10:34 user types in information to our app, we 10:37 actually want to send that over to N8N. 10:39 And we want N8N to use an AI, an AI 10:42 agent to do a couple different things 10:45 with the message. We're also providing 10:47 what we call mock data. What do I mean 10:50 by this? In a real application, we'd 10:53 hook the user the user's app up with 10:56 their bank account. So, they actually 10:58 had their real expenses in the 11:01 application. This is just test app. I'm 11:03 not going to use my real transactions. 11:05 I'm just using fake data, mock data. And 11:09 the data is, you know, we have the date 11:11 of the transaction. We have the category 11:13 of transaction. So, groceries, food, 11:16 transport, and so on. We have the amount 11:20 uh timestamp or currency. This can be 11:22 dollars. In Sweden, we we have kuner. If 11:25 you're in Asia, Indian, wherever, you'd 11:28 probably have a different currency. You 11:29 can set that up however you want. We 11:33 copy this. We head over to 11:36 lovable.dev. If you don't have a Lovable 11:38 account yet, I've included a link in the 11:41 description below so you can get started 11:43 right away. We're pasting the entire 11:46 prompt straight into Lovable. There we 11:49 go. And we're also Don't forget to 11:52 attach the image that we want Lovable to 11:56 base this application off of. And before 11:59 you hit enter, don't forget you need to 12:02 update the uh the web hook endpoint that 12:06 you're sending the data to. And you get 12:08 that from your N8N web hook. and this 12:13 post endpoint right there. So, copy 12:15 paste that one right into here. Boom. 12:19 Then we hit enter and Lovable is going 12:21 to start creating our amazing app for 12:24 us. And if this is the first time you're 12:26 creating an app with Lovable, get 12:28 prepared to be an absolutely 12:30 mind-boggling experience the first time. 12:32 It's coding an entire app for us from 12:36 scratch. It's doing this with React, but 12:39 it's also using great CSS libraries like 12:42 Tailwind to build very very neat and 12:46 goodlooking software right out the gate. 12:49 It's coding everything for us from 12:51 scratch. Now, this can take anywhere 12:54 between like 30 seconds to 3 4 minutes 12:57 depending on how big the app is. So, 12:59 while that's running, let's again just 13:02 remind ourselves what we're actually 13:04 building right now. We have a front-end 13:06 application called lovable which is 13:08 going to be our input. And from this 13:12 application, we want to be able to ask 13:15 questions like how much do I spend per 13:20 category? So, how much money am I 13:23 spending per category of expenses, food, 13:26 gifts, and so on. We want this message 13:30 to be sent to N8N so that N8N can then 13:34 ask ChatGpt based on our data set of 13:38 expenses how much are we actually 13:40 spending per category. Chat GPT uses its 13:43 AI capabilities and it reads through the 13:46 data set. It's going to feed that answer 13:48 back to NAN and then we're actually 13:52 going to be able to respond to our 13:54 lovable application with a message. And 13:57 this is going to be you're spending X on 13:59 gifts, Y on foods, and you're doing it 14:02 over these time periods and so on. This 14:04 way, we can actually talk to our data 14:08 set, our app with this AI agent, and 14:11 it's going to provide us with insights 14:13 on our expenses. All right, so Lovable 14:17 spun our app up for us. Let's open it up 14:19 in a new window. We have this really 14:21 good looking line chart that shows the 14:24 expenses each month. and then all the 14:27 transactions here below. Really like 14:29 that it's this wide. I think it's going 14:31 to look much better on a phone. Let's do 14:34 that. This looks great. So, we have our 14:36 graph here with all our expenses and 14:39 then we have the 14:41 transactions for each expense. What I'm 14:44 more interested in is this AI assistant. 14:47 So here if I ask questions like how much 14:50 do I spend per 14:52 category, Lovable won't really be able 14:54 to give me any type of insights here 14:57 because it doesn't use an AI model to 15:01 understand my data set or anything. So 15:04 right now if we're looking at flowchart 15:06 of data here, Lovable isn't connected to 15:08 anything. We haven't made this 15:10 connection yet. So now what we're going 15:12 to do is test so that we're actually 15:16 sending data to N. We set up this web 15:19 hook and then we want to connect N to 15:21 ChatGpt. That's going to be the first 15:23 step. The second step is going to be 15:25 sending this information that ChatGpt 15:28 provides us with back over to our 15:30 lovable app. So we're going to go over 15:33 to 15:34 N. And in our web hook here, we can 15:38 actually tell it to start listening to 15:43 any events that are fired from our 15:45 application. So if I ask again, we could 15:49 say something like how 15:52 much do I spend per 15:56 category? What we want to see, we don't 15:58 really care what's we don't really care 16:01 what's happening right here. What we 16:03 want to see is N actually receiving this 16:08 data and we want to see a message down 16:10 here in the body that is the actual 16:13 message that we sent from our 16:15 application. How much do I spend per 16:17 category? We see that NAN is actually 16:21 receiving that and it's taking it. It's 16:23 receiving it from our application. And 16:26 this is where things get really, really 16:28 interesting because now we're able to 16:31 input data into a black box here, which 16:35 allows us to use basically whatever we 16:38 want. We could use Oh, that's way too 16:39 thick. We could use BT. We could use uh 16:43 different software. We could add like 16:45 Gmail. When people write with the mouse, 16:47 they make it look so easy. It's not 16:49 easy. We could use AI. We could use 16:50 Gmail. We can we can hit up a bunch of 16:53 different type of um predefined 16:56 softwares and we can leverage those in 16:59 our own applications by sending in input 17:02 and creating output but allowing all 17:05 these super advanced tools to do the 17:07 heavy lifting for us. The next step 17:10 would be to actually make sure N8N is 17:13 attached to an AI model. So for this 17:17 we're going to exit out of our web hook. 17:19 We're done with that for now. Actually, 17:21 you know what? I forgot. We're pinning 17:23 the data. This is very important. This 17:25 allows us to use this data when we're 17:28 testing the entire workflow of our N8 17:33 app. So, we're pressing the plus button 17:34 here and we're going to add our AI agent 17:37 to this workflow. We're going to say 17:39 advanced AI AI agent. And on the left 17:42 side, you're going to actually see the 17:44 inputs. And on the right side, you're 17:45 actually going to see our outputs just 17:47 like we've been modeling it here in our 17:50 framework. We have our inputs. We have 17:52 our outputs. Right now, we're actually 17:54 defining what's happening here in the 17:57 middle. So, I want you to sect here 17:59 source for prompt. We're going to go 18:01 define below. And you're going to take 18:04 the message that's sent here from the 18:06 body. So, you're going to drag that 18:08 message right in here. And that's going 18:11 to tell nan when it receives its input. 18:14 We don't care about all these things up 18:17 here. And just close those headers down. 18:19 We don't care about any of that. We just 18:21 want to look at the body and the 18:23 message. This is what we're looking for. 18:25 Okay. So, we drag that into the um the 18:28 prompt. We now have our message firmly 18:32 planted or based here in N8N. We're 18:35 getting ready to send it over to chat 18:37 GPT. But before we do that, you actually 18:41 have to provide chat GPT with some 18:43 context. You can't just open up chat GPT 18:47 and say, "How much do I spend per 18:48 category?" It's going to have no idea 18:50 what you're talking about. What you do 18:52 need to do, what you do need to do is 18:55 give chat some context. So, we're going 18:58 to say, "Here's my data set, and we're 19:00 going to point it to the mock data that 19:03 we used earlier here." So, we're going 19:05 to give it all of this data. So, here's 19:07 my data set. That's the context. Whoops. 19:10 Here we go. And then we're going to say, 19:12 let's see, 19:14 uh, answer the user's question based on 19:18 the messages you receive. And we can 19:20 also say provide finance insights. 19:23 That's all we need to do. We can refine 19:26 this over time if we want to, but let's 19:28 head over to N. We're going to go to 19:31 options, system 19:33 message. We're going to say context. 19:36 Okay, we can remove that. Answer the 19:39 questions based on the message you 19:41 receive. That would be this message. 19:44 Provide finance insight. Okay. Now, the 19:47 last thing is base your base your 19:51 insights on this data set. And I need 19:53 you to copy and 19:56 paste this data set into into the 19:59 prompt. So, we're going to go on new 20:00 row. We're just pasting that straight 20:02 in. Perfect. That's all we need to do. 20:05 We don't get to test this step just yet. 20:07 We can close that down and you're going 20:09 to see no. It's like showing us some 20:12 type of error. Don't get scared. All 20:14 it's saying is we actually haven't 20:16 connected it to a an LLM. We haven't 20:19 connected it to an AI yet. So, we need 20:22 to actually make this connection happen 20:26 right now. We're going to hit the chat 20:29 model there. I'm using Open AI. You can 20:33 use whatever you want. You could use 20:35 Claude, which is Enthropic. You could 20:37 use Deepseek, like whatever you want. 20:39 I'm going to use Open AI. Really doesn't 20:41 matter for this app. What does matter, 20:43 however, is your API keys. You do need 20:46 to set up new 20:48 credentials when you're 20:50 using Open AI or any other type of um 20:54 LLM model if you want to make requests 20:58 to their their API. And this might 21:01 actually cost you a little bit of money. 21:03 You can use free credits. Different 21:06 models have some free credits. The good 21:08 news is this. If you spend $5 on um on 21:13 Open AI, you'll get basically for 21:16 testing purposes on your own, you're 21:18 going to get unlimited amounts of tries. 21:20 So, $5 unlimited amounts of tries. I've 21:24 added $5. And now we're going to set up 21:27 my API keys. So, it asks for an API key. 21:31 Let's go ahead and provide that. We're 21:32 jumping over to 21:36 platform.openai.com/s settings API keys. 21:38 I can add this in the description down 21:40 below. We're going to press generate new 21:42 secret. I'm going to say finance app 2 21:48 project is going to be default. Create 21:50 secret key. Now, don't ever share your 21:53 secret key with anybody. Don't show it 21:55 on the screen like I'm doing right now. 21:57 This is basically your password to your 22:00 in this case open AI account. Don't 22:04 share this. This is supposed to be super 22:06 secret. Uh so make sure it is super 22:09 secret. Paste that in as an API key 22:11 right here and press save. Connection 22:14 tested successfully. Perfect. We can 22:17 shut that down. We're going to use the 22:18 chatbt4 model. I'm not really too 22:21 worried. We could we could try to find 22:23 the perfect model for this application. 22:25 doesn't matter too much for me right 22:27 now. We're going to back that one down. 22:29 And now we actually have our AI agent 22:31 set up with our chat model. The last 22:34 thing we want to do is make sure that 22:38 when this message is being sent into N8N 22:42 and then to chat GBT and back to N8N, we 22:45 want N8 to actually relay this message 22:49 over to lovable. So our lovable app is 22:53 sitting over response and right now we 22:54 get a generic response. We want an 22:57 actual intelligible response from an AI. 23:00 So we actually need to replace this with 23:03 something that actually comes from open 23:06 AI. We're setting that last piece of the 23:09 puzzle. We're going to actually install 23:11 that right now. So after our AI agent, 23:13 we're going to press the plus button. 23:16 We're going to go ahead and type in web 23:17 hook, but instead of the same web hook 23:19 as before, we're going to say respond to 23:22 web hook. And what this means 23:24 is you could visualize the flow of data 23:29 something like this. But you could also 23:31 visualize it like this. Our lovable app 23:33 makes a input request N8N. We do some 23:36 magic things here and then N8N responds 23:39 back to the exact same place as it did 23:42 before. So that's why N8N has structured 23:46 it this way. It says respond to web hook 23:48 because we're basically we're listening 23:50 here and then we're responding back to 23:53 the same place that we actually sent the 23:56 first request to. So open that up. Uh 24:00 first income items. Fine. We're going to 24:03 test this in just a 24:05 second. So that's set up. We need to go 24:07 to our initial web hook. And on the 24:10 response here, you're going to see using 24:13 respond to web hook node. That's what we 24:16 just set up. So respond to web hook. 24:19 Perfect. That would be this part right 24:21 here. So when we get a request to this 24:25 endpoint, we're going to respond with 24:27 that request on the same place, which 24:30 will be this endpoint. And that allows 24:32 our app to listen and get a response 24:34 back in the same place. So let's test 24:36 this out. We have a message. How do I 24:39 spend? How much do I spend per category? 24:41 Let's go over to the AI agent. We're 24:43 going to test this step. It's going to 24:46 receive the message, which is how much 24:48 do I spend per category. We're waiting 24:50 for chat GBT to actually uh try this 24:53 out. Hopefully we go. Okay. And it 24:56 actually gives us a pretty cool output. 24:58 It says, let's break down your expenses 25:00 per category based on the provided data. 25:02 Perfect. 25:04 Now, we want to see if the web hook 25:06 actually can take that information and 25:08 send it back, which it did. No problem. 25:11 So, everything on the N8N side of our 25:14 application, all of this seems to be 25:17 working. Let's see if the flow of data 25:21 through our lovable app and this, you 25:23 know, super brain of compute power. 25:26 Let's see if the entire flow of data is 25:29 working. for that to actually happen. 25:32 We're going to exit out here and then 25:34 we're going to test the entire workflow. 25:36 But before we do that, make sure you 25:37 unpin the data. Don't want that data 25:39 there anymore. We're going to test the 25:41 workflow. That means we're waiting on a 25:44 trigger. Perfect. We're going to head 25:45 over to our application and I recommend 25:49 you do a hard reset here. So, spin up 25:52 the app again. Go to the network tab. 25:55 This is going to allow you to see every 25:57 single request that you're sending away 25:59 from your application. Very good for 26:01 debugging purposes. We're going to say, 26:02 how much do how much do I spend per 26:05 category? I'm going to hit the enter 26:06 button. We see that we're sending away 26:08 data. Seems that we're waiting for some 26:11 type of response. What's happening over 26:13 here on NAN? Okay, it's receiving the 26:15 data. It's loading. So, our AI model is 26:18 actually doing something. It sends the 26:20 response back. 26:23 Oh, and we get some type of error. I was 26:25 so hoping that was going to work on the 26:26 right first try. So, sorry I couldn't 26:28 process that request. Okay, let's see 26:31 what what's uh not really working here. 26:34 To analyze your spending car base and 26:35 provide data, I will sum up. Okay, it 26:38 actually is. Okay, this is interesting. 26:40 The we're actually getting a great 26:43 response here from our uh API, but 26:46 lovable isn't using that response and 26:50 showing it on the screen. It's showing 26:52 something else here. So that means we 26:54 have some form of miscommunication on 26:58 our lovable application, but our nan 27:01 application is actually working just 27:03 fine. So we're going to have to do some 27:04 debugging with the lovable program. 27:07 Let's get into that. So I'm going to 27:09 take this response. I'm going to head 27:11 over to our 27:12 lovable prompt here and I'm going to 27:15 say that I'm not really getting the the 27:18 type of response or the chat isn't 27:20 working the way I want it to like I 27:23 expected. The API request the API 27:28 request is responding with good data. 27:32 There is no error there. And what I mean 27:36 by that is I can tell that our web hook, 27:39 which is an API call, it's responding 27:41 with great data here. This is exactly 27:43 what we want to see. It's summing up our 27:46 total expenditure and we're getting that 27:48 we're expecting this to be shown here in 27:50 the chat screen, but instead we're 27:53 getting met by this type of message. So, 27:55 I'm trying to explain to Lovable what's 27:58 not working, but I'm also trying to fill 28:00 it in with what I think is working so 28:03 Lovable can kind of zero in on where it 28:06 should start solving the problem. The 28:08 chat is not working like I expected. I'm 28:11 getting this message and I'll send the 28:15 message that it uh generates. So, I'm 28:17 sorry I couldn't process that request. 28:20 The API request is responding with good 28:23 data. 28:24 There's no error there. I am I'm 28:27 wondering why you're not showing the 28:29 data from the API request. So, let's see 28:32 what Lovable does with that. I'm going 28:33 to be honest here. Um, Lovable's amazing 28:37 and it ends amazing. When it comes to 28:39 debugging, you do need like a little bit 28:43 of programming understanding. Uh, you 28:45 you do need to know how to code a little 28:47 bit. You do need to know a little bit 28:49 how API works and so on. 28:52 Otherwise, as soon as we start looking 28:55 at the code, if you don't know where the 28:57 issue might be, things can kind of get 29:00 pretty tricky. So, if you do have a 29:03 little bit of programming experience, 29:05 you are, you know, just golden right now 29:08 with these type of opportunities, these 29:10 type of tools that allow you to leverage 29:12 technology 29:14 like web hooks, uh, LLMs, and so on. 29:17 Let's see what lovable says. It says 29:19 it's fixed the message with the chat 29:21 interface. I'm going to check what it 29:23 has uh coded for us. So here what I can 29:26 tell is we're making our request to our 29:29 web hook. That seems to be working. It's 29:32 parsing that request here and storing it 29:34 in something it calls data. And then 29:36 here would be that message that I didn't 29:39 quite want to see. And that's because 29:40 it's trying to create a message off of a 29:45 property called uh data message. And if 29:49 this isn't exactly where the data is 29:51 stored, we're going to start getting 29:53 some errors. So this allows me to 29:56 tell our lovable application, I might 29:59 want to do some debugging right around 30:01 here. We're going to test the 30:03 application. It might still work, but if 30:05 it doesn't, I know this is where I'm 30:06 going to start debugging the 30:09 code. So let's go over to N. We're going 30:12 to test the workflow. We're going to 30:14 open up a new lovable app right there. 30:19 Going to head over to the assistant. 30:21 Always inspecting. Always looking at the 30:23 network tab to see the API calls to the 30:26 web hook. We're going to say how much do 30:27 I spend per category. Network request is 30:30 being sent. It's pending. That's 30:32 perfect. We're listening to the data. N 30:35 seems to be working. Seems to be doing 30:37 what it's supposed to be doing. Let's 30:39 see. Okay. Same error again. But I I do 30:44 still get the correct data. So the 30:47 format looks like this. We have an 30:49 object. This is an object. And inside of 30:51 that we have something called 30:53 output. And this tells me that when 30:57 lovable is trying to look at the data, 31:00 but it's looking for a message or a 31:03 text, it's never looking for this 31:06 output. This is called a property. It's 31:08 not looking for the output. So that's 31:10 what we're going to tell lovable. We're 31:12 going to say the message looks like 31:14 this. Response will look like this. 31:16 Okay. Actually, I don't need to confuse 31:18 it with this huge piece of information. 31:21 I just can use something like like this 31:23 message here. So, the response will look 31:25 like this. It's going to be an object. 31:27 It's going to contain a property of 31:29 output and the message would go there. 31:33 That means when you get a response from 31:37 the API call, look for an output prop, 31:41 which is short for property on the data 31:44 from the API call. Let's try that. This 31:48 should update so that instead of looking 31:50 for a response or for a message or for 31:53 text, it should now understand, okay, I 31:56 should be looking for an output here 31:59 instead. This should go pretty fast when 32:01 it fixes up. Uh, right. Seems to be if I 32:04 freeze right there, it's looking for 32:05 data.output. This should be perfect. 32:08 Hoping this works. Let's see what 32:11 happens. Okay, seems to have updated. 32:14 We're going to run our test here again. 32:16 So, test workflow. I'm going to open a 32:19 new chat window. Doing the same thing 32:20 again. We're inspecting always the 32:23 network tab. We're going over to the AI 32:26 assistant. How much do I spend per 32:28 category? So, network requests being 32:31 sent. 32:32 Perfect. And it ends doing its magic. 32:35 We're still waiting for the response. 32:37 And something seems to have gone wrong 32:39 now. And I 32:41 can't really figure out why. Let's 32:50 see. How much do I spend per category? 32:54 Quests being sent 32:55 away. Let's see what it responds with. 32:59 Seems like N's doing its thing. Catch 33:02 the request there. It's working on the 33:05 message. It's sending our message. 33:07 Perfect. And finally, finally, after 33:10 some debugging, we actually get a 33:13 intelligible response from N8N and Chat 33:18 GBT AI model or agent whatever you would 33:21 want to call it. We now are able to ask 33:24 our app and it will respond with 33:27 different types of summaries of our 33:29 data. So let's go ahead and try 33:31 something again. Let's say how much do I 33:32 spend on food? Gave me an error. No 33:36 problem. That's because I'm 33:38 not my my workflow isn't running. Since 33:41 we're testing, we haven't gone into 33:43 production. We actually have to always 33:45 test the workflow. I can type in the 33:48 same message again. How much do I spend 33:50 on food? You're going to see that the 33:53 model starts to run. Perfect. That went 33:55 really fast. To calculate your total 33:58 spending on food based on your provided 34:00 data, we can run a sum the amount blah 34:02 blah blah blah. And it says about $100 34:06 on food. You could you could do a bunch 34:09 of things with this. You could format 34:10 this so it looks so much better than 34:12 just text. You can actually tell Levable 34:15 how it should structure this data. If 34:16 you've if you've managed to get this 34:18 far, I want you to pat yourself on the 34:20 back cuz you've actually managed to 34:22 build something that is let's just say 34:24 there's a lot of potential if you're 34:26 able to do something like this. Cuz what 34:28 we've accomplished is we've built a 34:31 front-end application that can send 34:33 input text in this case and we've sent 34:36 it to this black box, this AI agent that 34:40 has basically unlimited capabilities. 34:43 And then we've managed to get that AI 34:46 agent to respond back to our front-end 34:49 application, lovable in this case, and 34:52 display the message. What this means is 34:55 whatever you want to do in here with an 34:58 AI agent, if it is to provide insights 35:01 on financial expenses, you can do that. 35:04 But you could also do something else 35:06 like you could send your application, 35:09 you could send uh it could take your CV, 35:12 your um I think you call it a cover 35:14 letter in the 35:15 US. Basically, when you're searching for 35:18 do jobs, you could send that into your 35:20 software and 35:22 this black box, this AI agent could 35:25 basically hook up to chatbt. It could 35:28 check if 35:29 the cover letter looks good, but it 35:31 could also hook up to LinkedIn. It could 35:34 hook up to a database with a bunch of 35:36 recruiters emails and it can hook up to 35:39 your Gmail and it can send your cover 35:42 letter to every single 35:45 uh recruiter in, you know, some some 35:49 area or whatever. That that would be one 35:50 way to use it. And you could also use it 35:52 for a bunch of different things. Here's 35:54 the the cool thing about the app or 35:57 here's the cool thing about the 35:59 framework. You're using lovable to build 36:02 frontends and you're doing this super 36:03 fast. You send the information from 36:06 lovable will be the input you sent n and 36:09 from here you can use an AI agent. You 36:12 can connect whatever tools, whatever 36:14 models you want and make something 36:17 magical happen here in the middle and 36:18 you can send that information back out 36:20 as output to your lovable application. 36:23 And again, we've built this in minutes 36:26 and it looks absolutely stunning.