Transcription
Should you try Sam Alman and OpenAI's new AI engineer in the browser, Codeex? Well, in this episode, that's what we unpack. We do a live tutorial for nontechnical people around how to use Codeex to get the most of it. Uh, I brought on Ben Tossel. He's a, you know, one of the most renowned people for explaining no-code tools for non-technical people.
If you want to see more content like this, like and comment so I know to create more free stuff. Enjoy the episode. [Music]
Ben Tossel on the pod. He just went viral for talking about Codeex. So, we had to bring him on the Startup Ideas podcast to introduce us to Codeex. Uh, what are we going to learn today, Ben?
Well, we'll find out. I think what I've seen is people talking about Codeex as this is really good for like senior engineers and their workflow, and I don't like people telling me what it's for. I just want to figure it out myself. Like, can I use it? Does it work well for me? If so, is this tool for me? So, I'm nontechnical. Always have to like disclaim that. Um, I'm more technical than a nontechnical person and less technical than a technical person. So somewhere in the middle, and I'm just making these tools work for me.
So cool. So today's going to be an introduction to Codeex by a non-technical British man. And let's get into it.
Okay, cool. Um, if you don't know what Codeex is, it's effectively a way to type in a task, it will code it for you, and then push it to GitHub. That's basically what this is. So here it is connected to my GitHub repo, my personal website, the main branch, and the website looks like this. So this is it so far.
So if we want to change something here, say I want to have another tab that's like food I like. Um, I'll just say, "Add another tab next to investments tools that is called food I like," um, in the dock. [Music] Put tacos. So I because I want to I want this to be true to the non-technical person. So you had to set up a GitHub. You had to create a website. How did you create that website originally?
With Codeex. Yeah. So yeah. So if we go back, this is something I did cover in my video. Um, which you need to have GitHub connected. So yeah, GitHub is effectively a way for your code to be stored, and you can like have this is like what a profile looks like on GitHub and not a very good profile but a profile nonetheless. Um, so you have these repos, repositories, which is basically like that's your project. So this one, for example, is my personal site. It effectively stores all the code files that you have, and then any changes you make, you commit them. So they're called commits. They all show up here. So you can see that it looks like I've been very busy. I sort of have, but I've been sending all these to Codeex to do. And then you'll see some other coding agents in here which we won't talk about in this video, but um, there's more other tools out there as well that I highly recommend. Um, so that's very briefly what GitHub will do. And then you have to create a new repository. So when you've got a new like you want to do a personal site, you want to do a marketing site, whatever you want to do, you got to create a repository for it. You type in any name. You can make it public or private. Add a read me. Just explains what your project does. Then create it. And then you'll end up with the page that I was just on. Something like this. Yep.
Um, and that's it. But then you're like, okay, well, what do you mean? Where's the project? Where's the like site then? Um, and I have linked mine here, but so what what I what I did actually to start this whole thing off was I had my site built on Carrd, which is a no-code build that I've loved for years, and it was doing fine. My site was up and live for years, and I just didn't do anything with it. Um, and then I actually went and I just did like right-click. I think I did view page source, which shows you the whole code that like serves the page. This is the code that is on my personal page. So everyone can go and look at this. So on the no-code builder I had this I just did all copy paste into a coding I actually used a different coding coding agent factory to then say put this all into code and put it on this GitHub repo. And that's where this then started off. Um, I've also connect you can connect it to then GitHub pages which then lets you have your URL live and you can give that to people and have custom domains there. Um, I used Netlify because I'm just trying to be a bit fancier, and that's another way to deploy stuff, and you don't really need to worry about that too much. Um, okay. If it's like your first foray into sort of coding stuff. Um, yeah. Cool.
Okay. So, website's live. We want to add something. We want to change something. We we add a task on Codeex. Yeah. So add another tab next to investments tools that is called food I like in the dark. Put tacos. Um, so if I just you can hit ask, which is just it doesn't generate any code. It'll just tell you stuff about your code. Um, going to hit code here, and then it come up as a task here. And you can see these are all past ones where they show how many lines of code it added, how many have been removed, whether I actually merged it, closed it, and we can talk about merging, closing, all that kind of stuff in a sec. We'll see it firsthand.
So, when we go into this task, you can see it's doing a bunch of stuff that looks a bit like hackery um that you see in the movies. It's just using the terminal to find different files, understand what the code actually says. As you can see there, this is the code. This is my command pallet modal. So I got Codeex to add this. When you do command K, comes with this like shortcuts modal. So then I can type it. I can just do I or T, and it'll navigate the tabs. That's just in my keyboard. Um, so this is now so I'm interested to see if it adds a new tab and if it adds that to the command line as well, if Codeex is smart enough to have to like piece those pieces together. Um, so here it's yeah saying these are all the things that I'm doing. I've looked at each file. I'll check out what the documents look like. I'll create a new document for the new section with the title food I like and tacos matching the style. I'll create and update the main site with a new tab. And it has it said I spotted the key event listeners for int but no changes need there. I'll I'll add a food tab. Okay. So that doesn't look like it's going to add its own. So the int is my keyboard shortcuts for navigating those tabs. I thought it would do that but maybe because I didn't ask it to. So now it's still working on it. Almost done. We'll see this in a second. So you can see that it's added two lines of code on the food document and more on the other one. This is what it looks like when it's done it successfully it seems. Anyway, um, so I'll show you the files it's changed. This is the food file. This is the main like website file. So it's added another button, food I like, and then added the food piece here in the tabs. um, it did its own test. So Codeex is like a use case they talk about a lot is testing, and we can get into that a bit later on because I think it's a bit more technical than you probably need for this like for this workflow anyway. But as we're here like okay great it's all worked. So if I go to my sites refresh it it's not there. So I haven't actually pushed any of those changes. Um, so this button is what what you want to do next. Create new PR. So PR stands for pull request, and effectively code is like one thread just one line which is the main branch. They call it branches. So it's your main branch. Every time you go and work on something else it's a fairly standard practice to create a branch. So you basically take that code, you copy it over to like another version over on the side, you work on that feature. As long as that feature is successful and there's no conflicts with the main code base, then you can merge it back in and no issues should be there. So that's what we're hoping for today as well. Um, so if you click view the pull request, so on my repo here, pull request, add food tab, summary gives you a quick summary of what it did. This is my because I'm connected to Netlify for deploying I can do that and see the testing stuff there. So that's something we can get into later. Um, all checks have passed. No conflicts with the base branch. So you can merge it. So if we just merge that will then you'll see that here. This pull request is coming in. So it's just pending. It might take a couple of seconds, and then once we've done that it'll deploy and we'll be able to see it on our site. So that loop is a bit long currently, and this is where we can get into the sort of testing piece and yeah running tests the environment previews like all of that is stuff we can dive into because this is the simplest version I think which is just like write a task get code push it to your codebase see the change.
Okay, quick uh, before you get into that, why am I even using Codeex? When I look at Codeex as a non-technical person, it feels 10 times more overwhelming to me than some of the prototyping first tools like Bolt and Lovable and stuff like that. So why why should people even, you know, besides playing with the tools is fun and it's good to learn. Why should a non-technical person even do this? Maybe they shouldn't is my answer.
Great. I I think I mean it's part of my job to just like test everything, but more so I like to see where things feel like they might be going. So seeing Codeex, the UI of Codeex is very different to the UI of everything else. I mean, you could argue that like a Bolt would look kind of similar where it'll got it's got like the sidebar and then I mean, I don't know if we've got any other builds here. So, this is what I got. So, it's got like the sidebar, chat, and then you've got your files, your code, you can see the preview, all that kind of stuff. You can deploy it. Um, you can integrate with GitHub. Like all of the same pieces are there. But I think what I find interesting about Codeex is you don't look at the code or think about the code at all. I think you you're obviously going to see it here, but I very rarely like look into any of these files. Um, I'm only doing it to sort of demo it, but generally it would be like, okay, add this. Okay, it just says it says it's open. That's what I'll I'll talk about that in a sec. So it says it's open. I'm like, okay, that worked. Pull request. Did it pass the checks? Fine. And this you can now do on your mobile as well through chat. I think that you can do it all quite easily. So you you can see it will be sort of setting off mini tasks to an agent to go and do that. I think Bolts you can do it I guess as a on your mobile but it's not going to be great. Um, and I just think generally text-to-app builders are overbuilding everything or completely setting everything up as an overbuilt tool, but actually all the features are under underbuilt. So if you ask for like a Shopify Spotify clone with Bolt, it'll spit out like UI perfect looks amazing, but all the pieces don't actually work. And when it's those pieces that you actually want to get working in order for it to be something that you can deploy and do whatever you want to do with it. Um, so you you like focused on like the end piece and then you got to work your way back through all the pieces that need to work which is actually hard if you ever have tried to do that. Whereas in this one, I'm very iteratively adding on to something, and every time I'm adding a new thing. Technically, there are tests and checks, and everything should be all fine. So, there should be a lot less time spent doing work on things that are not going to work. Like things that I'm going to then spend hours debugging, I'll either just give Codeex another task or try a different coding agent. So my workflow is kind of changing in that sense of like I get the chatting back and forth when I'm trying to make something, and I think it's really helpful to have the like the ask version of these coding agents versus the coding ones. Same as in Cursor you like have one chat and you just ask about what's happening in the codebase blah blah blah. Um, but something about this feels a lot different, and it feels a lot more like writing or like you set this is your to-do list, but you're not doing the to-do. You're not doing any of the to-dos. Something that's way way more advanced than you is doing it in a way that feels delegated and off your plate. So I just think you start here, and you can think well at some point the like the PR stuff that's going to be automated like I'm sure you can get bots now that if there's a successful pull request it'll just merge it to the main branch. So like you never have to go on to GitHub, and then you can do I think I think the limits around a task can last around 30 minutes or something until it starts breaking. This is early preview obviously, so it's all Yep. a bit on the fritz, but um can we uh can you explain a little more about what we're seeing around merged and closed and what's happening?
Yeah, but let me just show you. Did this work? Okay, it did. The keyboard shortcut does not work. Um, but food like that all works fine. Tools. Yeah, great. So that change all happened. So then this is merged. So that means it's been merged to my main codebase. My main branch, it's all part of the main codebase now. So if there's another branch, it'll have that code already in it. So when you open when you create a task, it starts off as open. Um, you won't see any open ones here because I've either closed them or merged them. This is an example of one I said make a light and dark mode icon button switcher. And this is for a different test that I was doing. It made one. I looked at it as like when I was testing it and I was like, "No, that's awful." So, I just close the pull request. You can just deny it basically like, "Hey, I want to make this change." And you're on that GitHub page. You're like, "Well, none of the checks passed. It didn't work or whatever. You can just close it and then just not use that." So, none of that is affected. It was on a branch. Your main code's fine. So, you basically like, think about it, I guess, in the support sense. You open a ticket, ticket's been worked on, and then the ticket's closed, sort of problem solve. That's kind of how how I think about this anyway. Um, so yeah, that's we've opened the task, we've merged it, we've closed it, it works on my site. I did no coding and I did maybe like four or five button pushes to do this. And the numbers that I see next to merge and close, I see like a positive number and a negative number. What What are those numbers? Do you even know what those numbers are, Ben?
I do. They are the number of lines of code changed. So +12 -0. We didn't take away any code, but we added 12 lines of code across your whole code base. So it's not just like in one file. Um, generally that's yeah, that's what it is. So even on my personal site, I have this which I haven't worked on yet, which is I I basically try to copy the Codeex UI, and that's what I use for this inspiration. But yeah, I've got these numbers here. They don't actually work. But this one actually pulls in the live GitHub repo. So any changes I make are reflected in there every 15 minutes. So it's I don't know if we just did we just do 12 lines? We did. Yeah. So that actually is updated one. So if I click on that then it'll show me the commit of what I just did. Just again a little thing I just said to Codeex try and do that and it did it like no problems.
Um, before we go, you know, you've been playing with Codeex for a few days now. Um, what sort of best practices do you have for for non-technical people who who are playing with it?
O um, I'm worried about like what people will do and then call me out for uh, but I would just start really simple like use it on your personal site or create a new personal site if you're precious about yours. The one of the first things I did like I mentioned was like, okay, I've been on this no-code tool builder for god knows how long. Be nice for me to just have the site in code so I can make any changes in any like weird and wonderful extra pieces that I'd like. So just do it line by line and like piece by piece. You can see all of these merge pieces like add a food tab. I could do that in the code myself. Remove this text animation. Add keyboard shortcuts. Add a dark light mode switcher. So like all of those things, they're all like nice to have fun interactive things that you see on other people like other developers' websites that maybe you just don't have on your own. But I would just start with make sure you have a GitHub repo and it has at least a read me so you can just enable that when you're creating one. And then just go from there. Say, okay, make a website with my name as the header. Create an about section and then create like some social links and go from there. And then I think it's just playing around with everything and just merge stuff, close stuff. Um, the thing about GitHub that is good, but it's not that easy, I don't think, anyway, is if you have merged something that then your site completely up, like I did it before where the site just wasn't loading anything and I was like, "Oh, what have I done?" You can always go back to a previous version that didn't work. So, if like that food tab thing broke a bunch of stuff on the site, I'll be like, "Uh, okay, I'll go back to this." So I can go back to this, and all of these are like just disregarded. Code is never there. Don't worry about it. So there's no real danger of if it's like a personal side that isn't client facing, money-making, whatever. It's something that you're just working on. You can iterate on and add like weird wonderful funky things. There's no real risk of like anything happening other than your site changing. Um, and then when you get stuck, ask ChatGPT like, hey, how do I roll back this GitHub stuff? Um, how do I like I want it? Cuz the thing you can't do in Codeex, so there's some limitations here obviously like you can't upload any files, you can't upload any images, you can't say make the UI look like this. So me trying to do the UI piece was a challenge. Um, but then you can go to other tools like Figma, generate some design stuff, bring that code in here, or you can deploy that on GitHub and point that here. Like there's loads of ways to do it. Um, yeah, I just start small and iterate even smaller. And it's just getting a feel for like could I see myself coding like this in a future like in 6 months time am I going to just think this is so obviously how everyone should be writing any code like I don't I can't write a line of code myself bar like the minimum stuff but I can ship all sorts of stuff with tools like this and especially it being mobile native just feels like I'm going to be shipping all the time.
Uh, when you say ask ChatGPT if you don't understand something, do you mean going to chat.openai.com or do you mean going to chat.openai.com/Codex?
And hitting the ask button? I generally go to chatbt.com, and then I'll change between the models to see what I what's going wrong.
And the good thing about using chat is you can still say like, "Look at this repo," or you can try and there's some other tricks as well, like um, if you change the first letter of GitHub to u, so "uit hub," you'll see this, which is looks like a lot of text, but this is all the code that is involved in my site. So, I can basically copy all of that, and it's going to be 90 9,000 tokens. I can copy that, go to chat.com, and then that's yeah, and just say, um, "My personal site, are there any like bugs?" You just do like that kind of thing. Um, so I just tend to do that. I haven't really used the ask. I think I did it here. So I asked, "How do I ask you to push changes to my staging environment? How do I check the staging from a UI perspective?" and it can do it, and it's but it's more connected to it's not connected to the internet. So it's like I'm just looking at your repo and answering based on what it has, what knowledge it has to give you that response. Whereas I'd prefer it to be based on my code and also various sites I can go and look up how I can help you fix this thing. So generally, that's what I've been doing.
Um, good tip. Yeah, good tip. I also like your tip around, "Try this," for you know, well you kind of said like, "There's levels to this." Level one is build a personal site. Um, what are what are the next levels like after you've built a personal site? You know, what's level two, three, and four as you're learning about codecs? Yeah, I mean, I think I haven't seen anyone I saw someone tweet about this like, "Has anyone use codeex for like working with databases or authentication," cuz they're like they're a few steps up to deal with those. But then there's things like MCP which are making a lot of this very, very easy in things like cursors. So it's again maybe I'll just be patient and wait for MCP stuff to be in codeex, or maybe I don't use codeex anymore, and Claude have just released their SDK and there's a version on that like there's all different ways that this is probably going to go anyway.
Um, yeah, I think the first step is like it's just getting you to getting you down the rabbit hole like, "Oh, I can use this thing to code onto a site that I own and can see." Cool. What would I want to add? And even on your own site, you start going, "Would it be great if an integration with GitHub could pull in the latest information?" Like even that is I would say a next mini level up. It really depends then on what what kind of things you're into and want to build. But I think there's there's obvious things like having user sign in, sign up. There's like people saving or bookmarking items in your product or whatever you're building. Um, there's the database layer. There's like the whole AI piece is another another thing.
Um, but the best thing about this whole space is there's so many open source like repos on GitHub. You are going to be spending time on GitHub that just I mean, I think there's a there's a guy who works at together AI, Hassan, who always releases all of these open [Music] source Yeah. All of these open source like mini AI tools. So this is like a summarized PDFs. Okay, great. Um, and then they're always open source. And this like might even look scary, but it really it's clone the reaper, which is clone the code base by using that. And for that today, you'd have to use some of the other coding tools, but I think it's like it's going to be fairly soon where you can just I mean, I could I might be able to do it now. Um, we can try. So if I fork it and then just do that. So that I've now got that code. I wouldn't just change the name and say my code, but that's that's what it is. Then if I go to codeex, I'll need to go to my environments to create the environment. Basically connect the right repo. Um, what was that called? PDF something. It might just there we are. Smart PDFs. Um, so if I just do that, I think the UI needs to be. So then if I click into that, "How do I get this code up and running?" And dumb question like, "Why did you need to create a separate environment for smart PDFs?" It's just so they called it environments, and it's just like a different connection. So it's a different place that it's talking to and writing code to because like you can see here these are all Yeah, it's effectively that. So I think even the fact you have to go into environments, create an environment doesn't feel intuitive. No, it just feels like you should be able to I don't know an add button here that is just like connect a new repo.
Um, but the environments piece is much more advanced than that, which is why it's probably done this way. So, here they have this piece, the code exe execution piece, which I haven't actually touched yet. Um, but often if you have code like what Hassan's got, so I assume that's that's why I asked that question because I think it's going to be helpful to show a bit of that is [Music] um, where's the [Music] code? So you'll see here when you're running to to run this app, you need to run pmpm install. So that's a terminal command. You got to run this and you got to run this which feels a bit crazy and like I don't know what you're saying if you're a nontechnical person. Um, but if you're in cursor or some sort of actual like coding environment, there are terminal command to basically spin up the servers and the things that you need in order for the app to work. Um, but with codeex for it to be able to interact with your code and see it properly, you need to run those commands. So here is where you say it gives you examples there, but it's like PM PM whatever it was um install and then whatever the other ones see you have to put them here, but this is like proper development environment when you're building something that is a bit more it's got frameworks like XJS, Python, whatever like it's got things in it that's more than HTML, CSS, and JavaScript, which is more what I talked about today in the personal site context.
Um, but yeah, I want to do this. I want to test this out, and um, yeah, there might be a follow-up video to say I was wrong. All the idea was really good. So, yeah. Cool. Um, let's leave it at that. I don't want to get more technical and more down the rabbit hole for this. Uh, Ben, thank you for being generous with your time and your sauce. I will include where to follow Ben in the show notes. Highly encourage people to go check him out and his newsletter, Ben's Bites. Anything you want to leave people with, Ben? I think all of this looks scary or feels scary, and there's too many things launched all the time. So that's just the world that we're in, unfortunately. And I think just like getting to the point where you feel like, "Let me just test this one thing," and on this one simple site idea and this one simple feature, you just got to start there. And I think the whole point of what I do with my newsletter and like what I tweet about and record videos on every so often is try to make it less scary for a non-technical person. Today it wasn't a planned like tutorial style, "This is how you can do these things," but my video might be a bit more this is like a really a more structured way like showing you actually how to set up a projects and stuff, but it's it's not that scary, like I know it's easy to say from the other side of the fence, but I've been nontechnical forever and been talking about no code forever and all those other things. So, I come from that world of, "I can't code. Code is scary. What is GitHub? What am I supposed to do with it?" And I'm just getting curious enough to go past those barriers to then be like, "Oh, I've got a site live, and now I've got 50 live, and I've got all sorts of different apps of different complexities." And like once you go to the rabbit hole, you're going to start wanting to do more once you've figured out that. So, don't set yourself up for failure with, "Let me do a a Spotify clone," and then deal with all the bugs in the middle because it'll just be a nightmare, and you'll never want to do it again. Like, start with one simple thing, try and do that. If you it up, then ping me, I guess. Um, yeah. Amazing. And um, yeah, my you know, just my takeaway from from you showing this is it does feel overwhelming, like just the semantics, the terminology, GitHub just itself feels like a behemoth.
Um, that being said, I think that playing with codecs is almost like a lightweight way to learn how to code in some ways. Like it it it it introduces you to a lot of computer science and development terminology in a lightweight way and like a bit more of a fun way. So um, whether you end up using codeex or you end up using bolt for example, uh, you you know, it it's just this is going to make you better at building with AI period, and the lovables and bolts and and curses of the world are probably going to introduce a to-do list task-based UI in the future because it just kind of it makes a lot of sense. So my take is, "Will I be using Codex every day, Ben?" I'll be No, I'm not going to be using every day. "Will I be using Codeex this weekend as a learning project to play with my personal website?" Absolutely. Yeah. Yeah. Exactly. And I think it is that terminology that you got to get over a bit. And I did a a write up actually. It was on our substack that's like GitHub for nontechnical people trying to dispel some of that scary stuff. Um, but yeah, I mean, I I think the same. And it's more that like you'd rather do one thing correctly. Yeah. Than the big thing and then try like this introduces coding to you like it drip feeds it. I think with you got to set up GitHub and then you can start coding. That's fine. With these text to app builders, you can just type a prompt and you start building. Great. But it's not the same. You still end up at the same place at the end of it. You still have to deploy it. It lives somewhere. It's probably going to live on GitHub. Like is that it's going to end up in the same place. It's just how you enter. And I think what you mentioned with is this going to be the place where someone learns about coding or like this is where they write their first line of code or AI writes it for them. I kind of feel like this is a better place to start than a text app builder because like I said, it's going to build a big fancy thing, and what you're going to end up in is like seeing a bunch of terminology, code being written, tests failing, they're all to do with now you have to help the AI solve these bugs. That's a way deeper like place to start swimming than here, I think. So that's what I think is interesting about this is like it really doesn't feel like coding. Yeah. But it is, and it's come from the like almost top-down bottom-up like analogy you could think about here maybe. Um, but I don't think it's built like that. So it's obviously meant for the whole stack. So it's yeah, we'll see. Ben, toss everyone. Thanks for the time. Hope you learned something. Cheers.