How To Build an App with AI Making $200K/Month Instantly

Mansoor Codes· 13 min· 2,752 words· 13 min read· English ·Watch on YouTube

This is the full transcript of How To Build an App with AI Making $200K/Month Instantly, published on YouTube by Mansoor Codes. Every paragraph carries the moment it was spoken, so you can click any line to jump straight to that point in the video, search the whole thing for a word, or copy it out.

0:00This iOS app made $200,000 last month, but is it possible to rebuild it completely using AI? Hi, my name is Mansour and I've been building apps for more than 10 years. And I'm going to answer this question today with only AI. So, let's do it. Let's do everything step by step and recreate this app completely using AI. The first thing you want is to create a brand new Xcode project using Swift UI. And then you want to make sure to go inside your terminal and have Codex installed. If you don't have Codex installed, then just go on the internet and find how to install it. Then navigate inside your

0:33new project and just write codeex. Want to allow it? Yes, we're going to allow this directory. Now over here, something that's super important. We have to initialize codeex to work the best it can. And it's telling us over here that we have to create the agents.md file so we can let CEX know how to code and build the app. So I'm going to actually use codeex itself to create the agents.md file. So let's write something like this. Create me the agents.mmd file. Write that you're a senior iOS software engineer that create apps. You write good code that uses the latest

1:02tools, SDKs, and frameworks available. You build and design simple and powerful pages. You are good at UX and code. Now, let's send this. Great. Our agents.mmd file was created. And we can see a couple of rules over here. We're seeing that over here it's saying about me. It's talking about itself. It's a senior iOS software engineer building production grade apps. and it's good at UX and code. So now that we have that, we want to build our iOS app. In our case, we want to build a logo maker. So

1:30what we can do, we can have two pages. One page to describe your logo and the second page to see the actual logo that the AI generated for us. So before we go into the implementation details, let's make the AI focus on what we just said. Let's make it build only the two pages without any logic. Let's make it focus on the user interaction and the design for now. And later we can add all the AI implementation and all the super important logic. So this is what you can write. Focus only on the UX for now and navigation logic comes later. Build me a

2:01two-page app that creates a logo for me. The first page is the page where the user writes their prompt for the logo. The second page is the result page of the image generation from the prompt. Do not implement anything else outside of what I just said. Focus only on the UX. Let's send this prompt. It looks like Codeex finished its work. But if I look at Xcode over here, I see a couple of errors. Let's try to fix them. Let's take a screenshot and then just send it to codec. And here it is. Here's a screenshot. Let's send it. All right, Codex finished fixing the errors. And

2:31now we can see the logo maker inside our Xcode preview. Let's try to run it inside our iOS simulator. So I'm going to select iPhone 17 Pro and then click run. So here is our app inside the iOS simulator. And over here we can write our prompt over here for the logo. Let's try something like I don't know, soccer. and then click on one of the styles over

2:50here. Can I click on them? Doesn't work. But if I click create logo, what happens? Okay, it navigates to the result page. That is what we want. That's good. Okay, so now let's go and add the AI implementation for this. And for that, you can use services like Gemini or OpenAI directly by calling their APIs. But I found out that if you want to ever change the model, then it's really hard because you have to change the entire code. For example, if you're creating your images with OpenAI and then you want to use Google Gemini, then you have to change all your code to use the Google Gemini code. And vice versa,

3:19if you're using Google Gemini and then you want to change it to OpenAI, then again, you have to change the entire code. So, for that reason, I like to use Open Router. So, if you go into Open Router.ai, you want to make sure to create an account and then add credits inside your account. Over here, as you can see, I have $4.52 left. You can add credits. I think the minimum is $5. So, make sure to add some credits. And then over here on the search bar you can search for image models. So if you write image and then you can see OpenI GPT5 image mini OpenI GPD5 image and then

3:49over here we have the Google Gemini models which is Gemini 2.5 flash image essentially nano banana. Let's start with Google Gemini and then we can definitely switch to OpenAI when needed. So click the first option for Nano Banana and then over here you can see all the information for this specific model. how much it costs for the inputs, the outputs, and what we really care about, the cost per image, which is about three cents per image. So, with

4:12$5, you could create a lot of images. So, this is not really a worry over here. Cool. So, now that we have our Gemini model opened in this tab, let's open a new tab. Let's write open router, create image, and then click the first link inside Google. And over here, it's giving you the example on how to call this API. If you go inside the basic image generation section and if you click on TypeScript fetch then you can see how this API is being called. So you don't really have to worry about the implementation detail over here. But what you need to do is to click the copy

4:41button over here and then open your terminal back again on codeex. And this is what you want to say. Add the image generation service from open router and use the model. And then let's go back on our first tab and then copy the model by clicking this button over here and then sending it into codeex. And then what you can say is here is an example to call the API. And then you want to go back into your second tab, copy to clipboard, and then go back into terminal and then send this entire example. And then all that is left is to send this prompt to codec. So now Codex

5:17will start putting all the AI magic inside our application. All right, cool. Looks like Chad GPD Codex added a lot of code and create a lot of new files, but we don't have to worry about this. Over here, it's saying that we have to get our open router API key and then set it inside the application. So, let's go back inside open router and then over here, you want to click on your profile and then click keys and then click this create API key button and then you can name the key. In this example, I'm just going to name it logo maker. And over here, you have the

5:47credit limit option. So, if you want to limit this API key to, let's say, only $1. And then you can't use the API key anymore, then you could write this number over here. But in my case, I don't need this and I don't need any expiration or anything else. I could just click this create button over here. And then it gives you this API key. So, you want to copy it and then just follow the instructions over here. So, it's saying that you could either set it as an environment variable inside Xcode or replace the initializer inside open router client. So, let's just go inside the code and find that open router

6:18client. So, here it is, the open router client. And as I can see, it's looking at the environment variables inside Xcode, but we don't really have to worry about that. So, let's just delete this and just add this directly inside our code. So, this is definitely not the safest thing to do. There's bunch of ways to protect your API key, but it is outside the scope of this video. So, for now, I just hardcoded inside the application. We just want to test out this app that we're creating to see if things are working. So now that we have the API key, let's click run and see if

6:46things are working. Okay, things are not working. I have an error over here. It's saying that result view does not conform to the protocol servable object. Let's just take a screenshot of this entire section over here and then send it. So this was a quick fix from codeex. Now let's go back inside Xcode. Let's try to

7:04run the project again. Build succeeded. Okay, now let's see the app inside simulator. Let's try something. Let's try soccer again. Now let's click create logo. Generating logo. No image returned from this prompt. Let's try regenerating one more time. Okay, great. So we got an image, but it's definitely not a logo. So in this case, I think what we need to do is to change the prompt that is sending to the AI model. So let's go back inside codeex and say great, I can generate an image, but it's not generating logos. It's just generating any image. change the prompt to the AI model to generate only logos. Now I sent

7:46this prompt and hopefully we can have a working app on the next prompt. All right, nice codex finished. Now let's go back inside the application. Oh, actually we have to run it back again. So I'm going to run the app so that our new code can take effect. Let's write the same thing. Let's write soccer and

8:02then click create logo. Generating logo. Okay, nice. So now we actually see a logo for the prompt that we just wrote. So we see a logo of soccer. I guess it's like a soccer team or a soccer club or anything, but it definitely looks like a logo. So let's try something else. Let's try basket ball. Can we get a nice logo for the prompt basketball? Nice. So we

8:24got this fiery looking logo over here. Fireball hoop. And we have some fire behind it. Okay, cool. So in just a couple of prompts, we got our AI logo maker to work. Now, the next thing we can do is to try to fix this quick styles over here. It looks like these are buttons, but we can't really click them. So, it'd be super nice to be able to have these styles be applied to our prompt over here. So, let's go back inside codeex and ask for that. This is what you can write. Fix the quick style section. They cannot be selected, make them selectable, and add them to the

8:54prompt for the desired style for the logo. So, let's send this prompt. All right, cool. So, it looks like Codex just finished. Now, let's go back inside our application. Let's run it. Now inside the simulator, let's test out the quick styles. Can I select them? Yes, these can be selected. So now let's try creating a logo without one of these quick styles over here. So if I unselect this and then just write soccer. So we're going to get a basic logo for

9:18soccer over here. Okay, so here it is. Yeah, it looks pretty basic. So now let's go back. So with the same prompt over here, let's select one of these logos over here. Let's select gradient glow. What will we get with gradient glow? So, we have soccer and the quick styles gradient and glow. Now, let's click create logo. And now, I'm expecting to get a logo that's glowing

9:38with gradient colors. So, let's see. Yeah. Okay. So, the styles are definitely being applied over here. Nice. So, now let's go back and select something else. Let's say maybe retro. Let's create logo. Okay. So, this is really awesome. We got this really old looking type of logo as if it was on a very old soccer shirt from 1970. Nice. So our app is working really nice and just a couple of problems. Now the next thing we can do is to be able to save these images that we created with the AI. So right now as you can see it's generating the logo and we got the logo

10:11over here. We could regenerate over here but the save button is not actually enabled and we can't really save these images because we never actually told the AI to implement that. So let's go and ask codeex to do that. So this is the prompt really quick and fast enable saving the images on the result page. That's it. Let's send this prompt. All right, it looks like Codex implemented the save functionality. Now, all we have to do is to click the run button back again inside Xcode and see the application inside our simulator. Okay, so this is the page we're used to back

10:40again. So, let's write something else. Let's write swimming. I'm pretty boring with my examples. Let's try playful mascot over here for the quick styles and then click create logo. Now, it's generating the logo. Nice. So, we have a really nice mascot for our swimming club over here. And if we click the save button over here, will it work? No. Our app just crashed. But I think I know the reason why. So, over here, it's saying that we don't have the required information inside P list when we're using the photo library. Okay. So, essentially, it's saying that we have to go inside info list and then add the

11:17permission to use the photo library on the iPhone. So, you want to click the blue icon over here for your project. Then click on info. I know it's very small to see. And then you want to go inside the first section over here. Custom iOS target properties and go on the last item over here. Just click the plus button over here and just copy paste this photo library. Add uses description key. You want to paste this in. And then over here on the right section, you just want to add the reason why you need this permission. So in our case, it would be to save the generated

11:49images. Okay. Now that we have our photo library permission inside info.p. What we can do now is to run our application and then hopefully now everything should be working. Let's try our swimming back. You know what? Let's try something else. Let's try volleyball. Volleyball. And then let's try another one. Let's try bold and geometric. And then click create logo. So we are getting the generating logo. Okay, we got the logo over here and it's pretty bold and geometric. And now if we click the save

12:23button over here, will it work? Hopefully it will. Logo maker would like to add to your photos. And the reason to save the generate images, allow. And then saved logo saved to your photos library. Now all we have to do is to double check that. Let's go inside photos. And we have our logo over here. Man, this is really cool. We built a full AI logo maker application in just a couple of prompts and in just a couple of minutes. Actually, less than 30

12:50minutes. This is crazy. So, this is it. Now you have your own application. You have your own AI logo maker application. And now the sky's is your limit. You could add monetization inside this application. You could add more features. You could do whatever you want. I hope you learned something. I hope you enjoyed the video. Please like and subscribe and I'll see you in the next

Where these words come from. This is the caption track YouTube holds for this video, written automatically by YouTube rather than by the creator. We read it, tidied the line breaks and laid it out so it can be read. The plain text version is at https://viewrankai.com/tools/youtube-transcript/LLqczWpFwoM.txt.

All rights in this video belong to Mansoor Codes. Watch it on YouTube. If this is your video and you would rather this page did not exist, tell us and we will remove it.