Build ANYTHING with n8n + Loveable

0:00 how to build anything with na10 and 0:02 lovable this incredible AI web app is 0:05 something that you can build for 0:06 customers where they can enter 0:07 information or you could enter 0:08 information then it will send things 0:10 over to our nhn scenario we'll have an 0:12 AI agent that will do some work that we 0:14 can train and connect to many things and 0:16 then I'm also going to sh in this video 0:17 guys how you then send that back over to 0:20 your AI application meaning that you can 0:22 build things to sell to clients you can 0:24 do things for personally you can 0:25 basically connect your na10 scenarios to 0:27 absolutely anything you could possibly 0:29 imagine I'll show you exactly how you 0:31 build the whole thing step by step 0:32 meaning that you can just get cracking 0:34 and build things that you used to have 0:35 to spend hundreds of thousands of 0:37 dollars on programmers to do so if you 0:39 haven't already grab that coffee and 0:41 let's dive straight in to kick off I'm 0:43 going to show you a very brief run 0:44 through so to do that I'm just going to 0:45 head over to the community to grab the 0:46 blueprints you can also follow me step 0:48 by step all the training BLS over here 0:49 so we're going to get over to the 0:51 classroom every AI Automation and we're 0:54 going to go down to wonderful special 0:55 and general AIS and we've got this thing 0:57 here so what you would do is come down 0:58 here to upload n and download this file 1:01 then we head back over to n10 click this 1:03 beautiful ellipses and then click on 1:04 import from file you select the file and 1:06 voila it will appear in your workflow 1:08 automatically and then we just name it 1:09 very quickly okay so we're going to test 1:10 the workflow beautiful I'm going to come 1:12 back over I am going to refresh this 1:14 page so we can start from a clean slate 1:16 and I'm going to give it a prompt that 1:17 looks a little bit something like this 1:18 which is hey I want to gain 5 kgs of 1:19 muscle I am very lean hopefully you've 1:21 been eating your greens your veggies 1:22 you're feeling lean let's just say this 1:24 is the highest priority possible then we 1:26 had the task awesome that's landed now 1:28 check this out you see this is is 1:30 loading we come back over to na10 check 1:31 this out guys the agent's now speaking 1:33 with it and what we can do is add 1:34 everything like internet search connect 1:36 it to databases we can add stripe I can 1:38 do a billion different things I come 1:40 back over and there guys check this out 1:41 thank you for showing you Fitness goal 1:42 and getting five coms of muscle blah 1:44 blah blah blah measurability realism 1:45 this sort of stuff guys and that is 1:47 basically entire automation so we have 1:48 the ability now to build these gorgeous 1:49 sexy designs they look anything they 1:51 want to I pulled this one together in 1:52 just like a couple minutes but you can 1:54 build them and they can look basically 1:56 like this using lovable the applications 1:58 are crazy and now we can connect to na10 2:01 uh we can pretty much do anything we 2:03 flipping want to so let's build this all 2:05 together step by step we're going to 2:06 delete all that stuff we're going to go 2:07 through it is we can abolutely crush it 2:09 so what's the first thing we want to do 2:10 well the first thing well the way we're 2:11 going to do this guys is via web hug so 2:13 I click on this little guy here and just 2:15 type in web hug okay and essentially 2:17 what we're saying here guys is we're 2:19 building an application over here and 2:21 this application is going to send 2:23 information over to the web hook in this 2:25 scenario here the web hook grabs 2:27 information it does some really cool 2:28 stuff and then sends it back to 2:30 Applications imagine like like a 2:31 triangle okay this is your application 2:33 sends it over here grabs the information 2:35 does load of magic at the bottom line 2:37 then gets it to here and send it 2:38 straight back and that's the circuitry 2:40 of how we connect it and if we can get 2:42 it into n or make or any of these tools 2:44 we can effectively do absolutely 2:46 anything we want to and having built a 2:47 tech startup I can tell you that like 2:49 this is stuff that you genuinely had to 2:51 pay thousands and thousands for before 2:53 so we've got this test you on though I 2:54 want to do is head over to lovable now 2:56 lovable is one of these really cool 2:58 things enables you to code 3:00 with English uh we don't need to have a 3:02 load of it does all the plugging and the 3:03 wiring so it sort of the dependencies 3:05 out for us and all the plumbing so 3:06 essentially we just type we want to type 3:08 and then we're ready to rock and roll 3:09 but I'm going to show you a little hack 3:10 that I've personally found very helpful 3:12 so let me just head over to Claude and 3:14 what we can do guys is help us create 3:16 prompts by using these tools I said hey 3:18 I want to create a I don't know notion 3:23 style Simple app for a fitness AI coach 3:28 key functionalities 3:31 I enter a go it is sent to this are you 3:37 ready for this guys this web hog this is 3:39 cool this is key then come back over to 3:41 your scenario in nhn and I just want you 3:44 to copy it so just click it once and 3:45 that will copy it for you we come back 3:47 over and we just enter it beautiful then 3:50 it will receive a response oh my good it 3:53 be good if I could actually uh type and 3:55 spell today wouldn't it oh my goodness 3:57 I'm just going to quickly do this 3:59 receive a response from the AI it will 4:03 display 4:05 this in a attractive 4:09 way let's just say make the 4:13 design 4:16 beautiful is there any of functionality 4:18 that we want yes how about when we click 4:21 off a to-do list as complete don't 4:25 send the info back to na10 4:30 web hog and I'm going to say use the 4:32 image 4:34 below as design inspir and then guys 4:37 just head over to Google and you can 4:38 type in things like best web app designs 4:40 like have a little fun have a little 4:41 look around at things that you think 4:43 look really cool and really interesting 4:44 until you find one that you think could 4:45 be pretty decent so let's just say that 4:48 we find okay I've got this cool one here 4:50 it's not a really great example but I 4:52 just want to show it to you to kind of 4:53 like uh basically point out beautiful 4:56 put that in now I'm use CLA to create a 4:58 Basse prompt and then we're going to 4:59 copy that and then we're going to post 5:00 it into liver and then from liver we can 5:02 then kind of finesse it out a little bit 5:03 further one thing I'll call out is that 5:04 these things aren't single shot or zero 5:06 shot in other words it isn't like go 5:08 forth and conquer the world and all of a 5:10 sudden all the world are conquered it 5:11 has some back and forth so if you ever 5:13 feel that you run into errors or 5:15 mistakes that is completely normal and 5:17 expected you know basically expected to 5:19 pop the process I think sometimes one of 5:21 the reason I want to build this role 5:22 with you live is so you can see the 5:23 mistakes that I make and how we have to 5:25 troubleshoot around it so when you come 5:27 to do it yourself you know that it's 5:28 kind of interesting now cl's gone off 5:30 and it's building an app so I don't want 5:33 I don't want an app I want to create a 5:41 prompt beautiful Claude has understood 5:43 the error of his ways and so we've got 5:45 here so going to come down here project 5:46 overview and let's just copy this all 5:48 here 5:49 beautiful right I'm finding CL 3.7 very 5:53 clean crisp by the way so then we come 5:55 back over to lovable and I'm just going 5:57 to enter the prompt by the way guys one 5:59 of the things you can LEL it lets you 6:00 get started for free so you can build 6:02 these together basically at zero cost 6:04 but then if you want to do more prompts 6:05 more questions you can upgrade on plans 6:07 the one that I've done is for 20 bucks a 6:10 month just to kind of show you how it 6:11 physically works but you may find you to 6:12 that so go then going to click on in 6:14 fact we can attach a file if we wish to 6:16 but we'll come to that second bam then 6:17 we click public then we sent and one of 6:19 the things you can see guys is has it 6:20 included our web hug it has great so now 6:23 liverpol is working its magic in the 6:25 background and the way that we're going 6:26 to build this together is we're going to 6:28 test it step by step so the first thing 6:29 we've got here is essentially the web 6:32 hook now this looks a little bit 6:33 different than make now in make 6:36 essentially you can have buttons to test 6:38 things that may be a little bit easy to 6:39 understand but I will show exactly 6:40 what's going on here so essentially 6:42 we're clicking on listen for a test 6:43 event so you can see this is this 6:45 beautiful animation actually it's 6:47 waiting for something to send 6:48 information to this web hook and once 6:51 that's happened you can see it in the 6:53 output section now one of the cool 6:54 advantages that we're seeing in na10 is 6:56 that when you are receiving the data 6:58 from the web hog it actually gives you a 7:01 lot more information than you may get on 7:03 other platforms meaning we can do other 7:04 things so if I come back over to check 7:06 in on a lovable scenario you can see 7:08 it's wrting Cod for as like an absolute 7:09 demon right now which is pretty awesome 7:12 I actually am getting reac climatized 7:13 back to the UK I was in Madrid only two 7:16 days ago doing one of the meetups with 7:17 the community I'll pop some photos on on 7:19 screen it was really cool it is so so 7:21 cool the people in the a mention 7:22 community and this YouTube channel I so 7:24 sick to catch up with we had a great 7:25 time u i put a bit a debrief in the 7:27 community but it was a really good time 7:29 and also like guys I took the UK weather 7:31 with me so we needed umbrellas but we 7:32 didn't have what was required and one of 7:33 the other things that I would say with 7:34 this guys is I'm just going to show you 7:36 how you do the plumbing and the 7:37 connectivity and I'll do other videos on 7:39 this after this about how we connect 7:40 things like Paypal payment Integrations 7:42 um how you can take it from here to here 7:44 I want to show you that Basics so if you 7:46 are a beginner if you're just getting 7:47 started you can follow this process and 7:49 get it functional and with those Lego 7:51 bricks we can essentially build whatever 7:53 you want to on the planet okay it seems 7:55 to be finishing it work which is eight 7:56 just can to take a couple of minutes 7:58 based on how complicated the prompted 8:00 speak at the preview now I will just 8:01 quickly say liable there are other 8:02 alternatives to liable like Bol we've 8:04 done videos on that on the channel 8:05 liable seems to produce probably the 8:08 most robust that I've personally 8:10 experienced I want to do more testing 8:11 but I've always found liable just seems 8:13 to get it cracked a bit quicker now guys 8:15 check it out so this is freaking 8:17 ridiculous we calends we got goals we 8:18 got settings guys what else do you need 8:20 and if you got particular branding we 8:21 can feed that into it we can say hey 8:23 what these hex codes so I think we 8:24 should test this out so let's just check 8:26 is it still waiting for a test event 8:27 apparently Ann's got patience it won't 8:29 wait for other so we come back over and 8:30 I'll say hey I want to let's just say l 8:33 i don't know get to 8:35 10% uh body fat this is just a quick one 8:38 okay and I'm going to send it over boom 8:40 so is that being sent over cool nice and 8:43 it's given us all this different stuff 8:45 but has that actually come through to 8:46 the scenario let's have a quick look it 8:48 hasn't right but what this has done is 8:51 pretty much just added some cool tasks 8:53 this is actually really freaking 8:54 impressive guys you see how I click this 8:55 things off 40% 60% this is something you 8:59 could Del I mean we built that in how 9:00 many seconds that is absolutely insane 9:02 so this is really freaking cool so what 9:04 I'm going to say to it is like 9:06 hey when I enter a 9:10 go send it to this web hug and 9:15 expect a response 9:18 back the web hog boom and then we just 9:21 enter it in cool so I think what it did 9:23 initially to build an unsuccessful we'll 9:25 error check that in a second if you see 9:27 that you can click on it and then click 9:28 on fix basically but since I've given it 9:30 another prompt we're going to sort this 9:31 one up first Sometimes Li will do like 9:34 90% of what you ask but you need to come 9:36 back and say hey you did these things 9:38 please make sure you're doing this so 9:39 this is a typical back and forth that we 9:40 would expect and whilst this is working 9:42 in the background guys I want to show 9:43 you another really cool app that I think 9:44 it's going to change the game for you 9:46 and that is something called codep pen. 9:48 now codepen.io is like a website where 9:51 people open source and share their code 9:52 so for instance I found this terrarium 9:54 now guys look how freaking cool this is 9:56 basically okay that's like glitched out 9:57 a little bit Let me refresh the page you 10:00 if you can okay design is everything the 10:02 problem with AI models is that they 10:03 don't know what good design looks like 10:04 so if I come here if I say as you click 10:06 things can you see how this starts to 10:07 grow this is really cool so if you want 10:09 to build this all you ever do is you 10:11 copy all the code here you copy all the 10:12 code here you copy all the code there 10:14 you come over to loveable and you say 10:16 hey I want you to build me an app kind 10:18 of like and here's some sample code and 10:20 you paste it in and it will replicate 10:21 that so look now we've got this thing 10:23 here so let's just actually physically 10:24 see build on successful let's see if we 10:26 can fix that try to fix it give that a 10:29 moment 10:29 and once it's done that guys you can 10:31 basically post it in and it will 10:32 recreate it and just to show you what 10:33 you're kind of playing with in um in 10:36 this section we come to cend IO this is 10:38 completely free tool as well to use you 10:39 don't need to pay anything for that you 10:41 basically bro browse through so this is 10:43 a parallax effect right you're building 10:44 a website for a client and you want to 10:45 create that wow factor to blow them away 10:48 like you're really kind of hot stuff 10:49 because you are you can do stuff like 10:51 this I mean look at this and then you 10:53 just work with codepen to build this 10:55 stuff cuz good you've got all the code 10:57 of how it works at your fingertip and 10:59 all you do is literally hey here's a 11:01 code hey here's the code here's the code 11:03 build it and if it isn't quite right you 11:05 can ask it now it doesn't do it 11:06 perfectly all the time it's an imperfect 11:08 system but there in I think lies the 11:09 opportunity because most people won't do 11:11 this many people don't even know this 11:12 exists and that's how you can really do 11:13 it so I would encourage you just to have 11:15 a little look through this I mean the 11:16 Star Trek animation the stuff on here is 11:18 flipping crazy this course design flash 11:20 cards is really Ace and it's just a way 11:22 that we can use Ai n10 and sort of l a 11:24 ball to make something that's really 11:26 flipping epic cool so let's try this one 11:30 more time so we're going to come back 11:31 over to nhn we are going to listen for 11:32 test event we're going to come back over 11:34 here let's enter our fitness go 11:37 beautiful and then we send progress off 11:39 okay that sent and then we come back 11:41 over to N1 has it 11:43 arrived not quite yet so say hey nothing 11:46 is being sent to 11:48 this web hug 11:59 please send Fitness call there once I 12:01 click submit and enter okay so the error 12:02 here guys is that the web block isn't 12:04 configured for post requests that's very 12:06 thing just to say that basically we need 12:07 it to be configured for a get request so 12:10 basically we'll change that now and it 12:11 should physically work okay whoops let's 12:14 copy this and is this still listening it 12:16 is for the moment we hit enter we come 12:19 back over and there you go guys check 12:20 this out boom you've just successfully 12:22 built s app sick ass app but looks 12:24 amazing and we pull the data into NN 12:26 which I think is freaking crazy and we 12:27 got all this cool stuff a so what we're 12:29 going to do is we're going to use the 12:30 pin functionality what the pin 12:32 functionality means okay is that as we 12:34 build out other things at na10 we don't 12:37 have to keep on reiring the web hook 12:39 which means we don't have to keep 12:40 rebuilding the entire scenario we can 12:42 build on to our heart's content Now 12:44 using that fixed data so what I kind of 12:46 want to do and bear in mind the options 12:47 here are endless I'm going to add in an 12:49 AI agent so I click on this I click on 12:51 Advanced AI I click on AI agent now what 12:54 do I do you see what we need to do 12:56 everything in N all the inputs on the 12:58 left and all the outputs sit on the 13:00 right I've got this tools agent which 13:01 means it'll have the ability to access 13:03 tools like such as the internet access 13:05 my diary access your email whatever you 13:07 freaking can imagine and I'll do extra 13:09 videos on that in the in the community 13:10 and channel about how you do that 13:11 specifically prompt message we're going 13:13 to click on connect chat t Road just put 13:14 Define below which means we have the 13:16 autonomy to decide what information we 13:18 want to take over the key the key 13:20 information okay if I can find it on 13:22 here let's have a look where are we at 13:24 it's going to be the data that we pulled 13:26 over so let's find out where that is 13:28 okay guys what's happen is it's certain 13:30 information but it hasn't bought over 13:31 the goal so we do one final adjustment 13:33 and we say hey it's sending over the 13:38 info but some of 13:42 the is missing such as the fitness goal 13:47 like that I 13:51 entered please include this as a 13:53 priority 13:59 FYI this is what is coming through and 14:02 then just for completen this guys I'm 14:04 just going to copy this information come 14:06 back over and then enter it cool so I've 14:07 entered that I'm going to come back over 14:08 to end scenario I'm going to uh unpin 14:11 this one and then we can listen for a 14:13 test event to try it again cool prob 14:15 running the workflow don't worry about 14:16 that I'm just going to cancel this off 14:17 for the moment come back on to this guy 14:18 and listen for test event okay what 14:21 we're going to need to do is delete this 14:22 guy uh before we can do that so come 14:23 back over and we'll just repeat the 14:24 process again once it has completely 14:26 fixed it cool so it says that it's done 14:28 let's try this one more time hit this in 14:29 here come back over it's listen for test 14:32 event come back over here and then we 14:34 hit 14:35 oops boom send that one over come back 14:37 over to nhn and do we see it let's have 14:40 a look we actually see the 14:42 information there you go goal hey I want 14:44 to hit 10% body fat awesome and then we 14:46 come back now we go for the AI agent uh 14:49 let's have a look and it's easy to 14:50 exclude this stuff but I just want to 14:51 make sure that you get a real authentic 14:53 look of Hab this works did we Define 14:55 below now let's find out the information 14:57 that we got so where is is our goal I 15:00 just copy the query and drop the query 15:02 in which is Ace and then for options 15:03 guys which is basically hey every time 15:05 it fires this is what comes over then 15:06 the option section just type in system 15:08 message and we can give it a prompt and 15:10 just out of respect for your time I'm 15:11 just going to paste in the prompt I did 15:12 earlier which is essentially you're a 15:14 fitness coach AI you are fit coach an a 15:16 fitness coach designed to provide 15:17 personalized feedback on the fitness 15:18 goals and objectives your process your 15:20 purpose is to help users refine their 15:22 Fitness plans objectives analyze your 15:24 objective for clarity specificity and 15:25 blah blah blah so basically enter your 15:27 desired prompting in this we got lots of 15:29 guides on how to create epic proms 15:30 inside the community um and what we do 15:32 then guys is we can let me just come off 15:35 this very quickly let me come to this 15:36 guy let me pin this now so we can use 15:38 this in all the data going forward we're 15:40 going to click on the chat model in 15:41 other words we need to give it a Brin 15:42 could be deep seek could be clae I'm 15:44 just going to use um open AI just for 15:47 its own sake and basically you connect 15:49 it you do that by the way by coming over 15:51 to platform. open.com whatever and we 15:55 come down here uh you're on API Keys you 15:58 copy the API keys and then you just 15:59 basically enter that in when you want to 16:01 create it if you've not done that so far 16:02 coming back over to our beautiful 16:04 scenario which is evading me at the very 16:06 moment and we're here okay sweet you can 16:09 choose a model before a minut is fine or 16:11 whatever whatever your model preference 16:12 is we come off Ace so what we can do is 16:14 click on this guy we can test the step 16:17 and what it will do since we Pinn that 16:18 data it will trial it with the data we 16:20 pinned and this will give us some output 16:22 as if it's working properly so we give 16:23 it a few seconds and guys thank you for 16:26 sharing your Fitness goal of wanting to 16:27 reach 10% body fat let's break this down 16:29 and blah blah blah and so now it's taken 16:30 that and completed it the final step is 16:32 to Simply Now send it back where it came 16:34 from and to do that we click on this 16:36 button we type in web hook we click on 16:37 this guy we then come down to I'm have a 16:41 quick look actually uh let me just click 16:43 on this let me just pin this data 16:46 beautiful oops it's not this one 16:47 actually let me come back off get rid of 16:48 this guy it is web hook it's respond to 16:51 a web hook okay Ace now here's what I 16:54 want you to do you need to come back 16:55 over to this web hug and you need to 16:57 click on instead of responding 16:58 immediately I want to come down and say 17:00 when the last node finishes and then 17:03 you're going to click off I'm going to 17:03 unpin the data now I'm going to test the 17:06 entire workflow okay going to come back 17:08 over here and what I'm going to say is 17:11 give this prompt come down here enter it 17:14 now what's going to happen this is going 17:15 to get sent over to the 17:18 scenario okay so that hasn't come 17:20 through let's just check out what's 17:21 happened there apologies guys actually 17:22 the one that we need is respond using 17:24 the respond to web hook n my apologies 17:26 we come off we come back here you see 17:28 it's always a stuff like this and then 17:30 we just click on Save real quick and 17:31 then let's just test this one more time 17:33 okay test workflow in fact let me just 17:36 unpin this as well just for Aesthetics 17:38 you could to be stickler for the 17:39 Aesthetics right wait for trigger event 17:41 okay cool let's go back over now and try 17:43 this again uh we want to get 10 we 17:45 really want to get to 10% body fight 17:46 don't we but I'll give it something 17:47 specific I am 15% body fight and I have 17:53 have been 17:57 training for one year cool we hit enter 18:01 beautiful that's getting added in we've 18:02 now got this beautiful thing we come 18:03 back over to the scenario let's see 18:06 what's coming back on was it listening 18:08 okay we weren't even testing the 18:09 workflow we probably want to do that 18:10 right oops that's the wrong one it's 18:12 this one cool and it's completed so it 18:14 says that it's sent the information back 18:15 we come back over um let's have a quick 18:18 look at what we've got so let's see what 18:20 the AI said I think what's happened here 18:23 so you can see it shared it here but 18:25 it's not popped back up to lovable so 18:28 what I'm going to say is look hey I 18:30 would like you 18:32 to display the 18:35 response from the web hook in the 18:40 um area underneath the new goal once it 18:45 comes back once it comes 18:48 back show a loading 18:54 animation in the 18:57 meantime make it look look 19:00 distinctive in design so it stands out 19:04 hit enter cool and then liable can 19:06 basically affect it and you sort of get 19:08 the idea here guys what we could do is 19:10 say now this is what it's called is you 19:11 can break it down to task so you give it 19:13 to the AI agent and what it does it will 19:15 split out five tasks with one of 19:17 predefined categories and then all you 19:19 could do is then it will just say hey 19:20 you're going to get task one 2 3 4 five 19:22 you are then going to assemble ABCDE EF 19:24 and that's it can take it to a 19:25 completely different level in fact we 19:27 could even add that to the problem like 19:28 hey you will give me Json output with 19:29 five things it will then link and then 19:31 once it's done that guys basically you 19:33 can see how epic I mean look how clean 19:34 and crisp that looks you're getting five 19:36 unique actions for everything that you 19:38 give and you can imagine the 19:39 applications of this personally if you 19:41 want to sell it to a client nobody's 19:43 rocking up with pre stuff like this 19:45 let's say I'm a big believer and if 19:46 you're looking to get clients to use 19:47 what I call the whale strategy which is 19:49 high investment low numbers in other 19:51 words you spend half a day a full day 19:53 working on getting one particular client 19:55 giving them value and if you had an idea 19:56 for a what back for a business there is 19:58 no reason why you couldn't build this 19:59 for a client proactively say hey I think 20:02 this is really neat for your business I 20:03 think this is helpful have you thought 20:04 about building an app like this there 20:05 you go they would probably think if they 20:07 don't understand what you understand 20:09 because you're a badass you're watching 20:10 this far to the video they'd think this 20:11 cost 100 thousand to develop and like we 20:13 need this guy on the team crushing it 20:15 and nailing it so this kind of stuff is 20:17 flipping really really it's just an 20:19 excellent way to show your kind of a 20:21 automation skills cool it says that it's 20:23 completed now so we give us a second and 20:24 then we'll be able to test it fully cool 20:26 so with that in mind let's come over 20:27 let's test it we ented in we come back 20:29 over is this the one we're going to test 20:31 the workflow we come back over here we 20:34 are going to enter the information there 20:36 we go there we go test it in processing 20:38 your fitness goals oh my gosh this looks 20:39 so freaking sick let's come back over is 20:41 it being done it's working a agent doing 20:43 his business and let's see if we get the 20:44 information back and there you go guys 20:46 greater he PR goals Clarity blah blah 20:48 blah and then what we do is we just 20:50 specify hey we want it in markdown 20:51 instead of like having these different 20:52 asterisks and there you go guys it is as 20:55 simple as that the applications of this 20:56 are absolutely out of control in any 20:58 case I really hope you enjoyed the video 21:00 and yeah have a great week and I'll see 21:01 you the next one