Transcription
Today, I'll show you how to create crazy AI apps with GPT5. This is a step-by-step tutorial, and by the end of this video, you'll have a fully functional web app coded entirely with AI and for free. So, let's get into it.
If you've seen my content on social media right after GPT dropped, I built two cool apps in 24 hours, one of which went viral. So, take a look here. I just built an app with GBT5 that can literally select the healthiest meals for me. And here's my favorite part. I built an app with GBT5 that tells you the real costs of things that you buy. I just built an app with the GPT5 that scores products on how healthy they are in under 20 minutes.
Today, we're going to be doing just that. I want to build an app that allows me to take a picture of a restaurant menu and is going to tell me the healthiest options I can order along with the total price. I struggle with ordering and and making simple decisions like this because to be honest with you, I'm not picky with food or or anything else in life. If there's too many options, you lose me and I'll let you decide. In this case, going to be the waiter. I'll just tell him, "Hey, just surprise me. I cannot think." So, that's why I'm building this app. It's for myself. And I also want the app to read the results out loud to me and then justify why I should try those recommendations. So, this app would definitely help me out when I go order in a restaurant.
Now, let's do it. Open Chat GPT and literally type in what you want to build. So, I'm going to say, "Build an app that allows me to take a picture of a menu with a real-time camera access that identifies the healthiest options available and provides a total price. The user should be able to take a photo of the menu, have GBT5 analyze it, and select the healthiest options or pairings. It should also estimate calories, provide macro breakdowns, and calculate the total cost of the bill. Implement OpenAI TTS which is text-to-speech APIs in real time after generation so he can give me more context about the order and recommendation."
So this is my prompt. Right then I'm going to ask GBT to rewrite that as a better prompt for an AI agent that specializes in building apps. So I'm going to add something at the start of the prompt that I wrote. I'm gonna say, "Write the following idea, but better for an AI agent that specializes in building apps with GPT5." So, what we're doing right now is that we're adding this little paragraph right before what we just described. And hit enter. This is what you will get. Take a look at this. Looks pretty good to me. This has way better structure. So, now we're going to copy this prompt. And we are ready to build our app. We have the prompt ready.
Now, we're going to make sure to add in the end, "please build it in the canvas here." This is crucial. We need to add this. This way, GPT knows you want to use the sandbox to get a simple demo overview instead of having a step-by-step explanation of how to build it yourself, right? Sometimes it would do that. So, make sure that you add "please build it in the canvas" at the very end of your prompt. Cool. So, this is what our prompt looks like. Now, we're going to hit enter and the agent will do its thing.
Now, let's be clear here. You will get a simple demo from GPT5. It's not going to be fully functional because the sandbox lacks a lot of capabilities, dependencies that you would need to install. Don't worry about this because we'll go over how to fix it step by step. It's still generating the code. This looks pretty good. We're just going to wait for about 2 to 3 minutes here.
Cool. So, now that the code is done generating, we are going to run it, right? So, there's this little button over here. It's called "run code." We're going to click on it and the sandbox will start initializing. Yo, this is what you get. So, you have the camera settings over here. You have the recommendations, you have the estimated bill, you have the menu items. Let's click on this. As you can see, it doesn't really let you open the camera or upload anything because those features are not supported here. As I said, this the sandbox lacks a lot of this capabilities. It's just a mock template for you for the purpose of this app. But I got you.
So now, what we're going to do to make this all functional, the entire idea here is that we don't just have a pretty front end. We need this to be functional so that I can go and order. We're going to download the project by clicking the download button on the top right corner over here. Download it. And we're going to open it inside cursor. Let's locate the file. Here's our downloaded file. Ends with GSX. We're going to right-click and open it with cursor, which if you do not know is another AI-powered coding app.
So, this is what we get. Now, you'll see this scary interface with all these variables, numbers, text, and oh my god, it's not that bad. It's not that bad once you start using it, right? So, this is our canvas. This is where where the code that we downloaded from chat GBT lives. In the right-hand corner, you'll see a button that's called "AI panel." Okay? So, we're going to click that and it will open a chat box for you just like chat GPT. We're going to make sure that we select "agent mode" over here because we want our agent to start coding. And in this little button right here, we're going to select our agent. I usually leave this as auto, but you can select it between different LLMs. This is not a cursor tutorial. I'll probably do a lengthier video on how to use cursor, but for now, this is what we got.
We will run this command. We're going to say, "Read the code and build it as a project locally as a React Native web app." Okay, so this is what we're typing over here. Very simple. Literally, you just write whatever I'm writing. We're going to hit enter. And what's going to happen now is that cursor, which has access to your files in your local environment, will create a folder with all the important files or documents to make your code functional. So let's see what it's doing right now. As you're seeing, it is creating folders in real time with different modules, JSON files, index file, different components, a readme, etc. Right? We have to accept and confirm all the edits that cursor is making to our original code. And not only that, but it's adding more files. This is why we brought things to cursor because GBT cannot currently do that.
So, as I'm accepting and confirming all the edits, which I literally have no clue what exactly I'm confirming. I'm just trusting AI. I know that I'm confirming these things. But this is why it feels a bit uh terrifying or a bit scary to me because if you do not know coding, you literally have no clue what the AI is doing for you. You can do malicious things. Literally, you don't know. You're just saying, "Yes, cool. This looks good." But hey, look, I'm here for the long run.
Once everything is done, I'll ask cursor to run the server continuously. So, this is going to be my prompt. Copy-paste what I'm doing. And right now, what cursor will do is that we'll open the folder that we just created in in our local server. Um, and we'll run it so that we can play with the code and we can actually view what the code and the app looks like in our local environment. It's going to give us a link. We're going to copy this link. We're going to paste it in our browser. It can be Safari. It can be Chrome. Really anything. It doesn't matter. We're just going to hit enter. And this is what we get. Here we have it. This is our app. This is what it looks like. This is what the code, this is what all the files that cursor put together. This is what Chad GPT gave us initially coming to life in real time.
So, let's test it and see if we can upload or access the camera right now because before we could not. Okay. So, we're going to open the camera. It's going to start the camera. It's going to pull the Oh, cool. So, the camera is working, different from GPT that it didn't. Now, we can either stop the camera. We can capture a picture of us. Great. It works. You can upload any image. In this case, I'm going to upload an image of a menu. I'm going to click "analyze menu." Oh, as you see right now, nothing happens. There's an error that comes up over here. And that's because we need to implement our OpenAI API keys, right? We haven't implemented those. So, if we want AI to analyze whatever is inside our menu, of course, we need to link it to an API.
We're going to head over to platform.openai.com and click on dashboard. Go to API keys. Click "create a new secret key" and give it a name. I'm just going to say here "healthy menu" so that I remember what I'm using this for. I'm going to set permissions to all. And I'm going to press "create secret key." Copy this and paste it into your notes because you will never be able to see it again. Uh, if you lose it, you'll have to create a new one.
And now after copying it, we're going to go back to cursor and ask it to copy this prompt: "place my OpenAI API key in a save .env file and make sure that you connect the logic of this application to this key." We're going to hit enter and cursor will add your OpenAI key to the API request for the image analysis. Here's how it works. Once you upload an image, GPT5 will analyze it using your API key, right? And it will return the results. These results will be displayed in in a simple UI in the app. It's essentially it's it's the same thing as going into chat GBT, taking a picture of it, and prompting it to say, "Hey, analyze this menu and tell me what to get." And all those prompts are actually set up in the back end of our code. This is the actual prompt that every image goes through. Every time that you upload an image, it goes through this request and the results are rendered in the UI. It's literally chat GBT, but now you've productized it and you've made it use-case specific. And if you're wondering, hey, who wrote this prompt? Because sir, I didn't see you write this at all. It was the AI agent when you created your very first line of code with GPT in the beginning. Then after cursor optimized it because it understood your project better.
So after cursor has your API key, you should be able to run the app successfully locally. So let's try right now. I'll just go Google and search for um a random picture of of a menu. Okay, I like this. It's clear. I'm going to download the file. And we want to make sure that the file is not huge because the request then is going to time out.
We're going to head back to the app. And in here, we're going to select how hungry we are. Depending on how hungry we are, the app is designed to give you different calorie intakes. I'm just going to say that I'm extremely hungry. So, let's see what it's going to suggest for us. We're going to hit "analyze" and wait a bit. It's going to take about 1 to 2 minutes. And right now, this is going through GPT5. That's why we have our API, right? And boom. This is what it came up with. It's pretty impressive. It's giving me four different recommendations. It's giving me my cost and nutrition summary over here, dietary information, and it's also assuming all the calories because the calories are nowhere to be found in the actual menu. It's telling me why exactly this choice. And also, we can hear our recommendations because we asked it to come up with a feature like that. So, let's see what it says.
"All right, let me walk you through what we've got today. If you're after something filling but still on the healthier side, the grilled chicken sandwich is a great pick. 500 calories, loaded with lean protein from chicken, plus fresh lettuce and tomato. It's satisfying without being too heavy. Want something fresh and full of flavor? Go for the Greek salad. 300 calories."
But right now, we have access to this thing locally in our computer. No one can access this app except of us. How do we deploy this? How can I have it on my phone like this?
Let's go to netlify.com. Create a new account or sign in if you already have one. Netlify allows you to deploy your project to the internet with very simple steps. Here's what my dashboard looks like. Here are all my fun projects that I've currently deployed. And once you're logged in or once you created your account, we'll have to go back to cursor with your current project open, right? And we're going to type in this prompt: "deploy this project to Netlify via the CLI method." When I say CLI method, what what do I mean? I'm talking about command line interface. Basically means you're going to type commands into a terminal instead of clicking around into a website and figuring all those things out by yourself.
Now, with Netlify CLI, you can connect your project directly from your computer to Netlify servers. You can run one command, which in this case is going to be a prompt like this one, and have your app live online without having to do anything. It is faster. It gives you way more control compared to manually uploading all the files through your browser. Think of it as as telling your computer, "Hey, send all these project files that I currently have right now straight to the Netlify app and make them live on the internet right now without me having to do anything." That's it. Simple, easy.
So what's going to happen is that it will install CLI globally and once the installation is complete, it will start deploying your project to Netlify without you having to do literally anything. Usually, in order for you to deploy a project to Netlify, you have to connect to GitHub or you can drag and drop in your folders. More often than not, it's not successful. What's happening right now is that cursor is asking us to select a team, which in this case basically is the account that we just created. And you'll see your team name highlighted in blue. Mine is called VR. We're going to hit enter. Cool.
Now, next, it's going to ask us to name our project. What do we want to name this? You can type in, let's say, I'm going to call mine "health menu analyzer," or you can leave it blank, and it's going to give it a random name. Now, what's going to happen is that Netlify will create the project for you. And if everything goes smoothly, it will give you a unique link where your app is going to be live. Okay, good. So, it's currently deploying for us.
While we wait, I want to show you another app that I've built with AI 3 months ago. It's called Enhance Your AI and is your go-to place for AI images. If you are a producer or a creative that is looking for high-quality visuals, you can fix AI skin. You can generate extremely consistent and realistic characters. You can generate hyperrealistic images of people. You can create surreal storytelling, the highest fidelity videos, crazy typography work. You can edit and upscale your images into another level. This is made for professionals who want to use AI to augment their workflows. And I, yes, did build this myself with zero dollars in the bank, zero funding, no VC, nothing whatsoever. All is AI vibe coded and is currently helping thousands of creators with their content production because it is built by someone like you for you. I understand your pain points. So I'm trying to build the go-to platform. Very high-quality production-ready AI content. It's called Enhancer AI. Check it out. Your support means a lot to me.
And here it is. This is our unique URL. We're going to copy this and paste this into our browser. Paste the link. Boom. The app is online. It's no longer in your local computer. Everyone can access it using this public link. Very interesting. If you go into your Netlify account in your dashboard, you're going to see your newly created page project that is deployed with the name that you gave it. You can click on the project name and you will see the URL there too. So, you can copy that. If you forget your URL, you can copy that and start using your app. You can enter that URL into your phone, your iPad, anywhere, and the app will load right up.
Let's test it in my computer one last time. I'm going to upload a random menu. Click "analyze." Boom. It's done. Right. So, let's head out, scan a few menus around town, and see if this works.
If you hate ordering, I just built an app with GBT5 that can literally select the healthiest meals for me. And here's my favorite part. It lets me adjust my hunger levels. I'm physically incapable of ordering food with so many menu options. So, I built an AI app that scans the menu, analyzes it, and recommends me three combo healthy meals. And because I'm nothing if not a nerd for metrics, it also calculates the total cost, the calories, and well, dietary information. I made this for my ordering anxiety. And GPT just picked my dinner and I didn't overthink once.
And here my friend is exactly how I create AI apps in under 20 minutes with the help of GPT and cursor. Thank you for being here. Thank you for spending your time. And do let me know. Give me the links to your projects right in the comments. I want to see what you built today. Check out my app that I linked in the description. Your support means a lot to me and I hope that you learned something new today. But also remember the real magic of AI is not what it can do for you, but how it empowers you to do what you've always wanted to create without limits. This is Serio.