4 -Getting a Good Prompt and Building the First App Version

TECH VIDEOS

🎬 Cat-Inspired Note-Taking App – Part 4: Getting a Good Prompt & Building the First Version 🐾 Series: Your Fun Web App Journey | 🌐 Platform: Replit + AI Prompting ⏳ Duration: 8–12 minutes | 💻 Language: HTML, CSS, JS + AI Tools  📖 Description: Let’s turn your idea into code—with the help of AI! 🧠🐱 In this episode, we’ll explore how to write a clear and creative prompt to generate helpful code using an AI assistant (like Replit’s Ghostwriter or ChatGPT). Then, we’ll use that prompt to build the first working version of your cat-themed note-taking app.  🛠️ What You’ll Learn: How to craft a good coding prompt for an AI assistant  Using the prompt to generate HTML, CSS, and JS structure  Pasting and editing the AI code inside Replit  Testing the first working version of the app!  📋 Prompt Example Used:  “Build a cat-themed note-taking app with a text box, save button, and cute random cat image from an API.”  🎯 Perfect For:  Beginners using AI tools for development  Creative coders learning how to start smart  Anyone curious about combining design + functionality fast  🎞️ Watch now and bring your app to life with just one great prompt!

Transcript

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

Category

Transcript

Be the first to comment

Recommended