ULTIMATE AI Coding Tutorial with Warp Code

Key Takeaways

In this video, I'll be giving you an extremely in-depth guide and tutorial on how to use Warp. If you've never heard of Warp, it's a very popular agentic development environment. It's growing extremely fast, and it has a different interface and kind of philosophy to coding than the standard IDE and kind of CL CLI, sorry, environment that you may have seen before. If you don't know anything about coding, don't worry. You can still follow along with this video. And if you're a developer, I guarantee I will show you some features you didn't know existed because I'm going to go very ind depth here and explain really how to get the best out of this tool. Okay, so quick primer. Let's talk about what Warp is and why you should even try it or, you know, learn about it in this course because this is going to be a long video. All right, so I'm on the landing page here. I'm just going to quickly go through it. And you can see that with warp, I mean you can do the same things you can do with any of these AI tools, which is create applications, debug, push something to production, you know, create interfaces, whatever. The difference mostly here is the performance of this tool and also the interface and the way that you interact with the AI models. So if we look at this example here, which I think illustrates it quite well, this what you're seeing is kind of the standard IDE plus CLI combination where you spend most of your time kind of viewing the code, right? you have this smaller bar on the side where you're kind of interacting with the AI agent and then when you want to do serious stuff like deploy your code or put it in a Docker container, you typically need to open up a dedicated terminal and then you run the commands. So you have kind of these multiple windows and now as we're moving more towards coding by prompt you see that where you're actually working most of the time is in kind of this small interface section and you're not actually looking or reviewing the code as frequently as you may have a few years ago. So what warp has done is they've kind of combined all of this into one tool which where they're calling sorry the agentic development environment where you have a dedicated terminal as well as a dedicated kind of AI IDE or again in their case a gentic development environment where you can write code run commands and interface with the AI in a way that makes sense. So, a majority of the interface is set up to actually talk to the AI model, get feedback, see what it's doing, as opposed to simply just showing you the code and having this kind of little sidebar again on the side because now we are more frequently talking to the AI than we are actually opening up, you know, the editor, writing code, etc. You can still do that in this tool, but you'll see that it's focused a little bit different. Other than that, it does have very good performance in terms of the coding agent itself. You can see that they're saying it's the number one coding agent here. outperforms claude code and cursor and overall coding performance. The reason I believe it does that is because of the deep context that it's able to have and from my experience using this, it is significantly better for large complex applications when you are actually planning to push those out into production. You can still vibe code with this 100% even if you're a beginner, but this is set up so that it's not replacing developers, but empowering them to build things that are really impactful. Now, full disclosure here, I have teamed up with Warp many times on this channel and they are sponsoring this video. However, nothing that I say in this video is dictated by them. They simply said, "Hey, can you make a course teaching, you know, the Warp platform," which is what I'm very good at, which is what I'm doing here. It is free to use. You can try it out, see if you like it. I'm not going to try to sell you on the tool. I'm just going to explain to you how it works. Now, with that said, let me go to the pricing because I think that's important to understand and we can talk about a few other components, then dive into the editor. Keep in mind, if you just want to skip forward and see kind of how it works, what you can do is view all of the timestamps from the video player down below. Okay, so pricing here. They have a bunch of different models. Like I said, they do also have free, right? So, you can use this, mess around, play with it, see if you like it before you upgrade. But the one that most of you are probably going to be using is the pro tier. This is where you get up to 2500 AI requests per month. You can view the usage inside of the uh tool, which I'll show you in a second. You have turbo. If you're actually using this on kind of a daily basis, you get significantly more credits, 10,000, which is a lot. And then you have business and lightseed. Again, this is if you're really much more of a serious developer or on a team and doing a lot of requests to the model. With this pro tier, for example, you can get quite a lot done, but again, if you're using it every single day, you're probably going to run through those credits pretty quickly, which is why you would go up to Turbo. In terms of how this compares to other tools out there, very similar. Most of them are in this range, typically starting at about $10 or $20 per month. And then again, for more credits, you're going up higher. For example, recently I was using Cursor. In two days, I ran through all my credits. uh to buy more. So, it's kind of common and you're spending, you know, 50, 60, 70, $80, $100 a month in most of these other tools if you use them seriously. Okay, so that is the pricing. A few quick things to go over. If you want to use Warp Preview, this is kind of like, you know, VS Code Insiders, for example, where you can get all of the early releases and kind of the stuff that they're testing before they push it out to the mass public. You can download this. This is what I'm currently using in this video. So, if you see any features that you don't have in your Warp, that's because they are in Warp Preview. Now, Warp is also making a lot of changes and updating things very quickly. So, just keep that in mind. Overall, what I'm going to show you here should apply and should still exist in the tool, but just keep in mind if you're watching this 2 years later, there may be some major changes and they're constantly pushing out updates. Now, other than that, I will let you know that Warp does have their own university. So, if you want to check out exactly how to use this in kind of more production grade courses or whatever, you can, you know, check this. I'll leave a link to it in the description, but I'm going to go over all of this stuff. And then they also have a Slack community if you really want to get involved, ask questions, get feedback, support, etc. Okay, I think that's it. Last thing, it is available for Mac, Windows, and Linux. If you want to use it, download it. Again, can use it for free. Now, what I'm going to do is hop over to the Warp Editor or Agentic, you know, development environment, whatever you want to call it, and start writing some code and showing you the features of this tool. So, Warp is open on my computer, and you'll notice right away that this looks a lot different than most other AI coding tools that you've seen in the past. You're not immediately presented with some files or a big kind of code editor layout or screen. You're actually just inside of what looks like a terminal or a command line. That's intentional. Again, goes with the philosophy of we're going to be writing more code by prompt. So, let's make that feature kind of the focus of the tool as opposed to all of the coding stuff. Again, it has all of those coding features which I will show you, but this is kind of how they've designed it and the philosophy. All right, so I want to go through this layout, explain to you all of the different things you should be aware of. I promise you I will write some prompts and we will utilize the model, but I want this to be very thorough and in-depth. So, first thing just understand that you can like zoom in and zoom out of this. So, for example, if you hit control and then minus or control and then plus, you can kind of zoom in and out. you have this settings menu that you can access by clicking on your profile and going to settings. And then from here you have a bunch of different settings that you can play with and mess with. I'm going to show you a bunch of them. For example, appear appearance story is something that you might want to do. So in my case, I have a theme that's kind of dark mode. You could change it over to light mode. You can change the text. You can change the size, right? And that's something to probably play with based on your preferences. Okay, so let's get out of the settings. Now, you also notice that we have these tabs here. So notice that I can kind of keep opening these up and because I'm on Windows, it's creating a new PowerShell tab. If you're on Mac or Linux, for example, you're going to have kind of that Unix, you know, bash environment where you're able to well write code as well as to run commands. So the interesting thing that I like about this is that you can actually have multiple tabs open at the same time. You can manage them like multiple kind of conversations or agents running at the same time. And I'll show you how that works later on. All right. Now, in terms of navigating here, opening up projects, files, etc., It's a little bit different than your traditional editor. So, you'll notice in the middle of the screen that we have three buttons. Create new project, open repository, and clone repository. Now, this is referencing Git repositories, which we're going to talk about later in the video, which is like version control. You don't need to be working inside of Git, but you get a significantly better experience if you are. Now, in terms of kind of navigating this editor and going between different files and folders, this works by default just like a terminal. So right now I can actually type inside of here pwd. This stands for print working directory and it's going to tell me that I'm currently inside of users/ user. Now you also can see that if you click on this little folder right here where it shows you your current directory and you can change into a different directory if you want to work there. So for example I could go to my desktop. It's going to change into my desktop and now I'm working inside of the desktop folder. So if I ask it to create a new file, for example, or make a new folder, it's going to do that on my desktop. So if you're familiar with terminal commands and kind of navigating a command line, it works exactly the same way. You can use commands like cd, right? And I can cd into some folder and kind of tab through the options that I have here and see them all showing up. I also can go back into the parent directory by typing something like cd dot dot. And now it brings me back to the root directory. And then same thing, I can just manually kind of choose here what directory I want to go inside of. So let's go back to the desktop and you see that it brings me there. All right. So just first thing to keep in mind works exactly like a normal terminal. You can change directories and you can see kind of where your current project is and where you're going to be working. Now when you're working with Warp I recommend that you create a new folder where you're going to put your project or whatever you're currently working on. So in my case, what I'm going to do is I'm going to type mk dur which stands for make directory and then I'm going to put a name of a folder and I'm just going to call this warp test. Like so. Now, when I do that, it's going to create a new folder for me. This is a standard command you can run in pretty much any terminal. And I'm going to type cd and then warp test. And this is going to cd or change me into desktop/warp test. So now when I start using the AI, which we'll see in a second, everything's going to happen inside of this folder. And again, we can verify that by looking here, and it shows us where we currently live. Now, if for some reason you didn't know these commands, what you can do is you can change into this agent mode. Now, this is where we start talking about the AI component. Inside of this editor, you have the terminal mode, which is this button right here, which you can toggle. You have the agent mode, or if you don't have either of these toggled, you can type anything that you want, and it will automatically detect whether this is a command, something that can be ran in a standard terminal, or an AI request. So, for example, I can tell it make me a new directory for my project, and change into it. Right? Okay. You could also say folder, whatever. When I do this, it's automatically detected that this is agent mode because I'm not running a command. It's simply saying, okay, this is a request that it wants me to do. And when I hit enter, it can go ahead and generate those commands for me. So, this is the thing that I really like about Warp is that not only can it write code, it can actually generate commands and execute them. So, you'll see that it's coming up with a little bit of a plan here. We can see that running in the background. And then what it's going to do is create the directory and set it. So, it says we're generating a command. It's used PowerShell to do that. and then change the directory into my project. And you can see here if we look, we're now inside of my project. And I'm going to show you how we can view this even more in depth in just one second. So at this point, hopefully you're getting a hang of kind of how to navigate things here. Again, it's like a terminal. You can change your directories, you can do this visually, you can do it with commands, or you can simply ask the agent to do it for you. The important thing to note here is that we have this terminal mode, right? Where we can run a command, something like ls, for example, which tells us the output of a directory. In this case, there's nothing here. We can change it into agent mode and we can ask it something that we want to get an AI response or actions from. There's a bunch of other stuff that we'll go over later. So again, terminal mode, agent mode, or you can just type something when you have either neither selected sorry and it automatically detects that. Few other things to note. If you want to make a new kind of conversation or new pane here, you can make a new tab. If you click on this little down arrow here, you'll see the ability to change the type. So I can make this a buntu. For example, I have something called WSL on Windows. We can just open a new tab. So I can do that here. I can actually rightclick on this tab. I can rename it, for example, and call it, you know, new tab if I want to have that organized, right? I can close all of the other tabs. I can close this tab. I can move it to the left. Can kind of just drag it around as you would assume. Um, and there's a bunch of other stuff you can do there in terms of kind of the navigation. All right. Now, let's go back to this. From here, you'll notice that because we've started typing and interfacing with the agent, we now see this little pink kind of arrow here. If you click this, it allows us to create new conversations or view the conversation history with the current model. The way this works is that maybe you're talking for a long time, you want to kind of reset the model and you don't want it to remember everything that you previously did so that it doesn't maybe get something wrong or use false context. You can just make a new conversation and then start kind of fresh from there. You also can go back, you can view the history of those conversations and then again kind of restart them or use them as you need. And as I mentioned, you can have multiple tabs going here with multiple agents kind of doing multiple things at once, which we're going to look at in a second. So, a few last quick features to go over in terms of navigation and kind of generally using the tool. Then, let's get more into the agents, writing prompts, all of that stuff, which is more exciting. So, in this tool, just like in something like VS Code, you have a uh keyboard shortcut, sorry, which is commandshiftp or control shiftp, and that's going to open up the command pallet. Now this command pallet allows you to just type things essentially and search for different commands or actions that you can run. So keep that in mind. For example, we can type something like prompts and then it shows us all the things we can do like create a new prompt. We can do something like you know MCP and it shows us we can open a new MCP server for example. It also shows me my previous conversation. So this is quite useful especially if you're searching for a particular action. Now also if you go here to the kind of settings menu you'll see there's something that says keyboard shortcuts. From here, if you open that up, you'll be able to view all of the shortcuts and change any of them. I usually recommend just reading through the keyboard shortcuts because you'll see a lot of stuff that you can do that you probably weren't aware of. You don't necessarily need to use the shortcut, but it will give you kind of an exhaustive list of features that exist inside of this tool. And then, of course, you can change them if you want. And there's a lot of stuff that you can mess with here. Okay, so that's it for that. Let's get into the AI stuff. So, we're inside of this new directory, my project, right? And the first thing you're probably going to want to be aware of is this model toggle. So here you have a lot of different AI models that you can utilize. Some of them are more powerful than others. They may take a little bit longer to run. And you have the automatic mode which for absolute beginners is what I would suggest just always toggling on. Now you can also change to a specific model. For example, these new cla models are very good at coding. Same with the GPT models. And you have, for example, low reasoning, medium reasoning, high reasoning. And the more complex the task is that you're performing, the higher level of reasoning that you want to go to. Now, again, when you use these really high-end models with high reasoning, they do take much longer to execute and they can be more expensive in terms of the credits that that you're using. Sorry. So, generally, I would recommend using kind of the worst model that you can get away with until you really need to step up to another one because sometimes you just don't need such highle performance and it's not efficient essentially to use that. So, for now, let's leave it on auto and let's start getting it to kind of create a mini coding project for us. And we'll kind of go through some of the features with a little bit of an example. So, one thing that I like to do a lot is make websites, right? So, let's try to get it to make us kind of a basic website. I don't have a super great idea for it, but maybe we'll try to generate like a blog or something. So, what I'm actually going to do is I'm going to toggle this voice input here because I usually prefer to give my prompts by voice rather than actually typing it out. I'm going to kind of speak my thought process and ask Warp to come up with a little bit of a plan and then we'll start generating some code and kind of get into all of the coding features. So, I just used the voice mode here and you can see that I've generated a fairly comprehensive prompt where I've told this that I essentially want to make kind of like a Reddit clone where users can like posts, comment on them, etc. And for the purpose of the tutorial, I'm not going to go too in-depth in the planning phase of things. But generally speaking, whenever you are using AI to generate code, you want to be extremely specific, extremely precise in what you want it to do. And you want to have already made a lot of the big decisions about your application to avoid this kind of going wrong. So in my case, I've told this directly that I want to use Python, fast API, and React. That's kind of the text stack that I want to use. Now, I've intentionally not included a database. I haven't talked about any UI library or things that I want to use on the front end exactly. If you don't know what that means, don't worry. But the point is that this is still a little bit vague and I don't know exactly what the output of this is going to be. So I usually recommend whether you use this tool or another AI model, kind of dump your thought process on what you want to build into an AI, ask it to audit the plan that you've come up with and make it a lot more detailed and ask you questions about it so that you can be a lot more clear. Imagine you had hired me as a developer. I'm going to ask you a bunch of questions to make sure that I know what you want before I start building. You should do the same thing with AI. Make sure that you really write the plan out very detailed and that you've made some of the big decisions like what programming language do you want to use? How do you want it to look? How do you want it to feel? Who is this application designed for? Now, if you don't know the answers to those questions, you can consult these models and say, "Hey, I want to build this. What's the best stack to use for this? What programming language should I use? Explain it to me like I'm 3 years old because I don't know how to code." So, I'm just trying to give you that insight here. In my case, I already know how to program, so I know what these decisions should be. If you don't, spend a lot more time here crafting this carefully because it's a lot easier to build something when you know what you want. If you don't know what you want, you're going to see these tools really steer you in a lot of wild directions, and it can be very difficult to make progress. So, I'm going to go ahead and press enter here, and we're going to see that it's telling me, uh, you know, this job is quite complex. Would you like to proceed with a plan or not? Now, I always recommend proceeding with a plan. So we can create a plan with 03. Now this is what's called the planning model inside of warp. And this is something that you can actually change. So just so you have some context here, the way that these tools typically work is that they use a lower tier model, something that's a little bit cheaper like 03 that's fairly fast to generate a plan and then that plan gets broken into smaller steps and gets handed to a more complex AI model which is capable of actually writing the code and kind of executing those different steps. It's pretty cool how they have this set up, but I want to show you that this planning model right here, you can actually change it. So, by default, it's 03. But if we go here to our settings, so let's open that up. We can actually go to code or let me try to find where it is. I believe it's in AI, actually. And if we scroll down, we see that we have agents and we have these settings that we can modify. So, what I'm going to do is press edit. And you'll see that we have base model. So, we can choose that and the planning model. So, we can change that to whatever we want. Again, if we want something more complex, go with GBT5, for example. And you can see it modifies it. Now, you're also going to see that there's these permissions down here. So, by default, when you use this tool, it's not going to automatically create files for you or automatically delete something on your system, it's going to ask you for permission in order to do that. Now, if you don't want it to ask you for permission for that, sorry, you can change these settings. So, for example, you know, apply code differences. I always allow that because I want the agent to be able to make changes without me constantly pressing yes, yes, yes, yes, yes. Read files. Of course, it should be able to read the files, right? Create plans. Okay, agent decides, right? Or always ask me to make a plan. Don't ask me. You can mess with all of these settings and then execute commands. This one, I would probably, you know, lean towards always ask where it can execute a command that maybe deletes something or runs a Docker container or spins up a live preview of your application. It can do that if you let it do that. But the settings are all with you and you have complete control. You're also going to see this command deny list. You don't have to know what all of these are. A lot of them by default are provided um in warp. It essentially makes it so that it can't do something that's extremely dangerous like deleting everything in the current directory, right? Or changing the SSH keys or just things that the agent shouldn't be able to do, you can put that in here. If you really want to make sure it doesn't run a specific command, you can put this in the deny list so it won't do that. Okay. Anyways, let's go back here. Let's go ahead and create the plan with 03. And I'll be back once that plan is finished and it starts generating some code. So it actually executed very fast here. And you can see all of the commands that it's automatically running for me. And I can actually press into these kind of view the command that it ran. So it checked what version of Python I had for example. Checked what version of UV I had which is a package manager. Checked my node version, my npm version, all this kind of stuff, right? And it's walking me through what it's doing. So I can click into all of the details and view that. I can copy different snippets here. Right? have a lot of settings and things that I can go through. And you'll notice now that it's actually asking me a bunch of questions and things that I didn't specify in my plan. So, I'm going to go ahead and answer these. Again, I'm going to use the voice mode. Keep in mind, you also could use an image. For example, if you wanted to create a clone of some website, you can pass an image directly here and say, I want it to look like this. Now, let's answer these questions. So, it says database preference. What database would you like to use? Let's go one, the simplest one possible. Maybe I don't know what the difference is. you know SQL light postgress SQL maybe I don't know so I'm going to tell it use the simplest one possible for two authentication do you want to have user authentication or just core Reddit features I'm going to say yes I need O three project structure would you prefer monor repo setup I'm going to say I don't know you decide because again I might not know the answer to this maybe I want to research it before I answer this question for styling um I'm going to say keep it simple we will style it later and for five. Nothing for now, but design the app so it can support these features. Okay. Later. Awesome. Again, I'm trying to intentionally act like I don't really know what I'm doing. So, it's a little bit more relatable for you. I should answer these questions in a better way, but I don't want to assume that you would know how to answer these questions. So, let's go ahead and press enter. And let's see here if it can kind of continue and start actually writing some code and building out this project for us. All right, so the plan has been finished here. You can see a quick description. And one thing I want you to notice here is that we see this kind of orange square. Now, this is indicating to you that the agent is waiting for you to take some type of action. So you have a lot of different color codes. You'll see them throughout the video. For example, if you have purple, that means it's currently running. If you have orange like this, it means that you need to do something. And you'll notice that it's this very long file. I mean, realistically, you're not going to understand it if you don't know how to code, right? I could read through this and, you know, be more granular in terms of what I want it to do. But what I'm going to go with is I'm just going to go ahead and press execute. It's going to start um what do you call it? Executing the plan. Now, I can also refine this, right, by asking a follow-up. For example, I'm going to say, you know, plan is good because now that I've done that, I have to do this. So, I'm going to say plan is good. Okay? And we'll kind of wait for it to reply and go ahead. You also could have edited directly. So you could have gone in this file and changed it or just pressed execute or enter and it would have gone ahead and ran. So I'm going to say the plan is good. It should go ahead and start executing this now and generating a lot of code. Now keep in mind that generally speaking here you don't want this to do a massive amount of stuff at once. Even though it can, which is about to right now for the purpose of this tutorial, the smaller, more incremental changes that you get it to make, the better performance you're going to have and the easier you're going to be able to test things. What you'll notice about these types of AI tools is that while they're extremely powerful and they can create really interesting applications, it's hard for you to know if it's actually doing what you want, if you ask it to make massive changes because it's very difficult to test all of that functionality. So the smaller changes you ask for at once, the better. When you're starting out, you can get it to do a lot because it's building the whole application does require a lot of upfront work. But then later when you're adding features, for example, don't try to add five features at once. Just add one feature. Add a small feature. Test it. Go from there. This, I promise you, will actually give you huge efficiency gains rather than just trusting it to make this massive app that you can't actually validate is working the way that you want. So, anyways, what it's doing right now is it's generating everything, right? Because the plan is good. It's going to take a second. If for some reason we wanted to stop this, we could press the button here, stop, or we could fast forward, and this will actually auto approve all of the actions for us. So, if we didn't have those settings where it just automatically goes and executes these, we could press this and it would just make sure that anything it wants to do in here, it's not waiting for our action, you know, we could go away. We could do something else while it's generating this code. And I'll just quickly show you because I think this is a good kind of mention at this point, right? Like this is already running. You can see it's kind of in purple mode. I could go here now and I could run another agent at the exact same time. We're going to look at that more later, but kind of an interesting component here of Vorp is that you do have these multiple features and you can run these kind of what I like to call parallel agents. Okay, so it's running right now and I just want to show you that it's kind of created these tasks for itself. Notice there's a lot because I asked it to do a lot of stuff and it's going to go step by step here and generate all of these tasks and you can actually view the uh what do you call it? Progress here directly inside of this view. This is actually pretty new. We haven't seen this in warp before, but it shows all of the tasks and then again it kind of shows all of them here and we'll check them off and go through them. Now, at any point if you want, you can stop this, you can click in, you can actually view the output of the commands, for example, that it's running. You'll notice in my case, it's actually referencing something called a rule that I've created previously, which we'll talk about in a minute, which is forcing it to behave in a certain way, which is kind of what I want. Anyways, it will take some time for this to execute. In the meantime, like I said, you can run another agent or you can just sit back, go on TikTok, you know, wait for it to give you the output, whatever you want. Generally speaking, again, the smaller changes the better. In this case, it's going to do a lot, and we'll kind of test it out and see if it works once this is done. So, this has been running for a while, and I just want to show you something that will happen sometimes when it's running a lot of commands for you. So, notice here that it's kind of paused, right? And we have this yellow indicating again like there's some action from us, or at least it's in the process of running this command. Now, see how it actually says here, okay, to proceed. And then there's a uh input which is why right yes so sometimes you do actually need to execute this command or maybe even stop the command. So one thing you can always do if you want to escape this command if it's like phrasing your kind of output is you can hittrl c on your keyboard. So control and c you hit that that will automatically exit the command but you have to use that exact shortcut. Now you also can just type y in this case right or enter or something to get it to continue. So you just do the input it's looking for. So in this case, Y. So I do Y, right? And now it's going to ask me a few questions. Use roll down V. I'm going to go no. Uh, you know, install with mpm and start now. Let's go. Yes. And then you can see that it's kind of executing this and running. Again, if you get stuck and the command isn't doing anything and it's been a second, you can exit it with control C. So you can continue and the agent will automatically be able to see the output of that command and adjust to it. Okay, so this just finished executing. Now you can see we have the green check mark because it's finished this task. And notice that it's actually asking us if it wants to continue because it's done a ton of stuff here. And it still has this conversation history where we're like, we need to keep going with the rest of the tasks here and create all of these other things that were generated in the plan. However, I want to take a pause for a second and explain to you some important features essentially you should be aware of when you're generating this amount of code. So, first of all, as you're probably aware, you can add context directly into your prompt if you want to ask about a specific file. And speaking of files, at this point, you probably want to be able to view them, right? Like we just did a bunch of stuff and I don't really know what's happening in my project or the files that were created because I can't currently see them. So, as soon as you start kind of getting into a project here, what warp is going to do is it's going to initialize git for you. Now, if it doesn't initialize git or version control, you can simply tell it initialize git. Create a git repo for me. Get me set up with version control. Right? You can just tell the agent to do that. Now, when it does that, you're going to notice the UI changes a little bit. We have this now, which tells us what branch we are on for Git and GitHub. I'm not going to really teach you what branching means, but essentially, you can have different branches which have different versions of your project. The main branch is the standard one that in most cases here you will work on. You have this diff view, which will allow you to view all of the code diffs. This is called the code review pane that have actually been made and all of the files that have been touched or changed. In this case, everything that you see essentially is a creation or an addition because it's added all of these new files and you can look through all of them, right? And actually see what's going on if you want to do that. You can notice some of the files are empty and view, you know, full screen, all of this kind of stuff. Again, this is called the code review pane, which is quite useful to see what it actually changed. And then what you can also do is you can see these three buttons now appear. So you have this button that says view changes. That toggles the code review pane. Over here you have search which allows you to search for different files inside of your project and you have this which is the project explorer. Now when you press that button again I know it's very small here it's going to open up the project view and you'll be able to expand this and just like a normal editor you can view all of the code right so let me close this pane and we can view the code on the right hand side here and I can just directly go inside of here and start making changes. So at this point, right, we could tell it make this change, fix this thing, I want to reject this file, it doesn't make sense, right? Or we can just tell it to continue. So that's kind of how getting GitHub works. Now, what I'm going to recommend is that when you make a major number of changes here, like in our case, we've done, you know, a significant amount of work is that we do something called committing the changes. Now, in git, there's some very basic terms you can be aware of. Okay, we have something called a commit. A commit is essentially a checkpoint of the current status or kind of stage of your project. If you make a commit, you can think of it like saving the project into a po kind of a point in time that you could roll back to if you needed to. So what you do to make a commit is honestly I'm just going to tell you this just tell the agent make a new git commit. Okay? You can run a command. I'm not even going to bother teaching it to you because at this point you can just ask the agent to do it. Go ahead and say make a new git commit. And what you're telling it is like save the current project and checkpoint it. Now to be clear, the project is always being saved in terms of the file, right? Like the file is there. However, if I make a change to the file, I'm not able to track what that change is unless I'm using something called version control, which is Git, okay, Git or GitHub. So when I make a lot of changes in my project, I want to checkpoint them or save them. So in case the AI model messes stuff up in the future or it deletes a file or it does something crazy and breaks my code, I can tell it, hey, go back to the previous commit, go back to the previous save. And that will save you a lot. So again, Warp will do this automatically for you. However, I suggest that when you make a lot of changes, again, you manually tell it, hey, save this, you know, save this change, make a commit for me, so that it automatically does that. Again, it'll do it, right? But you just tell it manually like, hey, make the commit. It'll save it. And then you'll be able to see all of the changes since that last change. So now notice that when I look at this kind of UI here, it doesn't say there's these 4,000 changes. And if I go to the code review pane, there's nothing here because we just saved all of the changes that were made. And I'm just going to not save that. Like that. Okay. So now I'm going to continue working. And what I'll be able to do now because I've made this save is see all of the changes that are made after this save, which is very useful to be able to review all of the code. Right? So, I'm just going to tell it continue because it's asking me, do you want should I keep doing this essentially continue the project. Okay. And it's going to go ahead and continue the rest of the tasks. All right. So, it just finished the next set of changes here. And again, you can see now that it's showing me in this code review, which I can open up here, all of the changes that it's made. So, I can actually directly go inside of here. Again, I can change stuff if I want to make sure that it all looks good. And I just want to quickly show you that let's say you look at something and it's like totally off to you, right? especially if it's making smaller changes. So, let's go to something that's a bit smaller. I just want to find files that are not massive maybe. Um, okay. Here, for example, right? And it says like post detail page. And maybe, you know, you could just change this yourself to say like whatever you want, right? But I don't want to do that. What I can do is I can add this diff. It's called a diff. It's a code change to my context directly inside of my prompt. So, I can actually press this here. So, look, it says revert, right? This means go back, change it. Or I can say add diff hunk as context. When I do that, it's inside of here. And then I'm going to say change this to, you know, say post detail component, right? Or whatever. I'm not actually going to run this cuz I don't want it to do that. But the point is I can actually take all of the changes directly reference them inside of my prompt. And now it's going to know, okay, I'm going to go to this exact change. And you can be very targeted in what you're doing. Now, as well as that, you can also press this little at symbol. And from here you can reference, you know, different blocks, code, workflows, notes, for example, files and folders. Like I can find what I'm looking for here. There's a lot of files. Now, in this case, it's the post detail page. So, I'll type, you know, post detail, right? And I can just reference this exact page. And then I can say what I want it to do or fix this. There's a bug or whatever. Just showing you that that exists. Now, anyways, what it's asking me here is, you know, what do you want to do? I want to test this before I save this change. I actually want to see what my application looks like. So, I'm going to say run the app and explain to me how to test it and view it. Again, like maybe you're a beginner, you don't understand how to do this. So, how do I actually view my application? Like, you wrote all this code. I want to see what it looks like. So, let's go ahead and press enter. And hopefully, it will run the servers for me, which again is what I like about warp is that it runs these terminal commands automatically. And it's going to say, okay, I'm generating this, you know, backend server. And let's see if it does the other one as well. Okay, so it's actually opened up a new CLI interface for me. That's great. And then it's running the front end and it gave me an error here. This is actually an error specific to my machine because I have a really weird setup for my npm. So I'll fix this manually and then we'll be back. Okay, so I can see my app is actually running now. It says it's on port 513. I'm just going to open this up and let's see. And you can see that we kind of get this Reddit clone right now. It looks a little bit messed up, but I can try to register maybe and see if this works. So let's do that. All right. So I tried to register here and it didn't didn't work. Okay. Again, that's going to happen. and you're going to run into bugs and errors. So, what I'm going to do is I'm going to explain to Warp what the problem was when I tried to register and what happened and I'm going to give it the output of this command. So, you can see it's running this backend server, right? And I have all this crap and I don't want to read this. So, I'm just going to copy it. Okay. And I'm going to go to warp. I'm going to shut this down. So, I'm going to hit control C because that's a server running that I don't want to be running right now. And I'm going to say the registration failed. It just said failed. Okay. And I'm also going to just stop this for right now. So it stops doing this task. The registration failed. It just said failed. So I'm saying the registration failed. It just said failed when I tried to make a new account. And then I'm going to say this and this is the backend log. Fix it. Okay. Now the more detail obviously that you give the better. So I'm just going to give it okay. This is like what happened in my backend server right when it was running. This is the problem. Go ahead and fix it. Press enter. And let's see if it can make those changes. Then again, we'll test this one more time. Now, while this is running, I also want to mention, right, like if we look at this, it looks pretty messed up, right? Like it looks like this kind of mobile first, you know, UI. So, what I'm going to do is I'm going to take a photo of it using snipping tool. I'm just going to copy that to my clipboard and I'm going to kind of get ready for my next prompt where what I'm going to do is just paste this in here and essentially tell it, hey, like, you know, what is this? It looks bad. you know, fix the UI and see if it can make those changes. Now, again, in this case, we're kind of in a position where because of how it's running the servers, it's running this server right now that is kind of hanging. When I say hanging, it means it's not doing anything because we're not running the front end as well. So, what I'm going to do is I'm just going to close this by hitting C. It's going to say, oh, you know, this command failed, whatever. But it should eventually figure out, hey, you know, like I need to run this server um what do you call it properly like a background process as it just did so that I'm actually able to run the front end and then view the application. Don't worry about it too much, but essentially if it's like just stalling and not doing anything, you just quit it and it should automatically figure it out like it just did. So now it's running again. So I'm going to go back to my front end here and I'm going to just reload and let me try to make an account. Okay, and now the registration actually worked this time. You can see we're kind of brought to this page. Let's try to make a post. You know, hello world. Whatever. Hello, what is up? Okay, let's go here and go create post. And then boom, we got the post. And then I mean doesn't really have anything else. We have home. We have this. I can like upvote, downvote, which is kind of cool. Can go to the homepage, can log out. And overall, honestly, that's working like pretty well considering that was just a few prompts that I gave it, right? So, same thing. I'm just going to actually I'll take the photo again cuz I think I lost it from my clipboard. So, let's copy that. Let's paste it. And I just uh did command V to paste it in here. You also can just attach it from there. I'm going to say make this take up the full width. The UI is pretty messed up. And before that, save these changes with git. So we have kind of a working version, you know, saved before we make all of the changes. Again, I'm not prompting, you know, as an expert right here. I'm just trying to be pragmatic with how you guys would likely do it, which is probably writing it some way like that. Uh so you can see what you can actually get out of this tool if you are not, you know, an expert software engineer that's been coding for 10 plus years. Okay. So I tried to make some changes to the front end that didn't really do what I wanted and we can see there's a few changes here, right? So again, if I click it and I kind of click here, we can see one file. We made some changes to this style file that just didn't really do what I want. So what I can do is I can revert these, you know, manually, right? by kind of clicking on all these or I could actually go to the agent and just tell it hey like you know revert all of these changes I don't want them and then it would go back to the previous commit. Now in my case again I just reverting all of them manually. So you can see kind of going like this then I will save the file and then kind of close out of this and we're good to go and we can just continue from there. Now, what I want to show you next is actually manually changing some of the code and kind of how you do that because sometimes you do just want to go in the code and make changes without asking the model. So, for example, maybe I go into app.jsx here, right? I just clicked it from the sidebar and maybe I want to change, you know, the name of one of these routes. So, rather than log in, I want to call it signin. Well, again, like I can literally just go here and make the change directly inside of the editor and then I can save it with S and you'll get this file saved. One thing to note is that if you do make a change here, you'll see there's this little kind of gray button that pops up indicating that the file is unsaved and has changes. So, I just wanted to show you that that exists there so that you can see when you've actually made a change inside of a particular file. Now, as you see, we can kind of navigate, you know, view the panes and everything like that. And then, like I was mentioning before, right, like you can go here, you can search for stuff, etc. if you want to find a particular file. Okay, so let's continue. And I want to talk about something called project rules. So when you start creating some larger projects, especially as you start making more progress in them, a lot of times there's specific things that you want to always do or never do. For example, in this application, I want to always use fast API. I don't want warp to suddenly change its mind and use another framework for the back end. I want to use, you know, normal JavaScript and CSS and React for the front end. I want to always use something called UV. This is a particular package manager. It's one I really like for Python. Now you can kind of tell the model, right? Always use this thing. However, if I come back to this project a few days later or I open it up on another computer, for example, it's likely going to forget a lot of those preferences that you've given. So, what you can do inside of Warp is you can create something called rules. These are things that will always be attached to the prompts that you give to Warp and it will automatically read them and make sure that it follows them for either your global workspace or for y