🎬 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!
🐾 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!
Category
🤖
TechTranscript
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