00:00welcome back in this video we're going to focus a lot more on the prompt that we're going to give
00:12to our ai agent in lovable so when we first started the course our prompt for an app
00:19was fairly very very simple it was develop an app that does x y and z however it's a nice practice
00:31to give much more details to the ai developing the app so it can have a clearer understanding
00:40of the steps that it can follow the more details the better and so here's what we're going to do
00:49we're going to design a new prompt that will have a lot more details compared to what we did
00:59previously and the way we're going to do that is we're going to ask an ai chatbot to do it for us
01:10and so i have a prompt here that i will include in the resources you can download and directly copy
01:18and then we're going to take that prompt and put it in chat gpt or microsoft copilot or cloud or any
01:27other llm model or llm chatbot that you use and you have access to this basically gives or asks
01:38gpt gpt gpt gpt that you are a senior prompt engineer and then you're asking it to develop
01:49a prompt to use with our agent to develop the application and so it has a lot of parameters
01:59that the ai model will be using or will touch on when it develops a lengthy detailed prompt so that is
02:11the requirements of the ai to or the ai chatbot to work on this is the instruction for the ai chatbot and
02:21then below that we can list our application id so for our case i just wrote an application that shows
02:30a random picture of a cat together with a node taking box that i can use to write nodes for my
02:37personal use there should also be a button if i click it it will change the picture of the cat
02:48now to pull those pictures in we have to have a source for them and for this we're going to use
02:58the cat api that we just signed up for and so i'm gonna add to the prompt here that we are using
03:06that particular api i'm gonna say to get the cat images
03:12we will use the cat api now when you're working with apis every api will usually come with
03:29documentation this documentation basically gives instructions of how to use this api and so we're
03:38gonna give those instructions as well just so we can be in the safe side in case our ai agent does not
03:49know what the cat cat api is it does not have any background in it so we're going to go back to the cat
03:56api website and then here on top you're going to have documentation so i'll go ahead and click on it
04:03this will get you this list of documents with many different tabs now we're using ai for everything and
04:13so we don't really need to comprehend any of this however what i'm gonna do is i'm gonna copy the entire
04:22text in our text in the overview and this text has all the information we need to use the api like how to
04:37call it how to use it what are the parameters that you need etc so i copied the entire thing together with
04:45the example and then i'm gonna add them here to my prompt i'm gonna say here
04:58are the documentations for using this api
05:05again we are providing this api information as part of the contest of the prompt to the ai
05:20for big services like open ai or like cloud or like 11 labs there is a good possibility that the ai agent
05:32already know how to use those api and so we don't really need to give it any contest but for the cat api
05:41i'm not really sure so just in case we're gonna do that so now i'm coming to my copilot because that's the
05:51chatbot i use and i will
05:58paste the entire prompt which we have here in the word document
06:08again i'll leave this in the downloads so you can download it and use it directly
06:13and now in my copilot i will send that message and it will write me a prompt
06:24which is the technical blueprint basically okay so it only wrote me three sections
06:31and it says would you like me to continue i'm gonna say yes go ahead and do that
06:36and i think it's it's an okay start so let me just go ahead and copy the entire thing and give it to
06:51lovable so i'll copy the first message go to lovable
06:58all then i'll paste that
07:07and then go back to my copilot and i will copy the
07:15second message
07:18now i thought it can have more details added in and how to use the api
07:22however it's all right we can give this one a shot then adjust from there
07:30now all is good i'll go ahead and push it to lovable and then see what happens
07:41now again we are using the free version of lovable so you don't have to pay anything
07:46just keep in mind if you are using the free version then all your projects are public and so anybody can
07:54access them and use them in the way they see fit
08:08okay so we have something that is popping up okay now we have a version of the application and as
08:24you can see just like we requested we have a picture of a cat and then a box that we can write notes in
08:34i'm going to say this cat is pretty
08:38it says here my notes have been saved to be honest i have no idea where
08:45it's going is it is saved so let me click here
08:51and i'm getting a new picture every time
08:59now i have some questions to be honest one of them is
09:03i did not provide the key to my api and so i'm not sure if it's actually using the cat api for this
09:16so i'm just gonna ask it which service
09:20are you using are you using to generate pictures of the cat
09:34so it is telling me that the api is free and i can see the pictures are
09:52patching new ones every time so again i guess it is working let me add some adjustment to it now i want to
10:00show the breed of the cat with each picture so i'm gonna say can you also
10:13write the breed of the cat
10:16the cat you are showing can you
10:28get this information from the api call
10:36and just in case again i'm gonna give it the documentation for ai for the cat api so i'll go
10:47back here and then i'll copy this one just because it has all the parameters
10:54i'm gonna say here are the documentations
11:09for the api
11:24okay it seems or it's saying that
11:54the breed will be shown if that information is available
12:03now i'm testing the app and i don't really see it so i'm just going to come back to it and i will say
12:10i don't really see any
12:15any information displayed for the breed of the cat
12:28can you display it
12:34on top of the image
12:37i'm just going to ask it if it needs the api key do you need
12:46the api key
12:49to access this information
12:55and it's saying that it does not need an api key
12:59as this is already included and the call they have without an api key
13:06and it still doesn't show so let me go ahead and do something different i'm just going to give it
13:12the api key
13:20then i will say use it
13:24use the following api key to extract the information about
13:35the breed of the breed of each cat
13:43and display that information above the picture
13:53here is my api key
13:57so now that updated to where we have the name of the breed
14:21and that of course happened because we ended up giving it to the api key because
14:26that information is linked to the api key now from this experiment we kind of seen
14:33that sometimes this ai agent is kind of weird it would assume things that are not
14:41realistic or that are not real just like now it thought that it can get the information about the
14:50breed of the cat
14:53without the api key but that was not the case and it kept telling us that it can but there was no result
15:00displayed until we provided the api key to it and this is something that we always do with
15:09troubleshooting luckily though we are not looking into the code ourselves we can simply
15:15ask and chat and vibe with the ai until we resolve the issue so this is good so far what i want to do is
15:26i want to display this on top of the picture out of the frame so i'm gonna say have the
15:33read shown in writing above the frame of the picture
15:50and with that we have reached our limit for the free account
15:56the free account but at least we got something that is working now we are using external services
16:06like the cat api to be integrated into our application which is a very big upgrade compared
16:19to what we did last time and so we're gonna stop here for this video and next video we're gonna come
16:25back and continue working on this application that's it for this video and the next one we will do
16:33something else with vibe coding see you then
Comments