Building a Mobile App with OpenAI Codex (Better than Claude Code)

Key Takeaways

Not only can you viode apps with zero coding experience, you can also vibe code an app that vibe codes apps. And today I'm going to do exactly that. So I was testing Replet all weekend and it's just not my favorite. So instead I'm going to make my own version of Replet without writing a single line of code. So in this video I'm going to design and build a Swift app that I'm going to use instead of Replet. And I'm going to use the Codeex app, which is my new favorite coding app on the desktop. And I'm also going to be putting Claude code inside the Swift app that will actually power the app generation. And so let's not waste any time. Let's build an app that builds apps. Okay, so this right here is the Replet mobile app. And to me, everything is just really small. Everything is really cluttered. And I really don't like the experience of this app. I think the main home screen is a little bit confusing and boring. So, we're going to be building a better vibe coding mobile app today in this video. And to do this, we're going to be using Codeex. So, OpenAI's Codeex, which is a desktop app, which I've been using more and more and I've really fallen in love with it. And we're going to use it to build our own version of Replet. And on top of the codeex application, we're also going to be using Xcode. And Xcode will allow us to create an app in Swift. And I'm going to run it on my phone. And we're going to develop this app right now. This is going to be a really fun one. Okay. So, here's our prompt for a better version of Replet iOS app. Let's go over the prompt real quick and then we'll we'll get started. We're not going to waste any time. I want you to build a Swift app that builds web apps and mobile apps. And so I want to build a clone of Replet mobile app because it's pretty bad. And I might be sound a little harsh. I don't think it's really bad. I just really don't like the UI. It's just not that fun to use. And so I want a more simple experience, right? I want to make it simple and I want it to be like Replet except it's going to be a lot more like iMessage. So the whole process will be a lot more simple, almost like you're texting a friend, right? And it's going to feel like texting a really smart vibe coder or a really smart developer named Jerry. Right? This guy's name is going to be Jerry. And the app is going to be called Jerry. And so for this, we're going to be using Swift. We're going to save all the messages locally to the phone. And we're also just going to be using the Claude SDK. It's technically called the Claude agent SDK, which allows you to put Claude code into your application. And so we're basically going to put Claude code into our app. And this quad code is going to communicate with the brand new vibe code CLI which will handle the sandboxing and it will actually create the app and send a link back to Claude code. So we have this user message, right? Build me a fitness tracker. You're going to chat with Jerry which will be powered by the agent SDK. You may go back and forth, right? It may ask you like, hey, what colors do you want your app to be? What features do you want? you're going to provide some more an answers and then it's going to generate and host the app with the vibe code CLI. It's going to return an app URL back and be like, hey, here's the link. And so it's going to autoopen this URL, right? So the Vive Code CLI returns links for the app and the last link in any message will be automatically open in this browser preview and then the user will see it and then the user can just go back and forth with the JRE agent updating these app. But by the end of this video, I think we're going to create a really compelling vibe coding platform. And so that's what we're going to do. Okay. So, let's go ahead and we're going to actually use codeex right now. But first, what I like to do is I like to just go into Xcode manually. And I like to create a new project. I just going to say we're going to create an app. Just going to hit next. We're going to call this Jerry. And we're going to hit next. And we're going to create this project here. And now this is just going to open up. And so when the project first starts, this is what you'll see. It's basically the most simple iOS app you can possibly build, which is a white screen that says hello world. So, you have your code here on the right. We can zoom in a little bit, but as you can see here, you have some files. This is basically like a starting template for any sort of Swift application. So, now that we have this open, I'm going to go back to codeex. And in codeex, I'm going to create a new project. And here, what we're going to do, we call this project Jerry. And we want to make sure that we choose this one right here where it's like the the most highest level project cuz there's a subfolder in Jerry called Jerry. We don't want that one. We want the folder the highest level folder for it. So we're going to open this up. And now we have a new thread. And so this thread will be dedicated to that specific folder. And by folder I mean this directory that has all the code for this specific project. And so we can create many threads and run many things in parallel. And so I'm going to show you. And so in this video, I'm not going to go linearly. When I use codecs, I'm often doing many things in parallel, whether that's research, design, and building the app. I like to work. And the better you get with these tools, the more you can work in parallel. And so if I'm moving a little fast, that's just because that's how I work now. And I will do my best to explain my process as I go. If I go too fast at any point, please leave comments down below. I would love to answer as many questions as I can. Anyway, so what we're going to do is we're going to create a new thread in Jerry, right? So, we're we're building Jerry and I'm going to say this is my app idea and I'm going to go to notion and I'm just going to go like this. I'm going to snag this prompt and I'm just going to paste in this prompt. Now, what I'm going to do is I'm just going to let's toss in that image that we had here, this flow diagram. And I'm going to do is I'm going to press shift tab which turns on plan mode. Let's make a plan for this. So codeex is going to make a plan. Now while codeex is making a plan what I'm going to do is I'm going to make some let's figure out a design here. So I'm going to go ahead and open up paper which is basically a Figma but it's designed specifically for AI agents to use. And so we can open up this new board. And I'm going to paste in my idea again. Please design the four most prominent screens here in paper.design. Use the MCP tool to make the design. So I made a video, I think it's my previous video by the time you're watching of me using paper. I actually fully set up paper and how to use it. So this is just my process. I don't want to go fully in how to set up paper right now. This is just how I'm going to design the app. And so what this MCP tool will do is it will actually see my application that's open, which is just like Figma. Paper is just like Figma. And it should create the designs right here. And so I'm mapping the app structure from your brief. I got the empty paper canvas. I'm reading the vibe code workflow now. And you can actually steer codecs. So, I could say like, "By the way, focus most of your attention on the chat and the preview pages. Keep it simple." And you can just add steer, you know, like you see it's working right here in this thread. And you can actually steer it. And this gets entered into the prompt as it's working. And then it just continues to work with your added feedback. And you can enter in as many steer messages as you want. As you notice here, it says awaiting response. So, we're going to go back to our plan and let's see if it's you can see here on it's actually designing those four screens right now. Jerry inbox, Jerry conversation, Jerry preview, and build result, which is kind of fun. And so, what I'm going to do is I'm just going to go ahead and leave this open over here. We can get rid of this phone for now. And so, we'll just leave the designs open right there as we work. Where should Jerry's agent runtime live for the first version? Hosted bridge Mac companion device only. Let's go ahead and do hosted bridge. Don't fully know what that means. What should we the first shippable milestone include? And I'm going to add context. The Vibe Code CLI treats the mobile apps and web apps the same. Both open in web preview. So, we should do both. So, now we're going to submit this. Okay. So, this is pretty fun. You see here at the same time our full plan is done. And additionally we're making some progress on these designs. So this is a pretty good design for Jerry, right? Tell me what you want to build and I'll build it. Web first. Yep. Ship it. And now it's starting to build. It's showing the preview page. And so we can just like make some adjustments to this. So in paper, what I like about this is I can like select this and this and copy this link. And I'm just going to say I'm going to paste this here. I'm going to say on the preview page, can you please don't show the link and also don't show the open automatically from Jerry's latest link and then make the Safari icon at the top right and then have the the back button to Jerry there as well to minimize the space. I want this preview to basically take up the whole screen. Additionally, I want the homepage should be don't have messages at the top. just have it be a big photo of of Jerry on the right, which is just like the black J. And then the text at the top should just be like build with Jerry. And then in the chats, it should just have a name of the project. And so use AI to name whatever my first prompt is, name the project that. And so instead of it having a J, it should just have like a little app icon, like a mobile app icon there. So we can enter that in to steer. Okay. And so another thing, we're going to need multiple API keys. So I'm going to go get those now. So I'm going to open up my browser. So, I'm going to need a Claude API key. So, I can find this on platform.claude.com. I just created a key. I'm going to keep it private. And then we're going to need a key on vibecode.dev to access to the Vive Code CLI. And so, I'm going to do what I'm going to do first is I'm just going to say yes, submit this plan. And then as a followup, I'm going to say here are the API keys by the way. And I'm going to paste these here. All right. So, this has been going for about 7 minutes now, and it's still not done. But things are being changed here. As soon as this is done, I'm going to run it on my iPhone instead of this little simulator thing here. I do not like using this. It's not very good. I want to run it on my iPhone. So, I just went for a walk for about 30 minutes because it was taking so long and I just wanted to kind of take a little break because the initial prompt that you do on Codeex is usually the longest. And so, now we're back. Let's go ahead and see how our app has done here. So, we're going to go back to Xcode. And what we're going to do is we are going to hit play here. And so, this automatically opens up on my iPhone. And so, this is opening up on my phone. And we're kind of in this empty chat. And so, we can start a new conversation with Jerry. So, I'm going to hit new chat. And I'm just going to say hello there. What's up? Okay. the data couldn't be read because it's missing. So, I'm just going to hit okay. And if we go down here into these logs here, we just see a bunch of stuff. And so, this automatically pops up in the bottom of Xcode. So, I'm going to do is I'm just going to copy this. We're going to go to Codeex and say, I got this message. Please, let's fix this. Now, we'll paste this here. Boom. And we'll see what Codeex has to say about this. I don't fully understand what's going on. Okay. So, I think it's done. I do believe I need to go refresh this real quick. Build succeeded. Let's see if we can actually communicate with this agent. So, I need to go new chat. Hi, I'm Riley. Okay, Jerry's thinking through the build. What's going on? So, we're not getting a response. So, we need to screenshot this. I'm going to drag this into the chat. I'm going to say, yo, now it's working. It says Jerry is thinking through the build. By the way, like I want to chat with this just like any ordinary agent. The Vibe Code CLI skill will allow us to create apps when we ask it. And so we're basically just chatting as this as if this was just claude code. I can talk to it. And so I'm not seeing any response by the agent. And so this should just be like a chat response. And I should get a response when the AI responds. And when we add the Vibe Code CLI, it'll respond with a link to our application. That's how this will work. So, please focus on making this just be like a chat with the VI uh with the Clawed agent SDK and then we'll start adding in the um Vibe Code functionality and testing if the apps actually open on the phone. Okay, now we're going to wait a little bit longer. So, let's run the latest version of this. Let's see how this does here. So, I'm going to hit new chat. I'm gonna say hello there. Jerry's thinking. Come on. Yes. Hey, I'm Jerry. What are you building today? Amazing. Do you have access to the Vibe Code CLI? Jerry's thinking it's not on your machine. Okay. Please write a paragraph of what you have access to. Ooh. Okay. So, you need to screenshot this. as you can see here. Oh, wow. Wow. Yeah, everything's all messed up. I'm going to go ahead and create a new chat. Oh, yeah. So, by the way, you can create a new thread within the same chat. And here, I just dragged in the image here. So, we have this image showing the formatting is all messed up. This is very messed up. Uh, can we fix this, please? I want to make it look like I message chat with multiple lines. Make sure everything is aligned and please have the three dots like in iMessage when AI is responding. And now we're going to wait. Okay, so I believe it is done. Let's take a look here. Let's see. Hello. Ah, the three dots. That's looking pretty good. Hey, what's up? What are we building today? Okay. So, it doesn't have access to the Vibe Code CLI. So, I need you to make sure that this agent has access to the Vibe Code CLI and skill, please. What we're going to do here is we're going to go to vibecode.dev and I'm just going to copy this. These are the installation instructions. You should already have the API key. Make sure this agent SDK does as well. We'll paste this in right here. This is not a real key. You have this. Okay. So, let's go ahead and run this latest one here. I want to say hi. Okay. Just making sure the chat works. What's up? Do you have access to the Vibe code CLI? Okay, so it's still not I asked the agent. It's not downloaded. It need all new agent SDK chats should know it has it installed and have it installed. Okay, so I just did a test and I'm just trying to figure out that in the new project that gets created, I don't see a skills file. So I gave that to Codeex. I think Codeex figured it out. So we'll see. I'm going to go ahead and delete the app from my home screen. Now we're going to rerun it. Okay, now it's open. Okay, now let's go ahead and test it. Do you have access to the Vibe Code CLI? Yes, I have access to the Vibe Code CLI. Can you please build a simple landing page for Joe and the juice smoothies? Make it simple. Let's see. Oh, and look at this. So, since it uses the Vibe Code CLI, my Vibe Code app. So, this is the Vibe Code app and you can actually build apps directly on the Vibe Code app. And I am biased. I am a co-founder, but I think it's better than Replet. It's a lot easier, right? You know, I think the UI is much easier to use. And so now the project's being created. And so now we're going to wait and we should get a link. And what we want to be able to do is click the link and stay within the app, right? We shouldn't go to an external browser. Ideally, the browser opens up in the iPhone app. And then we'll test it directly in the app. That's our goal at least. Okay, so we got an error. I think maybe something timed out, but let's just go ahead and copy this. Okay, it looks like we got an error. This does take a while to run. It will take like 5 minutes or so. I want it to work. So, please figure out what you need to change. Okay, it's done. Let's delete and let's go ahead and try this once again. Please make a simple landing page, please, with the Vibe Code CLI. Bang. Let's see what happens here. All right, I believe it is starting. Yo, so I just went down to grab some yogurt and I came up and this is what it showed. A literal app preview. So we have this app. We can get started, learn more. We have this full app we can close. H it should open it in the preview. Okay, so I noticed that the app was open in the app preview automatically. But what when I click on any link in the app, it should also open the app preview. Right now, it's taking me out of the app to the link. For whatever reason, I've been having to like fully delete the app every time and rerun it, which means my chat won't be there. I believe it's going to be a new database. So, yeah, all my chats aren't here. So, the way that I'm going to test this is I'm just going to say, "Please show me this link." Oh, weird. We need to change the color of the links in the input to white. That's not a priority right now. I just want it to just show me the full link right here. Hopefully, I can open it up in the web preview. So, I'm going to paste this. Let's see. Okay, it opened up automatically. I'm going to say, look at this. So, do that again. And so, now it automatically opens this little app preview, but we want it so that if we were to click on it, see, it still opens it like in a new menu. So now anytime there's any message that has a link, it automatically opens in app, right? It opens in app like and it just kind of automatically pops up and it shows app preview. But when I click one of the links, it doesn't do that. And so I want this to open the preview. Please figure out how to do this. And now we can test this again. Boom. There you go. Okay. So now I want to see what happens if we have it create a mobile app. So, I'm going to say, please create a mobile app that is a todo list app in the style of notion. Make it cool. Okay, let's see how this looks. And while this is loading, let's go back to paper. And if you remember, ooh, this is looking good. So, I gave it a prompt earlier. This is very good. I like this a lot. So, this is going to be our homepage. So, I'm going to create a new thread. Please redesign this page right here. This is the front main page. Keep the settings menu. We need that. But other than that, have it look like this. But add a projects page that can be accessed to see a full page of projects somewhere in the list like at the bottom of the list that shows on the main page. So, see more at the bottom, please. And also, see what else we can do here. It's looking good. Yeah, that's basically the only screen that I really want to use. And also, no need to add the attach button. Okay, let's see. Boom. Let's go. There is our app testing. We have a basic notes app. We can choose our little thing. We can add an item. Hello there. This is me. Well, there you go. We have a little notes app. We have the iOS app rendering. I do want to see if I can just like make this bigger, this web preview. So, let's see here. I want to see is the is it possible to make the web preview full screen? actually more full screen and basically not have the part at the top that is white. Right? If we get a screenshot of this, drag this in the close button can be an overlay and we don't need app preview and we could make the part on the bottom not take up as much as well. Okay, so my other agent is done. Let's go ahead and refresh the app. See what happens here. We tried to redesign the main homepage. Let's see if that uh What the hell? What the heck? I wanted you to make it look like this. Did I drag the wrong screenshot in? Oh, I'm sorry. I didn't give you an image. I want it to look like the image I just gave you. Sorry. Okay. So, this version is done. Let's see if we can run this. So, now we're going to try and run the version that fixed the web preview. And in order to test this, what we can do is we can go into our really ugly list here. We can open this up. Okay. It's a little bit ugly. Let's actually open a web app. It's hard to see here. Maybe we should go to the mobile. Yeah, this one's a little bit ugly. Let's drag this in here. Please actually lower it a bit. Just a little. And the bottom has a lot of wasted space as you can see. Just fix this the best you can. Oh my. I I just got I have an idea. I have an idea. I have an idea. Okay, so Twitter opens their links like this. I'm wondering if we can do the same. So, let's close out of this X thing. Okay. So, what I'm going to do is I'm going to screenshot this right here. I'm going to drag this in. I'm going to say, see this screenshot? You see how when I opened it on Twitter, it has the part of the app on the bottom. Can you make that the chat? Just like put a little chat bubble there where I would type into like in text, you know, that's at the bottom. Just put that there so I can actually type into the message as I use the app. And it should be about this height. So, keep it vertically where it is, right? It's very pushed up towards the top. That's okay. I actually want you to have this little overlay. So, when you open this up, the little input chat should be there as if and I should be in that same conversation. And then this allows me to like see that I can type while I'm using the app preview. This will be really cool. And put a little voice record button. Uh we'll add voice record later. for now. Just put a voice record button there. Similar to this user interface, but this is kind of how I want it to open when I open one of these links. Okay, so it's done. Let's go ahead and check this out. Let's open it. Let's see how it looks. Boom. There you go. And it has this bottom part, so I can type directly into it, right? I can just type into it. It does make it a little bit clunky here. I'm wondering if we could get that to open in an overlay, but that's okay. I think that's good for now. I do want to make this voice thing work. Please make the input area in the chat and in the preview have a voice record button. This should be there when there is nothing typed. So before anything is typed, it should be a black button with a small soundwave icon. And when pressed, it should make a cool animation. when I speak subtle, but it should record my voice and enter it in the app or enter it in the text area so I can send a message or type in it without opening keyboard and viewing the app that open on preview. Please use open AI whisper. I'll give you a key if you need it. Okay, so I just made a little quality of life updates here. So this is basically the final version of our app. So you can create apps obviously and so here's the notion app that we created. If we click on a link, this should open up here. We see the iOS app. It's loading the preview. And we just added this new voice feature. So I can say, please actually make this app light mode. It should be very light gray, like almost white but light gray. And completely change the font. and then add one feature that you think would be cool. And so we can just send off prompts while the preview is open, which is pretty cool. And so now it should just make this change. This should only take like 30 seconds to a minute. Let me see here. And you know what? That's actually one final thing we can do. Please make the bold formatting and bullets, etc. render properly in chat because right here it's just like not showing up the right way. But let's see if those changes were made. Yep. So, those changes were made. I need to say send preview link. Okay. Well, there you have it. I know that this it was hard for me to do this in a structured manner because this is the first time that I've ever built an app like this, but this is what we created, a Swift app that allows us to build apps and we can open them directly in the app, which I think is pretty cool. And we can even make changes with our voice. And I think this is a really fun experience. Go crazy. Add like 30 features. do some crazy right? I can look at the app, direct the changes, submit the prompt. We see it in this chat like experience. This is a Swift app. We can ship this to the app store. Anyway, I hope you guys learned a lot. I hope you guys learned a little bit about codecs. I'm going to do a much deeper guide on codecs in the future. But anyway, thank you guys for watching. face.