How to Add AI Automations to Your Lovable Apps (in 7 minutes)

0:00 I'm going to show you how you can add AI 0:01 automations to your lovable apps using 0:03 zapier so if we dive into our lovable 0:06 here you can see we have this awesome 0:07 looking landing page and website here I 0:09 actually used 21st. deev in lovable to 0:12 build this out you can see this header 0:13 up here with the robot that was copied 0:15 from 21st. Dev which allows you to build 0:17 really awesome user interfaces within 0:19 lovable this is going to be a great hack 0:21 for you if you haven't already seen it 0:22 yet so let's take a look if you come 0:24 over to 21st. Dev you're going to see 0:26 it's basically a library of user 0:28 interface components you can see there 0:30 are a whole bunch of different 0:31 components here that we could go ahead 0:33 and paste into our lovable apps this top 0:35 one right here is the one that we 0:36 actually used and as you can see this is 0:38 our little robot guy that follows our 0:40 cursor around it looks really cool and 0:42 smooth so all we need to do is come up 0:44 to the right hand side click on copy 0:46 prompt and we could optimize this prompt 0:49 for lovable go ahead and copy that and 0:50 it's going to essentially take this code 0:52 and convert it into a text prompt that 0:54 we could then take over to lovable paste 0:55 that into our chat here and it's going 0:57 to begin writing this code and you will 0:58 get a similar output like the one that 1:00 we have for our website now that we got 1:02 that sorted and you understand that hack 1:03 what I need to do now is come down and 1:05 add a signup form for our newsletter 1:08 this is where we're going to add the 1:09 backend AI automation using zapier so 1:11 I'm just going to prompt in here I want 1:12 to connect lovable and zapier together 1:14 add a newsletter to the website above I 1:16 want the footer to use a design that 1:18 complement the theme of the website 1:20 capture the name and the email addresses 1:22 and I'm going to send that off to 1:23 lovable basically what I'm going to do 1:25 is add an automation so when somebody 1:27 fills out a form on our website this 1:28 will trigger a web hook on zappier and 1:31 then we can create an automation we want 1:33 from the back end of that if that sounds 1:35 complicated believe me I'm going to show 1:37 you exactly how to do it really simply 1:38 in this video so it's beginning to write 1:40 this code here which is awesome let's 1:41 give this a second all right so it went 1:43 ahead and since I mentioned we wanted to 1:45 integrate zapier it actually gave us 1:47 some instructions here so it's basically 1:49 saying we need to create a zap in zapier 1:51 with a web hook trigger once we have the 1:53 web hook URL we need to replace the web 1:55 hook URL in the newsletter signup 1:57 component with our actual zapier webook 2:00 URL so it wrote that code we just need 2:02 to now configure this inside of zapier 2:04 all right so now I'm coming over to 2:06 zapier and I'm going to come over to the 2:07 leftand side and click on create zap 2:09 once we're here we're going to click on 2:11 trigger and we want to come up to the 2:13 right hand side where it says web hooks 2:15 from here we want to make a trigger 2:17 event called catch hook and let's now 2:19 move on to the configure Tab and just 2:21 click continue next up we're going to be 2:23 given a URL from zapier this is our web 2:25 hook URL we want to copy this and make 2:28 sure not to test the trigger yet however 2:29 we're going to come over to lovable to 2:31 implement this web hook URL and then 2:32 paste it here next up we're going to 2:34 come over to the next step in our zap 2:36 that is going to be open AI we want to 2:38 make sure to trigger the chat PT app and 2:40 for the action event we're going to 2:41 click on conversation and hit continue 2:44 after you actually add your chat PT 2:46 account so go ahead and do that if you 2:48 haven't already next up we're going to 2:49 be prompted with the user message as 2:51 well as the model picker and for this 2:53 instance we're just going to be leaving 2:54 this at chipt 40 mini so I'm basically 2:57 going to come in here and paste in the 2:59 prompt that we made and it basically 3:01 says craft a personalized thank you 3:02 email tailored to a user who just signed 3:04 up incorporating their name for a 3:06 personal touch highlight details about 3:08 the new uploads and Innovative AI 3:11 Integrations I'm not going to go over 3:12 all of that but we're basically giving 3:14 our AI agent context of what we want it 3:17 to actually say in the emails and then 3:18 it'll use AI to configure that with our 3:20 prompt so the next thing on our list is 3:22 we need to come back to our app and we 3:24 need to submit this form here let's just 3:26 go ahead and add our name and email and 3:28 see if this is working let's click on 3:30 subscribe and now it should have sent a 3:32 web hook with this information to zapier 3:33 if you don't know what a web Hook is 3:35 it's essentially sending that 3:36 information from one application to 3:37 another and then we could do as we wish 3:39 with this information let's come back to 3:41 our initial web hooks by zap your step 3:43 and let's click on test trigger and you 3:45 can see a request a if we click on it 3:47 now this contains information with the 3:49 custom field of our name and our email 3:52 let's go ahead and continue with that 3:53 record and now we just need to map the 3:55 fields that were captured via this web 3:56 hook so for the name we could come over 3:59 here click on the name we could add the 4:01 email so now it's going to have this 4:02 context in order to send a personalized 4:04 email to our user next up all we have to 4:06 do is click on test inside of the chachu 4:08 VT step and we want to click on data out 4:11 if we scroll down you can see the user 4:12 request message which is the prompt that 4:14 we put in but if we scroll down a little 4:16 bit more we're going to see the reply 4:18 that it gave us so it basically says 4:20 Dear Brock thank you for signing up and 4:22 joining our community we are thrilled to 4:23 have you on board basically it's 4:25 creating a personalized Outreach email 4:27 to them based on the information they 4:29 provided in our form obviously we could 4:31 dial this prompt in as much as we want 4:33 however for this I'm just going to show 4:34 you how it works and we're going to move 4:36 on to sending the actual email so now 4:38 that we got that set up we're going to 4:39 come over and add another action here 4:41 which is going to be sending an email so 4:43 click on ADD Next Step click on Gmail 4:46 and make sure you sign up with your 4:47 Gmail account and we're going to make 4:49 the action event send email so once 4:51 we're inside of our send email action we 4:53 need to configure it and we're going to 4:55 make sure to add the email as the email 4:57 we captured in the web hook step so you 4:59 can see we have ai generalist at gmail 5:01 as well as we're going to add a from 5:04 email address as well in order to send 5:06 the email obviously and then we could 5:08 click whatever we want and add whatever 5:10 we want for the subject of this email 5:12 and then we need to make sure to add the 5:13 body of this email as well this is what 5:15 the actual content is going to be we 5:16 need to map the reply field here this is 5:19 going to be the message that chat BT 5:21 actually gave us and I'm just going to 5:22 add a simple subject line of thank you 5:24 email I'm going to select the from email 5:26 that we want to send this from and let's 5:28 go ahead and test this we should now be 5:31 sending an email here we go checking my 5:33 inbox you can see we have a personalized 5:35 email here so this now shows that our 5:36 zap and our AI automation is actually 5:39 working on the back end of lovable all 5:41 right we're going to go ahead and 5:42 actually add a couple more steps to our 5:44 automation here just to show you the 5:45 capabilities of integrating with zapier 5:47 I'm going to come down to next step and 5:49 we're going to add Google Sheets so 5:51 we're going to essentially store all of 5:52 our new leads into a Google sheet first 5:55 of all for the action event we want to 5:56 click create spreadsheet row and then we 5:58 need to connect our Google gole drive as 6:00 well as the exact spreadsheet that we're 6:01 trying to populate next up we need to 6:03 click on the sheet so worksheet number 6:06 one for me and you can see I created 6:07 this lovable automation Google 6:09 spreadsheet with a name and email field 6:11 where we will actually populate this 6:13 with the information captured from our 6:15 web hook step so we're going to come 6:16 over to Step One and we're going to map 6:18 the name field which is my name Brock 6:20 messerich in this case and for the email 6:23 we're going to do the exact same thing 6:25 next up we actually need to test this 6:27 and this should now populate onto our 6:28 Google spreadsheet you can see we now 6:31 added the name and the email here so 6:32 whenever somebody fills out this form on 6:34 our lovable app it's going to not only 6:36 send them an AI generated email but it's 6:38 also going to add it to a Google 6:40 spreadsheet next up what we're going to 6:41 do is come over to slack and I'm going 6:43 to create a new event and the action 6:45 event is going to be send Channel 6:47 message so that way we could notify our 6:49 team that a new lead has actually filled 6:51 out a form next up let's make sure to 6:52 add the channel that we want to send 6:54 this message to I'm going to go ahead 6:56 and write in a message text here and 6:58 it's basically going to say a new user 7:00 filled out a form and then I'm going to 7:01 put name as well as email again we need 7:04 to map these fields from the first step 7:06 here which is the name in the email 7:08 field from the web hook all right so 7:10 that should be good to go now and let's 7:12 go ahead and test this step next up we 7:14 should be receiving a message in the 7:15 slack Channel with this information and 7:17 there we go you can see a new user 7:19 filled out a form with a name and email 7:21 address right there this is just a 7:23 little automation that we can add to our 7:25 lovable app however we could get much 7:27 more complex with this using 7 thousand 7:29 of the different applications that 7:31 zapier actually ties into if you guys 7:33 got some value from this make sure to 7:34 subscribe to this channel I cover all 7:36 things AI for non techies I love 7:37 covering platforms like lovable building 7:39 cool applications with it and showcasing 7:41 it to you guys with that being said 7:42 thank you guys so much I'll see you guys 7:44 in the next one