Build a Free Custom Dashboard for Voice AI - Super Beginner Friendly! Lovable + Vercel

0:00 hello ladies and gents we are now going 0:01 to create a dashboard with absolutely no 0:04 code and it will look something like 0:09 this good filter by bu assistance so 0:13 these will be the ones that you will 0:14 have in retail or Vy you could then 0:16 deploy this to your own clients later on 0:18 creating a custom voice AI dashboard 0:21 zero coding experience is requireed just 0:24 enough curiosity and uh to make 0:27 something cool 0:28 so um the text St that we'll be will be 0:32 using lovable uh one of my most favorite 0:35 platforms at the moment we'll be using 0:36 that to create our uh front and back end 0:39 actually uh and then we'll connect up 0:42 lovable connects up with superbase which 0:44 is the database will hold our call 0:48 details um so you can hold your 0:50 transcript your cost your duration 0:52 whatever else you want in there and then 0:54 Vel that's what we are going to use for 0:57 the ease of deployment so uh it is compl 0:59 complely free nothing here you actually 1:01 have to pay for um so that's probably 1:05 even better uh let's jump into it so uh 1:08 you'll need a lavable account and um I 1:11 am now logged 1:13 in and all you need to do is to come 1:15 into here and just type to it uh using 1:18 using natural language I'll be using uh 1:21 vapy dashboard um and we'll try to 1:24 recreate that using lovable um we'll 1:26 also be using and also pre-prepared a 1:31 table in super base uh so that our um 1:35 lovable agent has the has sort of a more 1:39 context as to what we want to make um so 1:43 we'll have the call ID come through we 1:44 have the duration we have the cost we'll 1:46 have the assistant name and we'll have 1:48 the created app now obviously you could 1:50 add in anything else you'd like in here 1:51 but today that's what we're going with 1:53 so our first step really is to jump into 1:55 uh lovable going to past paste in those 1:58 two um screenshots 2:03 so now I've got the dashboard that I 2:05 showed you and then the table and now we 2:08 just have to type stuff to it let's 2:12 create voice 2:14 AI so let's create a voice a dashboard 2:16 that looks like the one in the picture 2:18 provided here is the rest of my pumpt so 2:22 on the left there is a nafar that has 2:24 the dashboard profile and settings uh 2:26 profile contains D values for person's 2:28 email and time of login 2:30 and let's just say 2:32 um we are not we are not doing a logging 2:39 screen settings contains a toggle for 2:41 dark and light modes for the entire app 2:43 so and we'll see if that takes care of 2:45 it uh the main goal is to display the 2:48 values from a table that will be called 2:49 transcripts now um lovable should then 2:53 create this table for us in super base 2:57 automatically uh this table will be 2:58 created for you by you in super base use 3:01 the picture providers in as inspiration 3:03 for the headings and I've just given it 3:04 here a little bit more um context and 3:07 then I just wrote here enable any pro 3:09 level security and any policies to make 3:11 that work in super base uh for the 3:14 creation and fetching of the 3:16 data and it should be actually I might 3:19 add that 3:20 in it should be um everything should 3:24 look sleek and modern the colors and SL 3:26 theme uh could be a dark with a night 3:29 green to make it more like the super 3:31 base 3:33 color 3:35 all uh a 3:38 filter and I think that is all I'm going 3:41 to type in 3:44 and yeah before you do begin this you do 3:46 need a super base account so uh please 3:50 go create that going to click on enter 3:54 and this this was this is my whole 3:55 prompt here 4:00 as you guys can see there's a super base 4:02 like um set up here so you can click on 4:05 that and you can connect to a 4:10 project and uh the one that we are going 4:12 to connect to is uh 4:18 dashboard and just sit back and watch it 4:21 do its magic it's finished writing its 4:23 code let's see how it's going to look 4:24 like there's nothing actually to view 4:27 anyway let's keep on going and see what 4:29 it comes up up with so it says here 4:31 before we I like to note that we fully 4:34 super integration we actually need to 4:35 connect cool so we come on come up to 4:38 here go here I'm going to go to uh this 4:42 one right here and then just 4:46 connect and it did say build 4:48 unsuccessful so we we'll set this up and 4:51 then we'll go back and fix any errors we 4:53 can enable sign in and stuff but I don't 4:55 want to do that at the moment just want 4:56 to focus on the dashboard for now so 4:58 okay cool let's focus on the cre the 5:00 transcript table and superv and then fix 5:01 any build errors that came up and think 5:03 about the step by 5:06 step ni so now it's creating a new table 5:08 for us using uh 5:10 SQL and enabled uh row level security 5:15 and it's adding some policies in there 5:17 which is 5:18 cool let's do that apply changes when I 5:22 go back into my super Bas and refresh 5:24 that there's now a table in here called 5:26 transcripts whereas before that wasn't 5:28 one it's empty for now that's fine now I 5:31 was just thinking and trying to fix up 5:33 any issues that came up so I just yeah 5:35 got the again let's try and fix it there 5:38 we go that's working now 5:42 awesome so it fixed up something up with 5:45 the something to do with the area chart 5:47 component um oh it's even got an add 5:50 data button here I did not ask it to do 5:53 that but 5:54 cool let got call 5:58 ID what W 6:03 nice 6:10 okay can we actually do that that' be 6:28 awesome how 6:34 work 6:37 man it just made some random stuff that 6:40 I didn't ask it to do that but yeah 6:43 that's that's cool that it actually and 6:44 now comes up as data nice so I just want 6:48 to fix up a couple things here so I 6:50 don't like how the uh calendars come up 6:52 like two of them I like click on the 6:56 numbers and doesn't feel intuitive at 6:59 all and we're also missing like a like a 7:02 reset button here so I might actually 7:04 tell it 7:05 too uh can we also add in any reset 7:10 filters um so we'll do that and 7:14 then currently we have assistance that's 7:17 working that's cool what else can we 7:21 fix oh 7:22 nice it's pretty sweet and's see if this 7:26 works 7:32 didn't want the API access key so let's 7:35 remove that access key locations 7:38 settings area so I'm just telling it 7:40 like what to fix essentially uh another 7:42 thing you can do as well if you not 7:44 don't like the way something's origion 7:45 you can actually click on the edit 7:47 button and then you can hover over the 7:50 div that you want to fix so like in here 7:52 I don't like for example that it says by 7:54 date and the date is uh like a small 7:57 D now I can just change that click on 7:59 Save and now um it's it's just changed 8:02 that for me all right and now I click on 8:04 that and see see what it will 8:08 do so now I should add in the data into 8:12 my super base uh so that I have more 8:15 data to work 8:16 with and yeah we'll go from there so now 8:19 it's just sent through all this data 8:20 into 8:22 here awesome we should be seeing that 8:25 like soon on our dashboard even now yeah 8:28 there we go 8:30 look at that how cool is 8:32 this yo so now this should be one 8:36 calendar nice much better assistance we 8:39 got Ellen see if they change got one 8:41 call for her David with Emma we had six 8:46 calls nice let's go all assistance and 8:49 want this should done reset 8:53 filters wait juice Emma oh nice it works 9:00 dark light oh I would have preferred 9:03 this to be in the profile but 9:11 whatever okay so that still doesn't work 9:14 so it just put it into instead of 9:16 putting in a settings you put in a 9:17 dashboard you can keep togging to it and 9:19 uh you can tell it to move it over into 9:21 the settings or just keep it here but 9:23 for now the idea is that it works I 9:25 think I'm happy with this so um it's a 9:29 extremely good MVP anyway um 9:34 so now what you want to do is push all 9:38 this into your own GitHub account and 9:40 I'll put the link to GitHub below so in 9:41 case you don't have an account all you 9:42 need to do is just log in just create it 9:44 and then come to here and just connect 9:45 them um see so I've already got like my 9:48 GitHub here click the uh create in 9:51 button there we go now now it's actually 9:53 in my GitHub so we just double check 9:57 just going to refresh 9:59 have a 10:00 look there you go chapos 10:06 Navigator and everything is Right Here 10:09 and Now um so lovable doesn't Host this 10:13 for us so to be able to use it on the 10:15 internet we actually need to deploy it 10:16 somewhere um for the ease of deployment 10:19 I love using VL so uh the reason is you 10:25 can directly connect up your GitHub and 10:28 I've already created an account I'm I'm 10:29 in here and if you notice I've actually 10:32 got that automatically come up for me in 10:34 Vel so all I would have to do is click 10:37 on here click on 10:40 import and just click on deploy like 10:44 that's it two 10:47 buttons and now we just got to wait for 10:49 it to 10:54 deploy there you go all 10:56 finished uh continue the dashboard 11:00 and then in the domain you just click on 11:03 uh this link right here and voila and if 11:06 You' like to learn more about how to 11:08 create voice solution systems and how to 11:10 sell these and you're welcome to join us 11:12 in our free school Community we've got a 11:13 whole course there 11:15 dedicated uh is there to take you from 11:17 Zero to Hero and we also offer an elite 11:20 program where 11:23 um well in the past few weeks uh our our 11:26 members there have already closed the 11:28 first client and some of them already 11:30 have up to three uh paid clients already 11:32 done in the first uh s weeks anyway uh 11:36 thank you thank you watching and I'll 11:37 see you guys in the next one