I built an AI App with Loveable & n8n (No-Code Tutorial)

0:00 in this video I'm going to show you step 0:01 by step how to create this amazing SAS 0:03 platform coach AI using lovable as a 0:06 front end and then nend as a back end 0:09 I'm going to build this entirely with no 0:11 code at all I'm not going to write a 0:12 single line of code so you'll see 0:14 exactly how amazing it is and how 0:16 quickly it is nowadays to build a full 0:18 stack application or a full SAS service 0:21 just using no code tools like leval and 0:23 N then so this coach AI that we're going 0:26 to build is very similar to an already 0:28 existing business called coach so I kind 0:30 of replicated this and obviously I 0:32 changed the color schemes and everything 0:34 else but it the work it works exactly 0:36 like it where we're going to be 0:37 providing uh coaching service using our 0:40 AI coach and obviously the AI coach will 0:42 be our AI agent in the back end that 0:45 will connect via web hook to our front 0:47 end and uh lovable so that way when 0:49 somebody is interacting with this with 0:51 this really nice and beautiful front-end 0:53 UI we can send all of the information 0:56 from the front here to the back the AI 0:58 agent where then it will process it and 1:00 send that information back to us in the 1:02 front end in this beautiful interface 1:04 again this is going to be a step-by-step 1:06 tutorial so make sure you stick around 1:07 to the end because you're going to learn 1:09 how to build amazing app moving forward 1:11 with these really cool no code platforms 1:13 that are available in our disposal all 1:15 right so without any further Ado let's 1:17 jump right into the video all right so 1:18 I'm going to start with a demo first and 1:19 then we're going to go ahead and step 1:21 by-step build this thing so the first 1:22 thing I need to do is I'm going to go 1:24 over to uh blank workflow and I'm just 1:26 going to uh bring in the template here 1:29 so if I go to my School Community this 1:31 is by the way part of the Deep dive 1:32 series called Full stack web app that 1:34 I'm doing uh which is going to be a full 1:37 introduction to um web hooks andad then 1:40 to lovable how to connect so if you're 1:42 serious and if you want to learn more 1:44 again there's a ton of lessons here that 1:45 I've provided this is just going to be 1:47 the one that um I'm going to provide 1:49 here but I have you know done like an 1:50 introduction to web hooks um I've also 1:53 given uh kind of a detail guide on how 1:56 to connect lovable to NN via web hooks 1:59 because obviously couldn't fit all of 2:00 that in this entire video otherwise this 2:02 would been like a 5 hour video long but 2:03 still this video what I'm about to show 2:05 you is still going to be step by step 2:07 but if you wanted a bit more detail 2:08 please make sure you join the school 2:09 Community anyways all right so let's go 2:11 ahead and uh take a look at this one 2:14 right here so I'm going to head down to 2:16 my blueprint so I'm just going to 2:18 download this so now I want to bring 2:21 this over to my workflow so that way we 2:23 can take a look at the demo going to 2:24 click on from file lovable all right 2:27 perfect so what's happening here quickly 2:29 is we're just listening to a web hook 2:31 we're processing the information via eii 2:33 agent this has attach this is connected 2:35 to Surf API so that way it responds to 2:38 any uh uh news related or any current 2:41 events and then it's going to send that 2:43 uh response back to the web hook to our 2:45 front end here again I want to walk 2:47 through step by step but this just show 2:48 you uh what this is doing right now so 2:50 let me go ahead and bring this over here 2:53 all right so as you can see on the left 2:54 hand side I'm going to test this 2:55 workflow so let me go ahead 2:57 and click on test workflow and now this 3:00 web Hook is listening for the 3:02 information that will be coming in from 3:03 the front end here so imagine this is 3:06 our uh um website now so I'm just going 3:09 to say get coaching now so this is going 3:11 to now provide this little um UI for me 3:14 to interact with this EI agent or the 3:16 service that I'm providing so said how 3:18 can I help you with your career ask me 3:20 about your career transition skill 3:21 development industry insights or career 3:23 challenges you're facing because again 3:25 this is coach AI that's kind of geared 3:27 towards more um professional so that's 3:30 why we're kind of putting this uh 3:32 placeholder question so let's say I want 3:33 to ask I feel stuck in my current role 3:35 how can I find a more fulfilling career 3:37 right so I'm going to click on this or 3:38 you can type it there so I'm just going 3:40 to press send now you'll see that this 3:41 is going to send that information back 3:42 to our back end there you go in an ed 3:44 end and the AI agent is going to process 3:46 this and this is going to send this 3:48 information back to the front end here 3:51 so it says to find a more fulfilling 3:52 career stri by assessing your passion 3:54 your strength through self-reflection or 3:56 career assessment blah blah blah right 3:57 so as you can see this information came 3:59 through so now let's go try again um 4:03 let's say what are the current 4:06 top 4:09 careers in 2025 so you will see that it 4:12 will be able to access that as well so 4:14 let's go ahead and test the workflow 4:15 again I'm going to press enter same 4:18 thing it's going to now use Ser API to 4:20 find out the current career top careers 4:22 in the top careers projector for 2025 4:24 includes n nurse practitioners blah blah 4:26 blah see it's very seamless the 4:29 interaction is is very seamless and it's 4:30 very quick right so let's go ahead and 4:32 take a look at inside our NN to see 4:34 what's going on and then we're going to 4:35 go ahead and start with lovable and then 4:37 come back and build this thing so let me 4:39 zoom in here so the information comes in 4:42 Via our web hook there you go so it says 4:44 body what are the current top careers in 4:47 2025 this is going to get processed 4:49 through our AI agent which has a very 4:51 simple um system message and now this is 4:54 going to utilize the windows buffer 4:56 memory to keep the conversation very 4:58 natural it's going to use API to 5:00 research information and it's going to 5:02 send this information back via this 5:04 output because we and we have told it to 5:06 keep it brief so we've said provide 5:08 brief three sentence responses right but 5:10 we can play around with the prompt later 5:11 on to make this even better all right so 5:13 that's what's happening right in the 5:14 back end everything is being handled by 5:16 NN and in the front end everything is 5:18 hand handled by our coach AI front end 5:22 using L all right so now that you have 5:24 seen the demo let's go ahead and get 5:26 started with building this thing step by 5:28 step so I'm going to actually 5:31 start with our lvbl let me go here and 5:36 perfect so let's create a new file so 5:39 I'm just going to go 5:42 to lovable dodev so this is the front 5:45 end of lovable if you're not familiar 5:47 with lovable it's a really cool no code 5:50 AI platform where you can build 5:52 applications full stack application 5:54 Services AI Services literally within 5:56 minutes right because it's very easy you 5:58 can interact with it in an natural uh 6:00 natural way uh so let's go ahead and 6:03 take a look at kind of the first step 6:06 obviously it gives you a free um tier 6:09 where you can have up to I think it's 6:12 like five messages a day yeah there goes 6:13 five messages a day uh total M of 30 6:16 messages per month each message means 6:17 that every time you input a message or 6:19 interact with your editor that counts as 6:22 one one message but anyways try the free 6:24 version and if you need it more you can 6:25 upgrade all right so in here the easiest 6:28 thing to do is because every time you 6:29 put a message that counts as one message 6:31 and you only have five messages you want 6:33 to make sure that your messages are 6:34 being counted right so the best way to 6:36 do it I've made it pretty easy easy so 6:38 if I go to the classroom section 6:41 here inside 6:44 oops uh Deep dive topics so full stack 6:47 apps right here so if I go and obviously 6:50 I've provided all resources there so 6:52 this is the exact code uh and the exact 6:55 prompt that I'm going to use if you want 6:57 to build your own thing I've also 6:58 provided in Universal prompt for lovable 7:01 Dev again I did a lot of testing to come 7:03 up with this great prompt here so just 7:05 copy this prompt I mean this is a very 7:06 comprehensive prompt but you can copy 7:08 this entire prompt paste it in like a 7:10 chatina provided a uh example usage here 7:13 so you said use the following prompt 7:14 template to generate a prompt for lavall 7:16 dodev I want to build a personal AI 7:18 Fitness coach for example right so 7:19 whatever you're trying to build you 7:21 you'll use this prompt as a template and 7:23 then in put it in your uh chat GPT or 7:27 cloud and it will create that there's a 7:29 there are a few important Point things 7:31 to point out here that I'm going to show 7:32 but for this particular uh AI agent for 7:35 this what we're about to build the coach 7:36 AI this is the code prompt here too so 7:38 if you want to build this out just 7:39 literally copy paste this so I'm going 7:41 to literally copy 7:44 this let see and paste it over to my 7:48 appable so I'm going to go over 7:50 here paste it here's a very important 7:53 Point here there's a cuz obviously all 7:55 of the information all all the data 7:57 exchange is going to be happening with 7:59 our um with our web hook here so on the 8:03 NN side so let's go ahead and actually 8:06 get rid of this so that way I can start 8:08 fresh right so the first thing you need 8:10 to do on the nend side uh is to add a 8:13 web hook right so I'm just going to 8:15 click on search for web hook this is 8:16 going to be a trigger the way a web hook 8:18 trigger works is that it's a way for 8:21 application external application to 8:23 communicate to naden or with naden and 8:26 this sends information back and forth 8:28 via the respond to hook but the trigger 8:30 is the one that's going to initiate the 8:33 this workflow right so therefore on The 8:36 Lovable side we're going to need to add 8:38 the web hook URL this triggers URL so 8:40 that way it sends all of that 8:42 information back to NAD end so that way 8:44 we can process that all right so our 8:46 method is going to be 8:48 post and then the path I'm just going to 8:51 change this to uh coach AI for example 8:54 right so this just means this this just 8:56 means that uh the path is going to be a 8:58 lot cleaner because the default is just 9:00 as gibberish all right so we're going to 9:03 do uh coach AI the production if this is 9:06 live you want to make sure you switch 9:07 the production but we're going to use 9:08 test because obviously I want to make 9:10 sure everything is working so you're 9:11 going to copy this web hook URL okay 9:13 you're going to leave everything else as 9:14 it is we'll change this uh later on to 9:18 um accommodate our when we add our AI 9:20 agent all right so now you added your 9:22 web hook so now you're going to go back 9:24 inside 9:26 this uh prompt I I didn't press enter 9:28 yet so because I just copy and pasted it 9:31 so now there's a section right here on 9:33 the second it says webhook communication 9:34 with naden it says insert your naden 9:37 webook url so I'm literally going to get 9:39 rid of 9:41 this and I'm going to 9:43 paste my webook URL that's it that's all 9:46 you need to do everything else will be 9:48 taken care of by this prompt that I 9:49 created and the way I generated this 9:51 prompt is again I looked at uh I looked 9:54 at this UI and kind of based on that I 9:56 created that prompt so ours is going to 9:58 look pretty much similar to this but 10:00 obviously uh with a few differences 10:02 color screams and everything else all 10:04 right so you're going to enter that once 10:05 you're done with that all you have to do 10:07 is now press 10:08 enter so now your lovable is going to 10:12 generate the user interface here because 10:14 this is a pretty comprehensive prompt 10:16 and as I was showing earlier the pricing 10:18 means like one message per uh per uh 10:21 sorry it says five messages per day so 10:23 this is this counts as one message 10:25 that's what I was saying make sure that 10:27 you're using a cloud or a uh chat gpt2 10:30 uh your prompts are good otherwise 10:32 you're just going to waste those 10:33 messages so once you implement that now 10:34 as you can see on the right hand side 10:36 it's using the code to build everything 10:38 out again it's kind of hands off I'm not 10:40 touching it it's going to build 10:41 everything out in the front end and it's 10:43 going to use that web hook URL that we 10:45 attached to our prop right here to make 10:47 sure that it's attaching that so that 10:49 way we can send information back and 10:50 forth to our back end and end it in so 10:53 let's go ahead and let this thing finish 10:54 its work and then we will uh go ahead 10:57 and continue with next steps all right 10:58 so it looks like it got done so as you 11:00 can see in the bottom everything got 11:01 updated and now it will go ahead and 11:03 spin up this preview so that way you can 11:05 see exactly what it looks like and there 11:07 you go perfect right coach AI we got the 11:10 same uh very similar user interface as 11:13 this so let me go back and take a look 11:15 at 11:18 this coach AI there you go right very 11:21 similar to that that says coach hello 11:24 our says coach AI but you can see that 11:26 it actually captured all of the color 11:28 scream and everything as well but like I 11:30 said we will change ours a little bit so 11:32 that way the look and feel and the 11:33 colors are different but you can see 11:34 that it based on that prompt it did a 11:36 really good job of uh creating the front 11:39 end at least for the first step right so 11:41 now let's go ahead and play around with 11:43 this so that way we can see exactly 11:45 what's happening so you can see in the 11:47 bottom you have this uh your coach Ai 11:49 and if you just click on start coaching 11:51 then it will take you to this nice 11:53 little user interface where you can have 11:55 seamless interaction with this again the 11:57 the first the one that we saw earlier 11:59 that was was like a different version of 12:00 this but we can play around to make this 12:01 even more robust and make the UI better 12:04 and we can use screenshots to say hey I 12:06 want it to look like this I want it to 12:07 look like that so you um kind of can go 12:11 back and forth with your um with your 12:15 lovable here so let's go ahead and add 12:17 cuz I want to change the UI a little bit 12:20 so I'm going to go back here cuz this is 12:22 what I created earlier so let me 12:25 maximize this there you 12:28 go so I'm just going to take a 12:30 screenshot of this okay so now you'll 12:32 see how easy it is to add and make 12:34 changes to our UI here so I'm going to 12:37 go 12:40 here and say okay I want the 12:45 UI to 12:47 look 12:51 oops like the 12:54 attached okay and I'm literally going to 12:56 bring in my screenshot here 13:01 and press enter and now it's going to 13:02 update the color scheme and thing 13:04 hopefully so that's how you can kind of 13:05 go back and forth with it you can either 13:07 like chat with it directly and tell it 13:09 exactly what you want or you can add a 13:11 UI screenshot so if you're building 13:13 something different a different app then 13:15 you kind of take a screenshot and you 13:16 add it to it and say Hey I want the UI 13:18 to look like this so that way it goes 13:20 ahead and changes everything so now what 13:22 it's going to do is it's going to update 13:25 the code and um and we can always take a 13:27 look at what the code looks like so if 13:29 you click on code viewer here you will 13:31 see exactly that this is the all of the 13:34 code that it has built out right so if 13:36 we go back to the preview now you will 13:38 see that right now it's processing and 13:40 it's working on it and once it gets 13:41 updated once it makes all those changes 13:44 this is going to update the preview to 13:45 make sure it looks exactly like what we 13:47 want so let's go ahead and let this 13:48 finish its work all right so there you 13:50 go it completed the work as you can see 13:52 the UI got updated and now it looks 13:54 beautiful with our own color schreen 13:56 with this green and black and you know 13:59 the the uh it has this right nice little 14:02 chat window on the right side as an 14:03 example and the top and updated you know 14:05 these different uh um navigation here 14:08 obviously these are not clickable but we 14:10 can make this clickable if you want to 14:11 build like multiple page uh website or 14:14 multiple page SAS here but you know I 14:16 just wanted to show you how easy it is 14:17 to update the EI here right so now all I 14:19 have to do is click on get coaching now 14:21 and it just kind of brings up this um 14:24 you know like kind of the UI here and 14:27 you know if you want to further now 14:28 change this and you say hey you know 14:29 what I kind of like the UI that it 14:32 looked like earlier so let me go ahead 14:34 and take a bring this up here because 14:37 our UI looked like this so now same 14:40 thing you'll just add your um your 14:45 oops there you 14:47 go you're going to say you're going to 14:49 take the screenshot same thing you bring 14:51 it over here I want the 14:54 chat window to look like that 15:00 attached you're going to press enter and 15:02 now it's going to update same thing the 15:05 cuz right now if I click on kid coaching 15:06 now it's taking me right here I don't 15:09 like this UI cuz I'm like oh I want kind 15:11 of that nice user interface with um 15:14 those suggested questions because that 15:16 looks cleaner right cuz that's what I 15:17 built earlier um so that's exactly what 15:20 you can do here so let's go ahead and 15:21 let us finish this thing okay so it 15:24 actually made a mistake and it didn't 15:25 make a mistake it was my fault uh so I 15:28 thought that I'm saying hey keep the 15:29 front end or the landing page like this 15:32 so I updated that previous screenshot I 15:34 said hey no I want the landing page to 15:35 still look like this but I want the once 15:38 the user clicks on get coaching now I 15:40 want this to be shown at that specific 15:42 area so that's exactly what I did here 15:44 so now it's going to go ahead and update 15:46 the landing page again every time you 15:48 kind of go back and forth it does take a 15:49 couple of minutes but this shows you how 15:51 easy it is to kind of interact and go 15:53 back and forth here so let's go ahead 15:55 and let this finish and then we're going 15:56 to be done and we're going to switch 15:57 over to our NN so that way we can build 15:59 that side out all right there you go 16:00 perfect so now the front end looks great 16:03 now if I click on get coaching now and 16:05 perfect it looks like uh really nice 16:06 with these you can ask me about anything 16:08 right so if you feel like you want to 16:10 change the UI same thing take a 16:11 screenshot like hey I want to look like 16:13 this but for now this looks good so now 16:15 let's go ahead and connect our um back 16:18 end here right okay let me go over here 16:21 so I can minimize this and we're going 16:24 to head over to our n then 16:27 here all right so so let's go ahead and 16:29 send some information here so I'm going 16:31 to zoom in here right now again all it's 16:34 doing is we're using the HTTP post 16:38 method and since we already copied this 16:40 uh test URL earlier so it should have 16:42 that integration if it doesn't we can 16:43 change it so right now I'm just leaving 16:45 the respond to immediately we can come 16:47 back and change it later on so let's go 16:48 ahead and test this workflow now let's 16:50 see if we're getting any information 16:51 sent from the front end to the back end 16:54 here so I'm just going to click on one 16:55 of these suggested I want to transition 16:56 into AI engineering but don't know where 16:58 to start I'm going to click on this and 17:00 perfect it looks like we're we're 17:02 sending that information back I mean 17:03 obviously this preview kind of shut down 17:05 but um we can come back and adjust that 17:08 later on so let's go ahead and now 17:09 switch over to our nadn so as you can 17:12 see we received this information 17:15 here we reive the information here on 17:18 the query right on the body right here 17:20 so it says I want to transition into AI 17:22 engineering but no no where to start 17:24 right so perfect so let's go ahead and 17:25 pin this so that way we can work with 17:27 this so when you pin this it means that 17:28 we don't have to keep going back and 17:30 forth so now let's go ahead and add our 17:31 AI agent so same thing you're going to 17:33 click on um on your plus button you're 17:36 going to add an AI agent right so now it 17:39 got added here great so now let's go 17:41 ahead and add a chat model I'm going to 17:43 use my chat GPT here our gp4 17:47 mini so let's go ahead inside now what 17:50 we need to do is obviously this is 17:51 expecting a chat trigger so we need to 17:54 change this to Define below so I'm going 17:56 to go to the bottom here and now we need 17:57 to grab the query that's coming in from 17:59 the body of that web hook right because 18:01 this web Hook is sending headers a bunch 18:03 of headers here but we don't need to 18:04 worry about that for now we're just 18:05 going to grab the query here so I'm just 18:07 going to bring it over here and this is 18:09 what it needs to respond so for now 18:11 we're just leaving it as system message 18:13 is your helpful assistant and then we 18:15 can change that later on so now let's go 18:17 ahead and take a look at and process 18:18 this so test workflow so this should now 18:21 process that and it should output a 18:23 proper 18:27 response okay let's take a 18:31 while okay let's take a look at the 18:33 outut oh wow the output is massive so 18:35 let's actually make it so 18:40 respond and two short paragraphs right 18:45 so that way it's not sending us this 18:46 huge um response there okay so let's 18:51 just leave it as this for now all right 18:52 so now we need to be able to send cuz 18:55 right now the communication is one way 18:57 right so we need to be able to send this 18:58 information information back to our uh 19:00 front end in lovable and we need to 19:02 adjust because after it sends 19:04 information this whole thing shuts down 19:05 but we need to tell it hey like you need 19:07 to be able to absorb that information 19:09 via web hook so the way to do that is 19:11 first of all on your AI agent on the 19:14 output you're going to add another web 19:16 hook called respond to web hook so if I 19:17 search for web hook you're going to look 19:19 at respond to web hook oops sorry that's 19:22 the wrong one because the trigger so 19:24 here I'm just going to say web 19:27 hook and we're going to select respond 19:29 to web hook right so this is where we 19:31 need to now um attach or this is being 19:34 attached to the output of this AI agent 19:36 here so on the inside of this respond 19:39 with I'm just going to say all incoming 19:41 items so that way everything goes 19:42 through so now let's go ahead and on the 19:46 trigger here we need to change this from 19:48 respond to IM from immediately to using 19:51 respond to web hook node because now 19:52 we're sending this information back to 19:54 the front end via this respond to we 19:56 right so we're good to go here so now 19:58 let let's go ahead and clear this I'm 20:00 going to go ahead and unpin this unpin 20:03 and now we're going to go back to our 20:05 lovable and we're going to tell it let's 20:08 go ahead and send a message and 20:11 say so looks like I'm 20:16 sending the 20:20 information to naden 20:25 successfully but I am not 20:31 receiving if I could type receiving the 20:33 information 20:36 back from the web from 20:40 naden update the 20:44 UI so it 20:47 displays the 20:51 information that I am 20:53 getting back from n then right something 20:57 like that so I'm just going to press 20:58 enter so now they should be able to grab 21:00 that information from the response to 21:03 that web hook and displayed it to user 21:04 because right now this whole thing is 21:06 kind of shutting down right so this 21:07 should be that simpler build it's not 21:09 going to take too long hopefully uh but 21:11 this will now update the 21:13 UI so let's wait for it and I'm going to 21:16 come back here maximize this so that way 21:18 we can see 21:20 this okay it's good 21:24 boom okay perfect so it says UI updated 21:27 so it changed uh the display data view 21:29 code blah blah we don't need to view the 21:31 code so now you can see the front end 21:33 looks great I'm going to click on get 21:35 coaching now this looks great so now 21:37 hopefully this will work so let's go 21:40 ahead and click on test workflow 21:43 here test workflow so now it's listening 21:47 now I'm going to same thing ask him the 21:50 same thing click on send now it should 21:53 send it and Perfect Look it's sending it 21:55 here all right great it looks like at 21:58 least we're getting some response back 22:00 right so right now it says I couldn't 22:01 retrieve a proper response please try 22:03 again which is fine so let's go ahead 22:04 and see what's happening here okay so 22:07 the AI agent processed it right the AI 22:10 agent processed everything from the web 22:12 hook here and now it uh is sending that 22:15 information back to this web hook so it 22:17 looks like everything is working for 22:18 some reason it's not retrieving 22:20 retrieving that information right okay 22:23 so let's go ahead and now tell it to 22:25 update same thing 22:30 okay so I'm now going to tell it it 22:32 looks like 22:35 NN is sending the response back 22:40 via the web hook 22:44 Noe but the 22:48 UI says and I'm just going to copy 22:53 this and paste it here 22:59 there you go so that's how you can go 23:01 back and forth right so right now 23:02 everything looks like it's set up it's 23:04 just that it's probably having some kind 23:05 of a tough time uh trying to analyze and 23:08 see what's going on but as far as the 23:09 back end it looks like back end is 23:11 working properly the front end we can 23:13 fix this and that's how you can like I 23:15 said go back and forth with your lovable 23:17 uh till you get all of the stuff figured 23:20 out but as you can see I'm not doing any 23:22 kind of coding right everything is just 23:23 kind of natural natural language 23:26 processing all right so it updated it so 23:28 let's try it 23:30 again 23:32 okay so get coaching now it's listening 23:35 or triggers 23:37 listening okay I'm going to click on 23:39 this one this time okay the AI agent 23:41 processes it now the web Hook is going 23:43 to hopefully send that there you go 23:45 perfect so it looks like everything 23:46 worked out right so it say to become a 23:48 successful product manager it's 23:49 essential to develop a mix of technical 23:50 business and okay so now take a let's 23:53 take a look and see if the output is 23:55 actually 23:56 matching the output of this AI agent 23:59 right oh that looks ugly let's click on 24:02 this right move this okay there you go 24:06 to become a successful product manager 24:07 it's essential to develop a Mex 24:09 technical business and ent ent 24:11 interpersonal skills right to become a 24:12 successful product and perfect there you 24:14 go it looks like it is working great so 24:17 let's go ahead and try this again one 24:18 more time to make sure that we're uh not 24:22 getting any kind of 24:25 error hello I'm just testing 24:29 let's see what happens here right and 24:31 perfect there you go hello it looks like 24:33 you're testing okay let's go back hello 24:36 it looks like you're testing things out 24:37 all right perfect so everything is 24:39 working fine right now the communication 24:40 is looking good now let's go ahead and 24:42 add our memory here because you know you 24:45 want this uh to be a natural 24:47 conversation so you want to add a 24:49 Windows buffer memory here so obviously 24:51 if you add click on Windows buffer 24:52 memory it's going to give you a uh 24:54 session ID error because it's looking 24:56 for a chat trigger right so instead same 24:58 thing you're going to change to Define 24:59 below as far as the key so we're going 25:01 to need to add some form of a session so 25:05 you can go back to your your lovable and 25:07 say hey add a session ID so that way you 25:09 can send that information via the body 25:12 um uh back to um your NN so that way you 25:16 can add this right here but for now I'm 25:18 just going to grab one of these to see 25:20 if it works or not this might not be the 25:22 best um use case but why not give it a 25:25 shot so I'm just going to try this x 25:27 real it P thing right all right let's 25:30 try 25:31 that okay so again this is not best 25:35 practice make sure you're updating your 25:37 lovable so that way you're sending a 25:39 session ID but for now this this is fine 25:41 all right so for tools I'm just going to 25:43 add a Sur 25:47 API okay so this is Google search and 25:49 now it has um access to current 25:54 information or current data so let's go 25:56 ahead and now test this out same thing 25:58 I'm going to click on test 26:01 workflow minimize this boom all right so 26:05 now I'm going to say what are the top 26:10 jobs in 2025 right so I'm going to press 26:13 enter and now it should be able to 26:15 access Ser API there you go perfect 26:17 right so now it's going to retrieve that 26:18 information and on the front end you can 26:20 see this is nice little UI showing that 26:22 it's processing right so it's going to 26:24 say the top jobs for projector 2025 is 26:26 nurse practitioner blah blah blah and 26:28 let's go ahead and make sure it came 26:29 from 26:30 here top job 25 is na practitioner it 26:33 manager physician assistant Perfect 26:35 Right everything looks great so now you 26:37 can see you have an entire web app built 26:40 with NN as a back end and your front end 26:43 here as level you can add additional 26:45 tools then obviously you can add back to 26:46 databases and we'll build more of that 26:48 obviously um uh further on but this is 26:51 just kind of to show you an example of 26:53 how all of this can work step by step so 26:55 there you go you have your nice little 26:57 coach AI built feel free to play around 27:00 with this change the UI and if you want 27:02 to make these buttons clickable and add 27:04 additional Pages you can you're more 27:06 than welcome to do that because you can 27:08 now attach uh or you can kind of just 27:10 tell it hey I want this solutions or 27:13 this coaches page to have this and this 27:14 and this right so then you can basically 27:16 add that additional Pages there and you 27:18 can add additional functionalities to 27:20 reach out to your NN to make it even 27:22 more robust right so uh obviously here 27:25 we're going to be building the one that 27:27 I built here the full stack app with 27:29 super base so check that out as well and 27:30 then I'm also going to actually do 27:32 another step bystep so that we can see 27:34 how to connect um NAD to superbase so 27:37 that way you can do a full 27:38 authentication and then obviously all 27:40 these other ones make sure you watch 27:42 that so that way you have a full 27:44 understanding of how to build more 27:46 complex uh apps here and then obviously 27:48 we're going to be doing like a cursor AI 27:50 with n as well as part of this deep dive 27:52 topic series and then obviously all 27:54 these other Deep dive topic series is 27:56 available for everybody there if you're 27:57 against serious about learning how to 27:59 build AI agents and cool workflows and 28:03 automations make sure you join the 28:04 school Community we have a great group 28:06 of passionate people we've got uh live 28:08 builds we've got calendar uh we have got 28:10 calls on a daily basis we've got co- 28:12 builds we've got business strategy 28:14 sessions and then obviously our 28:15 classroom is packed with amazing 28:17 automations and then all of the you know 28:19 different resources that you have 28:21 available for every single one so that 28:22 way you can easily check out and get 28:25 started on your journey when it comes to 28:27 automations and we obviously have call 28:29 recording so that way you can check out 28:31 the different live builds if you miss it 28:33 and a bunch of technical support and 28:34 everything else all right well hopefully 28:36 you found that video helpful make sure 28:37 you like And subscribe we've got got 28:39 some amazing content that's upcoming you 28:40 do want to miss thanks for watching 28:42 again and I'll see you on the next one 28:45 [Music]