I Built a FULL Web App with n8n, Lovable & Supabase (NO CODE!)

0:00 in this video I'm going to show you how 0:01 to build a full flashed full stack 0:03 application using lovable. deev nadn and 0:07 superbase this application is going to 0:09 have functionality such as 0:11 authentication meaning somebody can sign 0:13 up and log into their account we're 0:15 going we're going to create that uh 0:17 signin process and the authentication in 0:20 stored on our superbase account and 0:22 we're also going to utilize and end to 0:24 be able to upload files to our Vector 0:26 databases in our superbase account we're 0:29 going to be able to delete the files all 0:31 from the front end that we're going to 0:33 create using lovable and we're also 0:35 going to be able to chat with our 0:37 application to retrieve information 0:39 essentially a rag which will have the 0:41 lovable user interface this is going to 0:43 be a very powerful application that you 0:45 can build for your clients or for your 0:47 own personal use case again you can use 0:49 this as an inspiration so that way you 0:51 can build your own application I'm going 0:53 to go ahead and start with a demo so 0:54 that way you can see that everything is 0:56 working that everything is connected 0:57 together and then we're going to go 0:59 ahead and walk through step by step and 1:00 show you exactly how to build this thing 1:02 using lovable for the front end and then 1:04 also how to store all of this 1:06 information in our super base and our 1:08 Vector database so without any further 1:09 delay let's Jump Right In All right so 1:11 the first thing I'm going to do is I'm 1:12 going to go to my blank um ENT canvas so 1:16 we're going to actually import my uh 1:19 workflow here so I'm going to go to my 1:20 school community in the class section 1:23 and right here so I'm going to import 1:24 this Json template so I'm going to 1:26 download this and then I'm going to come 1:28 back to my and it then here go to these 1:32 three dots right here and click on 1:34 import from file and now I'm going to 1:36 just import this file right here all 1:40 right so everything got imported over 1:42 again this is going to add files to the 1:44 VOR database this particular workflow 1:47 right here is going to delete the file 1:48 from super base and this is where we're 1:50 going to chat with our data or our files 1:53 inside our back base but anyways let's 1:54 go ahead and take a demo first take a 1:56 look at Demo First so I'm going to 1:58 actually try to minimize this so that 2:00 way you can see exactly what's going 2:03 on right let's bring this over 2:07 here let's go back to our lavable 2:14 here all right cuz I just want to show 2:16 you exactly what's going on oh wow 2:18 that's too 2:19 small we're going to first test this 2:22 step where we're going to add our file 2:24 to our Vector database um and then we're 2:26 going to go ahead and do the rest 2:28 afterwards so let's go ahead and first 2:30 um get started right here on the lovable 2:32 side actually you know what let me 2:34 actually log in first so create an 2:35 account here so let's go ahead and get 2:37 started I'm going to click on get 2:38 started so now here it says if you don't 2:41 have an account sign up or if you 2:42 already have an account you can sign in 2:44 just like a normal application would or 2:46 in a website would so we're storing all 2:48 of our authentication and profiles when 2:51 when a user creates an account right 2:53 here on our superb stable called 2:54 profiles as you can see I already have 2:56 one so I'm going to go ahead and log in 2:58 and then I'm going to come back and show 2:59 you how to create one if you don't have 3:01 an account so let me go ahead and put my 3:03 password here so I can at least show you 3:05 the demo so I'm going to sign in so now 3:09 as you can see uh here I am I have the 3:12 ability to upload files PDF files so 3:14 that way I can interact with it right so 3:16 let me go ahead and 3:18 now go to the table so that way you can 3:21 see on the files table right now it's 3:23 empty right the files file table is 3:25 empty and then also the vector data 3:27 table is empty so this is a table that 3:29 that's going to uh have um the vector 3:33 embeddings once we vectorize our 3:34 documents and I'm going to show you 3:36 exactly uh that after we come back and 3:38 upload our file you'll see that there 3:39 will be new vectors here from our files 3:42 here so let me go ahead and now minimize 3:45 this or pull this on the side go right 3:48 here so I'm going to listen for my where 3:52 the test workflow 3:55 here test workflow so now we're going to 3:58 be listening for all of these web hooks 4:01 that are coming in right here so it 4:03 should initiate this one which means 4:05 adding files to Vector database as soon 4:07 as I upload the file here so let's go 4:09 ahead and do that let me go ahead right 4:12 here so I'm going to click on upload 4:14 file so I'm going to grab this Alex 4:15 Carter's resume so let me go ahead and 4:18 upload that so now as you can see on the 4:20 left hand side as you can see there you 4:22 go now it's being activated so this 4:24 initial um workflow is being updated 4:27 this is updating uh the vector database 4:29 so it's going to vectorize the file and 4:31 it's going to upload this particular 4:33 document into the vector database on our 4:35 lovable or our super base here so now 4:38 I'm in the vector's data table so if I 4:40 refresh the page now you should be able 4:42 to see some data in there because we 4:43 just uploaded the file so if I refresh 4:45 the 4:46 page now we should be able to see the 4:48 embedding files there you go right name 4:50 Alex Carter contact so this is just Alex 4:52 Carter's resume we can add more files 4:54 later on but you can see everything got 4:56 uploaded and if we go to the files tab 4:58 right here so now we'll be able to see 5:00 that we have a new file right 5:02 here alexc carter. PDF that's exactly 5:05 the file that we uploaded right so now 5:07 we're going to interact with this file 5:09 from our lovable front end right so 5:11 we're just going to click on chat with 5:13 files now and now we should be able to 5:15 chat with this document through our 5:17 Vector database so let me go ahead and 5:19 pull up um oops that's not what I meant 5:22 to do let me actually go ahead and pull 5:24 up this Alex Carter's 5:26 resume so all right so here we go so 5:30 this is Alex Carter's resume right 5:32 so so right now let's see um let's take 5:35 a look let's ask this to see where did 5:37 Alex Carter go to college right so it 5:39 should say uh University of California 5:41 at Berkeley so if we have everything set 5:44 up properly then we should be able to 5:46 grab that all right so let me now zoom 5:48 in a little bit here so that way you can 5:50 see that now this AI agent should be 5:53 activated right so now you'll see that 5:56 I'm going to click on test workflow and 5:58 it will be listening for this right 5:59 right here so that way we will interact 6:01 with this document from our front end it 6:03 should be able to grab and activate this 6:05 workflow and the AI agent will be 6:07 retrieving this information from our 6:09 super base back to database so I'm going 6:10 to click on task workflow so let's go 6:12 ahead and now create a new chat and I'm 6:16 going to say where 6:18 did Alex 6:20 Carter go to college right something 6:23 like this so now if I press enter so now 6:26 it should reach out to our to our web 6:28 hook here there you go they I agent gets 6:30 activated it retri retrieves the 6:32 information from our superbas Vector 6:33 database and now it's going to respond 6:35 back to the um uh front end here right 6:38 here it says Alex Carter attended the 6:39 University of California berky where he 6:42 earned a Bachelor's of Science in 6:43 computer science and if you pull that up 6:45 that's exactly uh correct right so he 6:48 attended computer science and um um or 6:52 he attended California Berkeley and 6:55 received a degree in Bachelor's in 6:57 computer science so perfect everything 6:59 worked so now this let's test this 7:01 workflow where we'll be able to delete 7:03 this file from our superbase Vector 7:05 database right so now let's go ahead and 7:08 go back to our files so now I should be 7:11 able to click on delete and this should 7:13 initiate this process and delete our uh 7:17 file from our Vector database and all of 7:19 the vector data here as well so let's go 7:21 ahead and test that so now I'm going to 7:23 go ahead and click on test workflow 7:25 again and you should see this gets 7:26 initiated that everything is correct so 7:28 I'm going to click on delete 7:31 there you go that got initiated it 7:33 deleted the workflow so now if we go 7:35 ahead and take a look at it right here 7:37 refresh the 7:41 page and perfect it says this table is 7:43 empty right so it uh deleted all of the 7:46 vectors from that Vector database and 7:47 the reason why this is important is 7:49 because you don't want to rev vectorize 7:51 right so you want to be able to have the 7:52 ability to delete the file and then when 7:54 you're uploading something different you 7:56 should be able to vectorize that again 7:58 so that's why this is very important to 8:00 have this particular step in there as 8:01 well all right so now that you have seen 8:04 this so let me maximize this right here 8:06 so again we'll have the first one is 8:09 going to be adding to superbase Vector 8:11 database we're going to vectorize the 8:12 document the second one is deleting it 8:14 from super base and the third one is for 8:16 us the ability to chat with this 8:19 document all right so let's go back to 8:20 our lovable. deev now and take a look at 8:22 what's going on here and how this was 8:25 created uh so let me actually go back to 8:28 my off here actually I'm just going to 8:31 sign out and start from start from the 8:34 beginning sign 8:36 out all right so this is you know just a 8:38 UI and you can use chat GPT or CLA to be 8:41 able to create any kind of UI and I'm 8:43 going to show how to do that uh but just 8:46 quickly What's Happening Here is like 8:47 we're creating the front end UI and when 8:49 you click on get started you you have 8:51 the ability to sign up create a new 8:53 account or login right so that's what's 8:55 happening here and again all of the 8:56 authentication will be stored in our 8:58 super base that I'm I'm going to show in 9:00 a little bit all right so let me quickly 9:01 go over and show you how simple it is to 9:04 nowadays build a full stack application 9:07 uh with lovable lovable. deev is great 9:09 it's actually one of my favorite 9:11 platforms out there but there's curses 9:12 and others but I like using lovable a 9:14 lot so essentially this right here we're 9:17 giving it the proper the initial 9:20 instruction to create our front end 9:22 right here so the way to do this is 9:24 literally you can just take a screenshot 9:26 of whatever file you have right you can 9:28 take this upload this to a chat GPT or a 9:32 clot and say hey create I want to 9:37 create the attached 9:39 app please provide actually I'm just 9:43 going to attach app 9:44 using 9:47 lovable 9:48 dodev please provide the 9:52 prompt so you can again play around and 9:55 take a look at the different uh sections 9:58 that you want to create this is just 9:59 example you can literally just copy this 10:01 and paste it on lavable now it's very 10:03 easy to sign up for lavable lavable has 10:05 great free accounts you can get started 10:06 there and as soon as you come in you 10:08 just right here on the left hand side 10:10 you can have an interaction with this 10:12 app and go back and forth between the 10:14 preview and once it creates something if 10:16 it runs into any kind of error you can 10:19 always chat back and forth with it just 10:21 like you would in a normal chat gbt for 10:22 example right so it's a really great no 10:24 code way to create any application a 10:27 website an app a full stack app an R 10:29 case and um everything else that you can 10:31 do so that's literally what I what we 10:33 did right here went to chat GPT Say Hey 10:36 I want to create something like this 10:37 copy the prompt from chat GPT add it 10:40 here and that's how I you get started 10:42 right so it says okay I'll help you 10:43 create stunning hero section the 10:45 following modern design so again if you 10:47 don't like any of these you can change 10:49 it and once it creates it if you don't 10:51 like it you can go back and forth with 10:52 it right so it's a same idea right here 10:54 so once it created the first one it says 10:56 I've created a beautiful and responsible 10:58 hero section with elegant animation 11:00 premium design blah blah blah so now 11:02 you're like okay well the CTA and sign 11:04 up buttons are not clickable right so 11:06 because obviously once it creates the 11:08 front end a lot of times the buttons are 11:09 not going to work so you same thing just 11:11 go back and forth you test everything 11:13 one step at a time and you say okay well 11:16 right now I'm clicking on sign up button 11:17 it's not working so you say all right 11:19 fix this and it'll go ahead and 11:20 Implement that right and then afterwards 11:22 same thing now once you're done with 11:24 this once you everything is clickable 11:27 and once you are satisfied with the UI 11:29 so the next step is to be able to 11:31 connect your super base to lavable now 11:33 the great thing is that lavable already 11:35 has a connection with superbase so now 11:37 it's very very simple to do you 11:40 literally again I I said please connect 11:42 my super base project L to you know 11:44 because that's the uh project that I 11:46 already have inside my super base so 11:48 make sure you have a project that you 11:50 have already created so this is the name 11:52 that we're grabbing right so we're 11:53 putting that literally right here and if 11:55 you want to know how to connect your 11:57 lovable to superbase the account like 11:59 you can literally go to YouTube and 12:00 search so they have uh this is their 12:02 Channel lovable uh so they have several 12:04 videos on how to that they show you how 12:06 to connect your um lovable to your 12:09 superbase account introduction to 12:11 superbase this is a good one so there 12:13 are a lot of really great guides if you 12:15 want to do something in particular with 12:17 your lovable and superbase account as 12:19 far as the connection goes you can 12:20 certainly do that but essentially you 12:21 know I followed that instruction and I 12:23 said please connect my superbase project 12:25 lovable which is the name right here as 12:27 you can see to this particular uh app so 12:30 now same thing I'm now connecting to you 12:32 to your superbase project to gather 12:33 database structure tables and security 12:35 setting right so that's what you're 12:36 doing you just going back and forth with 12:38 this so afterwards it's like oh the CTN 12:41 sign up buttons is not clickable make 12:43 both buttons clickable create an app and 12:44 sign in blah blah blah you just go back 12:46 and forth with it till everything is 12:48 properly working right so now it will 12:51 give you the SQL data and then it will 12:53 ask you to approve this and once it's 12:55 good to go you can go ahead all right 12:57 and say uh uh everything looks good go 12:59 ahead and run so once you're uh going 13:02 back and forth and once everything is 13:04 done so now you'll be able to add 13:06 everything to your account and now once 13:09 that is connected to your superbase 13:11 account so the way to actually add the 13:13 authentication to your NAD here because 13:16 this is the important part right like we 13:18 need to be able to add all of this and 13:20 connect it to our superbase account and 13:22 then also to our lovable account via our 13:25 web hook here so I've done plenty of 13:27 tutorials on how to connect web hooks 13:28 but 13:29 essentially you create a node called or 13:32 you create the web hook node and then 13:35 this is the URL that you're going to 13:37 post and add to your superbase account 13:40 and then also to your lovable 13:43 application when you creating it and the 13:44 way to do that is literally you just 13:46 copy this right you go again same thing 13:48 you just go back and forth with this so 13:49 at the end I said 13:51 um the web hook URL called the web hook 13:55 URL in the chat with files Edge function 13:57 has been updated uh oh sorry this is 13:59 what I did so I just changed the web 14:01 hook URL from this to this which is 14:03 basically going from test to production 14:05 but it just shows you how easy it is to 14:07 add that so once you are ready once 14:09 everything is good to go on your side 14:11 you just basically say okay now add uh 14:14 for me the ability to interact with my 14:16 nadn backend via this particular web 14:19 hook right and then once you do that 14:21 then you can start testing it out and 14:23 you'll be able to receive information 14:24 back and forth between your lovable and 14:27 your naden again I'm planning to do more 14:29 tutorials on this and make a bit more 14:31 simpler app so that way you know how to 14:33 build these things so now after you do 14:36 that another important thing is to 14:37 connect your uh superbase account also 14:40 via web hook so that way it has that 14:42 interaction back and forth so the way to 14:44 do that is you go to Integrations and 14:47 you add this database web hooks so if 14:50 it's not already installed you literally 14:51 just click on it and get it installed 14:53 once you have this installed you will 14:55 head over and next to the overview it 14:57 says web hooks so next to web hooks this 14:59 is where you will add two web hooks one 15:01 web hook to upload file and another web 15:03 hook to delete file right and this is U 15:06 because we have two yeah so right here 15:09 we have this first one that we're going 15:11 to be able to upload our file to our VOR 15:12 database and another one that we're 15:14 going to be deleting files from super uh 15:16 superbase and this is all done via our 15:18 web hook because the command is going to 15:20 be coming in from our lovable front end 15:22 so therefore we need to be able to uh 15:25 give the superbase the ability to 15:27 interact with this web hook as soon as 15:29 we receive the command from our Lile 15:31 front end right so the way to do that is 15:33 very simple you'll click on create new 15:35 web hook or create new new hook you uh 15:38 give it a name and then you also add so 15:40 let me go back so this has more data if 15:43 I click on edit hook yep so you create 15:45 the name upload file the tables you 15:47 select the tables that you would create 15:49 on your super base and again I've done a 15:52 step-by-step tutorial on how to create 15:54 the files and your superbase account so 15:56 please make sure you watch that it's 15:58 also inside my School community so if 15:59 you have any questions uh you know feel 16:01 free to jump in and ask that question in 16:04 one of the calls or you can um put your 16:07 questions in ask this channel always as 16:09 well all right so once you um where go 16:12 yeah so right here once you're add the 16:15 name uh select the table files you'll 16:17 select the post the method as post and 16:19 this is where you'll add your url right 16:22 so this is exactly what I'm doing I'm 16:24 grabbing literally this URL right here 16:27 and putting it in my HT HTP request 16:29 method right here so once you're done 16:31 you will have both of these web hooks 16:34 that are working now and they should be 16:36 able to interact now back and forth from 16:38 lovable to NAD then back to super base 16:40 right so that's why this is such an 16:41 important uh part right here and then 16:44 also another important thing is like 16:45 when you uh sign up right so right now 16:49 as you can see it says uh sign in but 16:51 let's go ahead and sign up with the new 16:52 account okay so I'm going to click on 16:54 sign up and if I go back to my lovable 16:56 or my super base here so let's go ahead 16:58 and take a look at the 17:00 tables table editor and here are the 17:03 profiles so right now there's only one 17:07 profile it's just my email right here so 17:09 now you will see that I'm going to sign 17:10 up and we'll be able to add a new 17:13 profile right here so I'm going to say 17:17 jacksmith 17:18 gmail.com right all right whatever you 17:22 know we're not going to authenticate it 17:24 or we're not going to be we're not going 17:25 to use this so I'm just going to put 17:26 whatever so if I click on sign up now 17:28 when we go back and refresh this they 17:30 should be able to add another one right 17:32 here if I click on sign up it says 17:36 loading check your email to confirm your 17:38 account so this again that's another 17:40 thing you you also can add a 17:42 authentication to confirm the email so 17:44 that way it's not just some bot right so 17:46 now if I fresh the page right here 17:48 refresh the 17:50 page and perfect there you go this uh 17:54 just got added right so that's exactly 17:56 what we're doing here this is where 17:57 we're storing all follow the profile so 17:59 that way we remember all this 18:01 information so next time when a person 18:03 comes in to our uh account right here in 18:05 the front end they'll be able to Lo log 18:07 in with their account right so that's 18:10 what this does let me get rid of all 18:12 this but anyway so I'm going to go ahead 18:14 and actually sign in to 18:16 my existing account boom it's 18:25 fine all right so now I'm logged in I'm 18:27 going to go ahead and upload click on 18:29 upload file and then we're going to go 18:30 ahead and I'm going to show you exactly 18:32 what happens kind of in each node and 18:34 show you how to kind of grab that 18:36 information that's coming in from 18:37 lovable so let's go ahead and upload a 18:40 file actually you know what I'm going to 18:41 listen for test first I'm going to click 18:43 on test workflow here so that way this 18:45 thing is listening now if I go back to 18:48 lovable here and click on upload file so 18:51 this time we're going to upload Jordan 18:52 Smith's resume okay so if I bring in 18:54 Jordan Smith's resume Jordan Smith right 18:57 here 18:59 uh when to and I'm we're going to 19:01 interact and ask him the same question 19:02 like we did earlier doing the demo about 19:04 the education so let's go ahead and 19:06 upload Jordan Smith's resume here get 19:08 rid of this add upload Jordan Smith's 19:13 resume all right that's uploading so now 19:15 this should be initiated there you go 19:17 that got initiated so now this should go 19:19 ahead and factorize that add it to Super 19:21 based Factor database and perfect that's 19:23 done so if we go back to our lovable 19:25 there you go that file is there now 19:27 let's check our super base refresh the 19:30 page so this should have Vector data 19:32 now hopefully unless I did something 19:36 wrong uh let that load for a 19:41 second it's taking unusually 19:45 long all right there you go perfect name 19:48 Jordan Smith contact blah blah which 19:49 means that it uploaded the proper 19:51 documentation okay so now let's go ahead 19:53 and take a look at our nadn and see 19:54 what's going on here so I'm bring this 19:56 up here I'm going to zoom in just on 19:59 this section because this is what we're 20:01 doing which is adding file back to 20:02 database so we're going to click on web 20:04 hook so what's happening right here is 20:07 all of this information from the front 20:09 end is coming in through this web hook 20:12 and as you can see um the information 20:15 that's being added here is that file so 20:17 it has its particular ID it has the name 20:20 the size and the type which is 20:22 application SL PDF right and it has its 20:24 own unique identification so now the way 20:28 to interact or the way to have lovable 20:30 interact to your NAD is very very simple 20:33 you literally copy this you go to 20:35 lovable and you just say essentially hey 20:38 I want to be able to 20:41 interact 20:43 with NN via the following web 20:48 hook right web hook if I can post 20:53 this and you're going to paste that web 20:55 hook uh I don't know why I didn't paste 20:58 but but anyways so the uh yeah right 21:00 here probably didn't copy it yep and now 21:03 once you press enter here so this should 21:06 be able to now interact with your entire 21:08 applic I don't want to do that right now 21:09 because otherwise like it's going to 21:11 ruin kind of the entire application but 21:13 I already did this up here so if I 21:15 scroll up I think it was somewhere 21:16 around 21:19 here uh there you go yeah so I said now 21:21 create an edge function to connect with 21:23 n and web hook to send the chat query 21:24 and receive response to show the chat 21:26 reply and interface so this was for the 21:27 chat portion but it's the same thing you 21:29 say pass the session ID to user with the 21:32 query web hook URL right here right so 21:34 same thing and if you run into kind of 21:36 issues you just go back and forth with 21:38 lovable and say hey I'm running into 21:39 this error fix this right or something 21:42 else happens you just kind of go back 21:43 and forth till it will figure out 21:44 exactly what you want so essentially 21:46 that's how you interact with your nadn 21:48 from the back end so once you receive 21:51 this information so what's happening in 21:53 this step is that now we're grabbing 21:55 that information we're grabbing this 21:56 file uh and we're going to grab all of 21:59 the existing rows that are inside on our 22:02 table here so you want to make sure 22:04 you're identifying again if you don't 22:05 know how to use um super base please 22:08 watch my previous video not this 22:10 particular previous video right before 22:12 this one but I did a few uh videos back 22:14 where I go through a step by step and 22:15 show you how to add and how to connect 22:18 your super base to your nadn and there's 22:20 plenty of other tutorials on YouTube as 22:22 well I think uh Cole did a great 22:24 tutorial on this one so there's plenty 22:26 of tutorials out there on how to add and 22:29 connect your superbase account to your 22:30 NN but essentially we're grabbing the 22:33 files here or the rules here and from 22:36 that particular account now we're going 22:38 to use this HTTP request because I want 22:40 to download the file that just got 22:42 uploaded to our um superbase account so 22:45 right here as you can see from the 22:47 previous note right we're uh we're 22:49 grabbing that information which is uh 22:52 that file Jordan Smith resume.pdf that 22:55 got uploaded so we we need to now be 22:57 able to download that from uh our 23:00 superbase table and therefore so we can 23:04 add this to our superbase Vector 23:06 database those are two different things 23:07 remember when somebody's adding a table 23:10 from the front end in lovable because 23:12 that's directly connected to our 23:14 superbase account so that gets added to 23:16 the table so now what we're doing is 23:18 we're retrieving that information or 23:21 we're retrieving that file via this uh 23:23 web hook or via this HTTP request which 23:26 again is just directly reaching out to 23:28 super bases storage right this is their 23:31 uh API path to grab that file and 23:34 download it and that's exactly what 23:35 we're doing again it's very simple you 23:37 just set up your authentication you hit 23:40 this endpoint and this will grab that 23:42 data that just got uploaded um and it's 23:44 going to download it right here so this 23:46 got downloaded now the next thing we're 23:48 just going to add an extract file so 23:49 we're going to extract all the 23:50 information from this file and then 23:52 we're just adding this to our Vector 23:54 database right so make sure you have you 23:56 select the proper table which in our 23:57 case is our our vector's data table so 24:00 if I go back right here this is that 24:01 vector's data table that uh I have 24:04 inside my super base so once you grab 24:06 that information and up so now we're 24:08 inserting this documentation that we 24:11 grabbed from this HTTP request from our 24:14 table and we're vectorizing it right so 24:16 same thing this is a very simple process 24:18 we're just going to use the default data 24:20 loader we're just going to grab the file 24:22 path because we're using a metadata here 24:24 um so we're grabbing that information 24:26 we're uploading it to our vector 24:28 database we're chunking it and we're 24:30 going to add a response to web hook this 24:31 is just a simple one so you choose 24:33 response to web hook and you select the 24:36 response or respond with the first 24:38 incoming item so that way um kind of 24:40 this Loop gets closed right so that's 24:42 how you can add your information and the 24:45 reason why again this web Hook is 24:47 important inside your naden is because 24:50 that's how you're communicating back and 24:52 forth right so that's that step that's 24:53 what's happening so now the second step 24:56 is deleting this so let's go ahead and 24:57 do the same thing and now I'm going to 24:59 go ahead and delete this so let me 25:01 listen for this again so I'm going to 25:03 click on test workflow so now if I click 25:06 on 25:11 delete 25:12 oh go through oh yeah there you go it 25:15 went through it deleted it so same thing 25:17 we're grabbing that information we're 25:19 grabbing that information that's coming 25:20 in from our our Lev B through this web 25:22 hook we're deleting the row inside that 25:26 table inside our Vector database using 25:28 this metadata right because we want to 25:30 be able to use and identify which exact 25:33 um rule to delete and we're going to 25:36 respond back limit just means just 25:38 because you're limiting it to one item 25:39 so you don't want to delete more than 25:41 one and Responding back very very simple 25:44 so same thing now if you want to be able 25:46 to chat with this right because it's 25:48 already there oh I actually already 25:49 deleted it let me add it again so now 25:53 I'm going to add this 25:54 again to file 25:58 Smith resume okay uploading so now this 26:01 should initiate again there you go 26:04 perfect so same process I just 26:06 mistakenly deleted it but now let's go 26:08 ahead and test this step right so now we 26:10 should be able to interact with this I'm 26:12 going to delete this test workflow so 26:15 now I should be able to chat with the 26:18 files 26:20 here so I'm going to do new chat I'm 26:23 going to say where 26:27 did Jordan Smith go to 26:33 college so I'm going to press 26:36 send and now it's loading so now it's 26:38 going to reach out to the AI agent the 26:40 AI agent is going to reach out to the 26:42 vector database the superbase vector 26:43 database and respond back to our web 26:45 hook right so you were responding back 26:47 you Jordan Smith attended the Community 26:49 College of San Francisco where they 26:50 earned an associate degree in computer 26:52 science so let's double check now this 26:54 is his 26:55 resume education associate degree in 26:58 computer science Community College of 26:59 San Francisco perfect right so it means 27:01 that we are interacting with the proper 27:03 data with the proper documents so now 27:05 let's go back to our end so let's see 27:07 what's going on here same thing so now 27:09 in this web hook we're sending so let me 27:12 go to Json here we're sending actually 27:16 the message that the user is sending 27:20 right so we need to ask we need to send 27:21 that question or that query to this AI 27:24 agent so it can process it so again that 27:26 came through here where your did Jordan 27:28 Smith go to college so now if I go back 27:33 here inside my AI agent I'm literally 27:35 grabbing that json. body. message which 27:38 again is coming in from right here so 27:40 this is the message that's coming in and 27:42 I'm just putting it right here and just 27:44 saying you're a helpful uh assistant 27:46 your job is to answer CER using get info 27:48 tool get info tool is coming in from 27:50 this left hand side right 27:51 here so now um oh sorry the get info 27:56 tool is our um answer and question with 27:59 Vector store this is the tool that we 28:00 added right so again we're going to add 28:02 our postr chat memory same thing you're 28:04 going to grab the table inside your uh 28:06 super base again so you should make sure 28:08 that you're creating this nadn chat 28:10 table so that way you're connecting that 28:12 um so that's what's happening here so on 28:15 our uh postgress chat we're just 28:17 grabbing that session ID so that way we 28:19 can respond to that message properly and 28:22 then on our answer and question chain so 28:25 this is just we're naming the data uh 28:27 we're naming this answering question 28:29 with the vector store uh um get info and 28:32 we're saying use this tool to retrieve 28:33 information from the vector store very 28:35 very simple so that's why in the system 28:37 message here we said using the get info 28:39 tool right so make sure the two names 28:41 match here so this is reaching out to 28:43 super superbase back to database and 28:46 again as far as the user ID we're 28:48 grabbing the user ID from the web hook 28:50 right because we need to be able to have 28:52 that seamless interaction so this is 28:54 where that user ID is coming from right 28:56 here user ID right right okay sorry 28:59 that's s an ID user ID is right 29:02 here and if you run into you know 29:04 problems you can always just take a 29:06 screenshot put it on chat GPT or cloud 29:09 and you can go back and forth and it'll 29:10 fix those things for you so that's how I 29:12 when I run into an issue I just grab 29:13 that screenshot added to my custom chat 29:16 GP that I created from my community and 29:18 it an architect so that way it gives me 29:21 a bit more uh precise data so that's how 29:24 you can kind of communicate there but 29:25 anyway so once you grab that information 29:27 the output as you can see Jordan Smith 29:28 attend the Community College of San 29:29 Francisco this is sending it back to the 29:31 web hook and you're just grabbing that 29:33 information sending it back out to 29:35 lovable right here and it will respond 29:38 properly so that's exactly what's 29:40 happening here nothing too complicated 29:41 again uh to connect to your super base 29:44 it's very simple you just click on this 29:46 button if you want to watch kind of a 29:48 tutorial um right here this is a good 29:50 one on lovable Channel Isaac I believe 29:53 he did like a really good job of 29:54 explaining how to do this he creates 29:55 like a full stack app as well so make 29:57 sure you watch that because he'll show 29:59 you exactly how to build or connect your 30:01 uh lovable to your super base obviously 30:03 he doesn't have the end and end portion 30:04 but that's why I walk through on the end 30:06 and end step by step so you see exactly 30:08 what's going on here all right well 30:10 hopefully you found this helpful sorry 30:11 if it was not too much step by step 30:13 because otherwise that would have taken 30:14 like 6 hours to create this video but 30:17 again the great thing about um the whole 30:19 point I was trying to portray here is 30:20 that you start here from your chat GPD 30:23 whatever app you want to you want to 30:25 make you want to build and you just go 30:26 back and forth with love if you run into 30:28 any issues if you run into errors it's 30:30 really good at resolving those things 30:32 and then same thing with the web hook 30:33 you tell um lovable to send all the 30:36 information the communication back and 30:38 forth via the web hook and you're 30:39 grabbing this web hook URL from your 30:42 nadn and you're connecting it to your 30:44 super base account anyways I'll be doing 30:45 uh a lot more of these so again if this 30:47 was too complicated I'm planning to do 30:49 more videos especially for my school 30:50 Community to kind of show you how to 30:52 just start uh easy just connecting a web 30:55 Hook from lovable to your AI agent or to 30:58 your workflow so that way you can get 31:00 started but this is a good idea I just 31:01 wanted to Showcase first what's possible 31:04 with this with these tools now so that 31:06 way you can see what you can build and 31:08 then later on we'll go ahead and create 31:10 kind of simpler versions of these so 31:12 that way you know exactly how to connect 31:14 these different tools together to build 31:16 a very powerful application and again 31:18 this is a very simple kind of chat with 31:20 your documentation but you can imagine 31:22 the whole concept that now you can build 31:24 even more power for application because 31:26 you can have super base which is your 31:28 whole like powerful data source 31:31 authentication you can save everything 31:33 there and all the communication can go 31:34 back and forth between your nadn and 31:37 your lovable via a web hook right so you 31:40 can see this could be very powerful and 31:41 you can build a lot of great stuff with 31:43 it anyways thanks for watching this 31:45 video hopefully you found it helpful and 31:47 I will be doing a lot more of these so 31:49 make sure you subscribe and like the 31:51 video because there's a lot of great 31:52 content coming up and again if you were 31:53 serious about learning how to build 31:55 amazing AI agents make sure you join our 31:57 AI Workshop Community because we have a 32:00 great uh set of individuals and people 32:02 who are passionate about learning how to 32:04 utilize naden to make money improve 32:07 their lives improve their businesses and 32:09 much much more I'm going to put the link 32:10 in the description for both this for The 32:12 Lovable make sure you sign up for the 32:14 account and thanks for watching again 32:16 I'll see you on the next one