Build an AI App with Any LLM: Lovable + OpenRouter Tutorial

0:01 all right so I wanted to talk through a 0:04 quick app that I made with lovable um 0:07 just to kind of go through some of the 0:08 different things that you can do um and 0:11 a lot of this was kind of surprising to 0:13 me because I think even a couple months 0:15 ago you could do a lot of this so here's 0:17 just a simple landing page um uh I can 0:21 go through a different video of how I 0:22 created kind of these animated uh 0:24 components um but I was pretty happy 0:27 with how those came out um and it takes 0:29 a while to kind of get the right styling 0:33 or design but once you kind of figure 0:35 out um how to how to prompt lovable you 0:38 can get some uh pretty great front end 0:41 designs I would say uh better than 0:43 cursor or some of the other tools I've 0:45 used all right 0:47 so uh this also has user off fully set 0:51 up I can log in with Google uh or just 0:56 a any email so let's just showcase that 1:01 um and basically to set up user off at 1:03 least as far as I'm aware you do have to 1:06 uh integrate with uh super base um so uh 1:10 it's it's not too hard to do um it's 1:13 pretty self-explanatory but you just 1:15 have to create a superbase account and 1:17 connect it uh and I can show you what 1:20 that looks like over here so here's the 1:22 the uh super based project um and Su Bas 1:26 is basically just like a way to kind of 1:28 simplify managing the the back end so 1:31 all your tables will be here which is 1:33 pretty cool um you can manage them you 1:36 can do insertions you can run Uh custom 1:40 SQL queries to make 1:41 changes um and I found it to be I don't 1:45 know I'm I'm definitely not super 1:47 technical and doing things through super 1:49 Bas is is uh has been really easy um uh 1:53 all 1:54 right so I've set up off and again can 1:57 do more videos going into more depth on 1:59 on this stuff the other thing that I've 2:01 sent set up is the ability to um 2:04 basically purchase uh tokens um and I've 2:07 set that up with a stripe 2:09 integration um and that's just via the 2:12 subbase edge function so to connect with 2:15 stripe uh at least I found you need to 2:17 you need a um uh a checkout session Edge 2:21 function and then a web hook to know 2:23 when that checkout session is 2:24 successfully completed um so basically 2:28 the first one will connect you to that 2:30 stripe checkout um to to enable people 2:33 to check out and then you have to you 2:34 know input your uh stripe uh API keys 2:38 and secrets and then the web hook will 2:41 be something that stripe sends to us to 2:43 tell us that someone successfully uh 2:46 checked out so that we know um to give 2:48 them credit for that so in this case the 2:50 the purchase is to to buy tokens so when 2:52 they buy a certain amount of tokens 2:54 there is a function that will tell us 2:56 that they made that purchase um great so 3:00 the other thing to I wanted to show off 3:01 is uh through Edge functions um have 3:05 been able to integrate uh something 3:07 called open router so open router is 3:09 kind of like a central API for as far as 3:11 I can tell all the models that you can 3:14 access via API so these are just four 3:16 that I've chosen but essentially uh you 3:19 can actually just go to the open 3:21 router website um you can pretty much 3:25 integrate with any of the models that 3:27 they have available here um which seem 3:30 to be uh pretty 3:32 extensive um they also have like 3:34 different rankings uh and this was just 3:37 really cool because just one API so I 3:39 can uh show that here so that's the the 3:42 stream uh Edge function um and this they 3:46 also support pretty much all the the 3:49 things that like the open AI API does so 3:52 streaming audio um web search uh I found 3:56 it to be really cool so I can also show 3:58 you what that looks like 4:00 and the 4:02 code we can go over here to 4:05 functions stream chat 4:12 um that's the um method to integrate the 4:16 different models uh the other thing 4:18 which I wanted to Showcase uh using that 4:20 is um the ability to uh run prompts 4:25 against uh a couple different models at 4:28 the same time um so let me just pick a 4:31 good uh one let's see well let's look at 4:34 the prompt Library uh product one 4:38 pager no that's just a placeholder 4:41 another placeholder okay 4:45 um so I'll use something that I actually 4:47 used in one of my other projects we'll 4:49 go here let's do Json converter so I was 4:52 looking for I want to prompt uh for an 4:56 llm that will convert um uh text into a 5:00 Json for something else that I'm working 5:01 on um and I wasn't sure who would create 5:04 the uh best prompt for that so with this 5:08 tool I can actually just select the 5:10 different models I want to test it 5:11 against and it will run the same prompt 5:14 uh across those different selected 5:24 models but something I like to do is 5:26 have uh one 5:30 model evaluate all the responses and 5:33 then help you figure out uh 5:36 which which model is actually doing the 5:39 best job so off screen I'm just copy 5:42 pasting these 5:45 responses now we're going to copy the 5:47 three prompts and 5:51 then I've been finding myself using 5:53 grock for a lot of things I don't know 5:55 why but it just seems pretty 5:56 well-rounded so I'll say here 6:02 are three 6:05 prompts or a 6:09 Json for a text to 6:13 Json 6:15 converter to 6:17 create 6:19 diagram Json 6:23 G pick the best one and explain why 6:30 all right copy paste all that and then 6:32 let's see what grock 6:40 thinks so now it's evaluating the the 6:43 three prompts I haven't told it which 6:45 models uh did which and let's see let's 6:48 see if it has a favorite um so gr chose 6:52 the third promp which was written by 6:56 chat GPT 6:57 4.5 so while it was a slow I have found 7:00 that 4.5 tends to win out in these uh 7:04 prompt evals um so worth considering 7:07 especially if you're thinking about you 7:09 know a prompt that you're going to use 7:11 uh often um 4.5 might be the best model 7:15 but anyways that's a quick overview of 7:16 this tool you can uh chat with different 7:19 models all from one chat um you don't 7:22 have to deal with different 7:23 subscriptions and then you also have the 7:26 prompt studio uh The Prompt creator um 7:30 which is helps you uh have a more 7:32 structured framework for creating promps 7:34 so you have um sort of these basic 7:37 sections which I found to be useful and 7:39 then a prompt library to kind of store 7:41 all your prompts as you're building them 7:43 out uh and then you can also um uh call 7:47 those prompts as a uh variable here 7:50 let's just do this one 7:56 because so you can see how that's 7:58 working but um yeah it took a while to 8:01 kind of figure it out but now that it's 8:03 set up um it's pretty reliable uh and 8:07 it's 8:09 available uh what's the actual URL I 8:11 think it's just available publicly yeah 8:14 prompt withth pair.com um so check it 8:17 out uh definitely still some bugs um 8:20 some issues with like the routing where 8:21 it like defaults back to the chat page 8:23 but um overall yeah pretty fun projects