Advanced Vibe Coding Tutorial w/ Warp (Build & Deploy Apps)

Tech With Tim · Beginner ·🤖 AI Agents & Automation ·10mo ago

Key Takeaways

The video demonstrates advanced vibe coding using Warp, an AI tool, to build and deploy applications from scratch, covering topics such as agent settings, code generation, and deployment.

Full Transcript

In this video, I'm going to show you how to do some advanced vibe coding that involves building an entire product from scratch and then deploying it to production. That's right. I'm not just going to leave you hanging at the final step. I'm going to show you how we actually get this live using an AI tool. Now, I have done a lot of vibe coding tutorials on this channel before. However, I've been kind of guilty of not actually pushing them to production. So, I wanted to do something that is a little bit more advanced. And while this is going to be very beginner friendly, if you have absolutely no experience coding before or doing anything with AI tools, this may be a little bit faster paced than you might like. So, with that said, if you struggle with this, I have a few other videos on my channel that talks about vibe coding for complete beginners, you can check those out. But if you've messed around with this a little bit and you've used some of the other tools, then this video is going to be really valuable and I recommend sticking around. With that said, let me hop over to the computer. Let me demonstrate to you what tool we're going to be using, why we're going to use that, and kind of what we'll go through in the video. So, about one month ago, I made a video on a tool called Warp.dev. Now, this is much different than all of the other AI code editors that you've heard of because it's not just an AI code editor. In fact, it's actually an AI terminal. Now, they're calling it here the Aentic development environment, but it takes place in a terminal. So something like a command prompt or terminal on your Mac, not in this fullyfledged kind of interface that's designed specifically for coding. Now, I'm going to demonstrate why they decided to go with this decision because the user interface is much different than a lot of other tools you may have used in the past. But personally, I really like it. You guys really liked it when I made that video. So Warp and I decided to team up again. and we're going to be doing a series of videos going over this tool, discussing how to use it most effectively and overall just best practices when it comes to doing AI agentic development. So anyways, first step in this video is going to be to download this tool. It is free. You do not need to pay for it. Of course, they do have pricing plans like all of the other tools that are out there, but if you go to this website, which I'll leave in the description, you can just go to download. You can get it for Mac, Linux, or Windows as you see right here. In the previous video, I did it on Mac. In this video, I'm going to do it on Windows. It works pretty much the exact same. And then you're going to have to make an account and sign in. Again, you can check out the pricing if you want. Of course, you can use this for free. So, once you download this, install it, and open it up. It should look something like this. Now, this is going to be a little bit different for you if you've never worked in a terminal environment or if you've ever only ever worked, sorry, in something like a VS Code fork, which is where a lot of the other AI tools kind of live. Now, I want to discuss the user interface here specifically because it's unique and why Warp decided to go with this. So if you think of more traditional software development without the use of AI, you're writing code all the time, right? Almost all of the code that you write is generated by you or you're kind of copying and pasting it from other files. Now in that situation, it makes a lot of sense to have the entire user interface focused around writing code, navigating the code, testing it, etc. However, as we've moved into this kind of agentic world here, we've had this really fast shift. We've been using models more and more. And I know I could speak for myself where I generate 80 or 90% of my code using AI. Obviously, I review it. Sometimes I write some stuff manually, but most of the time I'm interfacing with an agent. And then once my code is finished, I need to get it to either run commands for me or I need to start setting it up for deployment. And that's an environment where I need to use the terminal. Right now, the terminal and the agent in most of these tools are disconnected and they don't really work in tandem. And again just the user interface is really set up mostly for writing code as opposed to interfacing with the agent. So warp has said we believe that software development is really moving towards a world where it's much more natural language where you don't really need to dive into the code as much. We're not quite there yet but we're getting there very fast. So they designed a tool that is much more focused around working with the AI agents and being integrated in the terminal where you need to do a lot of the later steps to actually get this to deployment. So hopefully that makes sense. That's the rationale. You can agree or disagree, but personally, I really like using this tool and I like the fact that I have this deep integration with my AI model in an environment where I'm working quite frequently, especially once the project is up and running. Anyways, you're going to see the benefit here. Let's start writing some code. Let's start using this. Let me run you through it. So, once you open up Warp, you should just have something that looks like this. I'm going to go over the main buttons and then we'll start building something out. Again, I'm trying to make this slow and really give you as much information as possible. So, bear with me or fast forward later in the video if you don't like my long explanations. Now, you're going to notice here that we have a different modes, okay, for warp. So, we have this auto mode. And this auto mode means that it's going to detect whether you're trying to run a command or whether you're trying to get the AI agent to do something for you. So, the benefit of this being a terminal is that I can run commands. So I can do something like pwd which stands for print working directory and that's going to execute the command and give me the result. I can type something like ls where it's going to print out all of my different files right I can cd into a particular directory and the interesting part of warp is that because it has AI built in here it can give me suggestions for all of these different commands. Okay now that's when we're using this in auto mode. So let me just open up another tab here so you can see what it looks like when it's in auto mode. just detects, you know, whether we're doing something like saying hello world where it's going to generate some output for us or where we're running a command. Now, what we can do is we can change this over to terminal mode. And when we do this, it's only going to allow us to run commands so we don't get any confusion. So here, if I try to type something like hello world, now I'm going to get an error because it's just running in this command mode or terminal mode, not in this agent mode. And then alternatively, we have the agent mode which is the next button right here where it's not going to execute any commands for us and it's just going to give us an AI response based on what we say. So if I say, you know, CD desktop here, it's not actually going to CD into the desktop or try to run that as a command. It's going to use that as an AI prompt. All right. Now, a few other things that you need to know about the user interface. So first, it has voice input builtin. So if you press this, let me click it right here. Hey, can you hear what I'm saying right now? Is this working? Okay. Okay. And then you can see that it generates the voice and gives it to us right here. So, a lot of times I prefer just to use my voice rather than actually typing it out. I know that's like ultimate lazy mode, but I find it can give way better prompts that are much more detailed. So, just be aware you can do that and I definitely would suggest that you do. You can also add images. So, if you want to build something that's like a clone of something else or you want to point out an error or something that's going wrong, you can just take a screenshot and throw it in there, which I definitely recommend doing. And then, of course, you can choose your model here. You can just go with auto, which right now is clawed for sonnet. Or you can pick between the various other models if for some reason you have a preference or you know that one of these is going to perform better for your particular task. If you're a beginner, just stick with the auto model. You don't really need to play with this. And if you're really not getting any good results from it, you can switch to something else and run the same prompt and see if that works. Now, there's a bunch of other stuff to go over. We'll do that slowly as we start building some things out. But another important concept here is that you can create multiple tabs. So if you go up here, I can keep opening these different shells. It's what they're referred to as, but really in warp kind of tabs. And I can have multiple different conversations or commands or whatever going on at the same time. And the other advantage of warp here is that I can run agents in parallel. So in other tools, you can usually only execute one command at a time with the agent or one prompt. In this, I can use it multiple times, right? So, if I go here and I go, you know, hello world, I can really quickly switch over here and also go hello world and they can think and run at the same time. Okay? And then I can manage all of my agents from here. There's a little button here. Okay? And it's going to show you all of your currently running agents. If you see this check mark, it means it's finished. And you'll see other status marks in a minute here as uh it kind of goes through the progress. So, either it's waiting on you, you need to give it something uh or it's currently loading. Okay. So, very interesting. I'm going to close these up here, but just be aware that you can do that. And you can also color code these, right? You can split them up so you can kind of organize your desktop as you see fit. Okay. So, what we're going to do is open up a new conversation here, and we're going to start building something because that's the whole point of this video. All right. So, what is it that we want to build? Well, my outcome for this video is to eventually deploy something. So, I don't want to do anything insanely complex, but I do want to have something that has a front end and a backend. So, what I'm going to do is brainstorm an idea here using warp and then we're going to start building it. I would like to make something of simple to medium complexity that I could finish in about 30 minutes. I want this to be web- based. I want to have some kind of interface and some kind of backend. Can you give me a fun idea that's not going to be too complicated to build out and to eventually deploy? Okay. And then we've got the prompt. So, let's go ahead and run it. Again, we're in agent mode here. That's what it's detected that we want. And let's see what ideas it gives us. Now it says this job is quite complex. Do you want to proceed with a plan or without a plan? I'm going to proceed with a plan. So this is a relatively new feature that they've added here to warp where essentially you can use a planning model which creates a detailed plan that then the next model will follow so you get a higher quality result. So usually if it pops this up you can just go with yes and then it will start thinking through this uh kind of reasoning coming up with a plan and then giving you the ideas. Okay. So it says I'd be happy to suggest a fun web project that you can build in about 30 minutes. let me gather some context about your current development environment to make sure my suggestions align with what you have available. So, this is not something that I asked it to do. However, it's looking at all the versions of software that I currently have installed on my machine and giving me a few suggestions. Now, for you, if you don't have any software on your machine, of course, there's not going to be anything there and then it would tell you what you need to install and give you those setup steps. But for me, we'll go with something that it suggests. Okay, so I like this idea here, which is idea one, a real-time chat application. So, I'm just going to tell it, I like idea one. Can you come up with a detailed plan on how to build this? Okay. Now, the more research you do here and the better your plan is, the better result you're going to get. If you just want to build something quickly, what I'm showing you here is sufficient. But I would highly recommend kind of scrutinizing what the AI has given you. So in this case, it's giving us a suggestion for the front end, for the back end, for the various features. By the way, the front end is like the user interface, the thing you're going to see. The back end is something you don't see that handles all of the logic essentially. Okay, so I've typed this in. So let's go ahead and hit enter and let's try to generate a plan. All right, so it's come up with a plan for us here. And now at this point, we have the ability to refine this. So if I press that, you know, I can refine it and I can ask it a follow-up prompt like, can you make this more detailed, for example? Okay. So, let's do that. Make this more detailed. I could have obviously executed it, rejected it, etc. So, let's see what it does now with the follow-up. All right. So, it's added a much more detailed plan. Now, at this point, I could edit this, right? And I can just go in here and I can actually start, you know, adding characters or modifying the code or whatever it's generated here if I want. In this case, I'm just going to go ahead and execute it. And you'll notice if we look at our agents now, we get kind of this yellow square. Now, what that tells us is that this agent is currently waiting on us to take some action. So, if you're going to run multiple agents at the same time, which we'll do later on, then you're going to be able to track them up here and quickly kind of check the status of them because sometimes you need to allow the agent to do something. So, let's go ahead and execute this plan here and let's see what happens. Okay, so the agent is going ahead and doing a bunch of stuff, but I realize that I have a setting enabled here that you may not have enabled, which is allowing the agent to just kind of go crazy and do all of these things like create a new folder for me, CD into that folder, check the UV command, etc., etc. So, you see it's kind of executing all of these things and it's using a combination of commands as well as generating code, which it will do in a second. Now, if you want your agent to behave like that, you can click on your little profile here, or on Mac, you can go to kind of the bar at the top. You can go to settings. You can go to AI, and you can check where it says agents right here. Now, on this page, you're able to change the permissions that your agent has access to. So, what I've done is I've just always allowed my agent to do these particular tasks. So, by default, this always allow commands thing is always ask or agent decides. Now, if it's always ask, that means that it's going to ask you before it executes a command. So, what I did is I changed this to always allow so that we know or so that we allow it to just run a command. And then beneath here, we put a bunch of commands that we don't want this to be able to run, which are potentially dangerous and can mess something up on our system. And a bunch of these are included by default with uh what do you call it? Warp. Now, same thing for reading files. I just always allow it to do that. And for the plan, it says agent decides. So, it chooses the safest path. it either asks us or it goes ahead and does that which is kind of how I've uh suggested that. Now you can choose the base model. There's a bunch of other stuff that you can do here in terms of the settings but the important thing is probably enabling this kind of autonomous execution so that things go a lot faster. Okay, so we've gone back here and you can see now that it says okay perfect. I've successfully edited the app main.py file with a complete fast API backend implementation that includes the following. So now maybe I actually want to view this code. So I'm going to say how can I view the code because I want to see kind of what that looks like and let's see what it does for us. Okay, so it's given me a few suggestions on ways to view the code. Now of course I also can actually just view this in warp. So I can type ls which stands for list. Okay, and then it's going to show me all of these different directories and files. So I could go into this app directory for example by typing cd and then app. Okay, I can type ls again. You can see we have a main.py pi file and then I can just open this main.py file. So you can see it says open and warp. So if I do that, it opens the file directly for me and then I can actually see all of the code that's inside of here and I can modify it if I want. Now mostly if you're vibe coding, you probably don't need to do this, which is why it's not taking up a bunch of the screen by default like it does in other editors, but of course you can open it. Okay, so at this point I'm going to go back to the root directory and I'm just going to ask it to run the application for me so that I can test it. And again, this is the advantage of kind of being in the terminal. We say, "Can you run this app for me so I can test it? Tell me how to view it." Okay. And let's go ahead and see the execution. Okay. So, it looks like the application is running now. We can kind of see the output down here from the final command. But I may not know what this actually means or how you even access this, you know, thing that's running, especially if I'm a beginner. So, if that's the case, if you go to the right hand side here, there's a few buttons. So, for example, you can open an inline AI editor and ask a question. You can save this as a workflow. I'm not going to get into that right now. Or you can press these three dots and you can copy the output of this or anything else that you want from here. And we can go and open a new window. From here, I can just go how do I access this app. Okay. And then I can paste that. For some reason, it's detecting shell. So, I'll just change it over to agent mode. And then press enter. And let's see what it tells us. Okay. Okay. So, it pretty much just tells me I can go to this in my browser. So, let me open that up and see if it's working. Okay. And when I open this, I get an internal server error. So, that's going to happen sometimes. So, all I'm going to do is I'm just going to copy that. I'm going to go back to warp here. I'm going to kind of check this out. Okay. So, it sees that there's an error. So, what I'm going to do now is I'm just going to stop this. Okay. And now that I've stopped the server, it says I can see the server is running, but there's an issue with the template. Okay. So, it's going to now go ahead and attempt to fix this. So, it was running that as a part of this flow to test if this is working. I then kind of shut it down, right, by skipping this or stopping it. And now you can see that it's going to go ahead and attempt to make that fix. Okay, so it looks like it's running again. So, what I'm going to do is just open this up again and refresh. And okay, we got internal server error again. So, now same thing. Let's stop this and let's debug. Now, look, I'm showing this to you because this is going to happen when you're coding, no matter what tool you're using. And debugging is an important part of this. So you're going to have to be testing it. You're going to have to be going back and forth with the model, especially when you're trying to create something that is slightly complex. So let's try it again now that it says that it's fixed that. Okay, let's go here and refresh. And boom, we get a UI now. Perfect. That wasn't that bad. Okay, so let's go. Room name, I don't know, Tim 1, username Tim A. And let's join the room. And now we have a UI. I'm going to say, you know, hello world or something. And we get a message. I mean, that looks pretty good to me. And then I think we're supposed to be able to react to these, but probably only to other people's messages. So, if I open this again in another browser, uh, let's see what will happen now. So, let's go, what's the name of the room? What do we call it? Tim one. Let's go Joey. Let's join. And then we have our users. Let's go hello world. And if we go here, we can see that we have the other user. Now, it's missing the feature of being able to add like the emoji reactions, which I think is something that we wanted. So, I can ask it to add that. But for now, this looks pretty good. Says that I'm connected. And then I think if I just leave the room like this, yeah, it's going to say Joey left the room. And we get kind of this real-time communication, which is pretty impressive to me. Cool. So, let's go back here. I'm going to stop this for now and let's see what it says now. And then we can move on and kind of add that new feature. So, I'm going to ask it, can you add the emoji reactions to the messages? and let's see what it does now for the plan. Yes, we'll go ahead with the plan and see what it can do. Okay, so this is running. It's been running for a minute or two. So what I'm going to do is I'm just going to open up a new chat here actually and I'm going to start creating a plan for the deployment in parallel. So at the same time as when this code is being generated. So I'm going to say actually let's use voice mode. I have a fast API application built with Python. I want to deploy this. It just has an integrated front end with JavaScript, HTML, and CSS. What's the easiest way to do that? and can you assist me? Let's go ahead and press enter and let's see if we can get a plan here. So, let's go create plan and see what we get. And again, if we want to track the other agent, we can open up. We can see both these are running at the same time. All right. So, it's giving me a few options here. It's just using railway. So, I think I'm just going to go with that for railway. So, I'm going to say walk me through railway. Okay. And let's go with that and see what it says again while this is still running because it's doing a lot of code changes. Okay. Okay, so the other agent is still running related to the railway setup, but this one finished. So I'm just going to say, can we test this again? Okay, so that's going to run the server for me and then I can test it and just make sure the reactions are correct. Okay, so this is running. So let's go back here and refresh. Okay, let's go room and Tim and go hello world. I don't see any reaction stuff right now, but if we have another user, maybe it will be here. And let's go room one and maybe Joe and try this again and go hello world and come back here. And yeah, I don't see the reaction part. So let me just message it that and see if it can fix it. So I'm just telling it I don't see any way to add a reaction in the user interface. And let's see if it can fix that for us. Okay, now while that's happening because again I don't just want to sit here and wait. I'm going to go back over to my other agent and I see that it started setting some things up related to railway. Now, as we scroll through here, you're going to see that it's using something called Git. Okay? Now, if you've never heard of Git before, this is something that you can use to do something called version control. Now, version control allows you to store different stages of your project. So, you can, for example, checkpoint it and you can revert back to previous stages of the project if something were to go wrong. Okay, there's a lot of reasons to use Git. It also allows you to share your code with other people to deploy it more easily. So in this case, what it's done is it's set up a Git repository for us. And it's done that by running all of these Git commands. Now, I actually have an entire tutorial on Git. I'll leave it on screen right now in case you want to learn it. I would suggest learning it. Even if you are going to be vibe coding, but I'm going to show you a way that we can integrate with Git here inside of Warp that's going to require very minimal effort from us going forward. Now, right now, because we're in the terminal, we can run these git commands. And Git runs locally on our own computer and tracks the status of our project and all of the commits or saves essentially on our own machine. But we have something called a remote repository. And this is something that's hosted by GitHub which is owned by Microsoft and is in the cloud. Meaning that our deployment tool can look at that repository, other people can look at that repository and we can access it from other computers. So what we can do is inside of Warp, we can add a MCP server which allows us to connect to our GitHub account so it can then manage GitHub repositories for us. So let me show you how we do that. We're going to go to our settings. Okay, so we're going to click on our little logo, go to settings, and we're going to go and find MCP. Okay, so I got to find where that is. And here it is. It's under AI and MCP servers. So we're going to go manage MCP servers. And right here, we're going to press on add. Now, it's going to give us something that is called JSON. And in order to connect our GitHub MCP server, I'm going to show you kind of the setup. So, the page that I'm on right here is the documentation for GitHub's official MCP server. I'm not going to explain MCP too much, but essentially, it's a set of tools that can be called by our AI agent. And I'm going to show you how to set this up. Now, first step, you're going to need a GitHub account. So, if you don't already have one, you need to create one. You're also going to need to download something called Docker Desktop. Okay? You can just go to Docker Desktop or docker.com and download this for your respective operating system. Now, once you have that, we're going to go to this page, which I'll leave a link to in the description, and we're going to copy where it says GitHub. Okay? So, I just want to copy the configuration specifically for GitHub. I don't care about the servers part. I just care about GitHub. And let me make sure I get the correct number of braces here, which I think I have. So, we're going to take that now and we're going to copy that in here. Now, in case I didn't show that already, just press add. It's going to create this. Okay. We're going to replace this empty string and we're going to paste here that configuration. Okay. And we can just kind of fix the indentation a little bit like that. Doesn't really matter. Okay. So, we have GitHub and what we need now is we need this GitHub personal access token. So, I'm going to delete what's currently here and we're going to go and create a new GitHub token. This token is going to give us the ability to actually have access to our GitHub account. So, in order to do that, we're going to go to GitHub. We're going to press on our profile and we're going to go to settings. From settings, we're going to go to developer settings. We are going to go to personal access tokens and fine grained tokens. Okay. Now, what we're going to do is we're going to create a new token. and this new token. I'll just call this warp 2 because I was doing this previously as a test. We will have the no expiration. Okay. And then we can set the different repositories we want this to have access to. Now I'm just going to go all repositories here. Okay. And then I'm going to give this a certain set of permissions. Now here you're going to see there's a lot of options. What I want to do is I want to give this the ability to read and write repository. So it can create, delete, change the settings, etc. So it can make a new repository for me. Now, there's a lot of other stuff that we can allow this to do. Some of them you don't really need, but for deployments, for example, we'll give that read and write. Environments, we'll give that read and write. I'm going to see if there's anything else that we really need here. For example, pull requests, read and write. Okay. Secrets, read and write. Variables, read and write. And then workflows, read and write. Okay. And then for account permissions, this is related to your specific account. So, you can see all the different stuff here. You don't really need to give it access to anything for this. It's mostly just related to the repository. So, it's able to create a new repository, push to that repository, etc. Okay, so there's a bunch of stuff here. What I selected is pretty much everything that you're going to need, but of course, the more that you select, the more it's going to have access to. So, also give this read and write access to the commit statuses. And I think let's do actions as well. That should be good. Okay. So, now that we have that, we're going to generate this token. So, let's go down here and generate it. We're going to copy it and not leak it to anyone. And then we're going to put that inside of Warp. Okay. So, I've copied my token. I'm going to put it where this variable is. Obviously, do not share it with anyone. And then go ahead and press on save. Okay. Now, as soon as you do that, it should just show that this is running, assuming that you have Docker on your system. And then we should be able to actually access this. So, for example, I can go to my uh what do you call it? Terminal here. I can say, can you make a new remote repo for me and upload my code? And it should just know by default that it has access to all of these different tools from our MCP server. And it should attempt to call it. And you can see here it's attempting to call this MCP tool. For the tool calls, you do need to give it access to that. So I'm going to go ahead and press on run. And hopefully it will be able to do this. Okay. So you can see that it's created a new repo called real-time chat app. Okay. Okay, it's now going to check these origins. It's adding this origin for me. And now I don't really need to know anything about GitHub and it can just go ahead and automatically set this up for me. Okay, so now I'm kind of in my Railway chat, right? Because I want to actually do this deployment with Railway. So it's telling me what I need to do next. So it says we can go to Railway, sign in, make a new project, deploy from GitHub, choose this, and then deploy it. So we can go ahead and temp that. Let's wait for this to finish and then hopefully it can give me the instructions on what I need to do. Okay, so I'm actually just going to stop this because it's kind of going down this chain where it's saying, "Oh, I don't have access to railway." So I'm going to say just tell me what I need to do with railway so that I can deploy this. Okay. And then our other model, I just stopped it because it just finished and it was running the um what do you call it? Uh the application. So of course we want to test that as well. So this is going to go it's going to give me the status of what I need to do. But let's go back and make sure that the emoji component is working. So we can go, you know, room. Okay, Tim, join that room. I think we're going to have to refresh this as well. Let's go room and Joey. Okay, and then we can say hi. And if we go here now, there's this plus button, okay, that's appearing. It's a little bit off the screen, but you can see now we can add the reactions to the messages. And there you go. It's working. Okay, cool. So, I'm not going to debug that further, of course, like maybe there's some issues with it, but the point is it is working. I could go further if I want. For now, I'm going to close all this and let's go back to warp. Okay, so it's telling me what I need to do here. It says access railway dashboard. Go to your railway project. So, I've got to create a new railway account. So, let me do that quickly and see how we can set this up. Okay, so I just made a new railway account and I see that it gives me the option to deploy from a GitHub repo. So, I'm just going to press that because I also saw my model was suggesting that. And I'm going to go configure GitHub app here because it looks like it doesn't have access to the correct repos. And I'm just going to give it access to tech with Tim. So I'm going to say okay, install this in Tech with Tim. All right, install and authorize. And then hopefully it should be able to see my repos cuz before it was just seeing essentially one of my employees repos. Okay. So we're going to go create new project deploy from GitHub repo. Looks like we're in this like infinity thing now. Okay. And now I see real-time chat app which I just created. And I'm going to press this and see if we can do this deployment. Okay, so it looks like it's building that. Now I'll just go back to warp and I'll just say, okay, I deployed from a GitHub repo. It is building right now and kind of just let it know what's going on so that it has that context when we come back to it later. All right, so I can see that it's running, but I don't really know how to access this now. So I'm just going to kind of copy this, right? I'm going to go to warp. I'm going to get it to assist me and I'm going to tell it also that it says this is an unexposed service. So, oh, public networking. So, actually, maybe we can just find it right here. Access the service through public domain. So, actually, you know what? Let's not go back for a sec. Let's go generate domain. And okay, it's generated a domain for us. And then if I open this, boom. Okay, there we go. We got the chat app. So, I just needed to generate the domain, which I didn't have. So, let's test this. Now, we have room. Let's connect. Let's copy this and let's go room and Joey. And when we come in here, it says we have the joins, we have hello world. Okay. And if we come here, we see our little reaction button. I know it's kind of far away. We can react to the message, you know, what's good, etc. And then we can chat back and forth. Okay, cool. So, that application is working. It is deployed and we're good to go. All right. So, I mean, that's pretty much it. We got this deployed. Uh, now it's telling me that I can also monitor this and I need to set up railway CLI. I'm not going to go through that whole process right now because I was able to actually get this deployed. But the point is I wanted to show you that in this video we can do more than simply just generating something, right? And writing some code. We can actually deploy it. We can run all of the commands here from the terminal. If I wanted to go further, I can log into Railway and then I can actually trigger deployments from the command line, which Warp can help me do. I can connect to the MCP server. I can set up the version control and I can do something that's more than just a basic kind of dev or beginner vibe coding task using something like this. So I think guys with that said I am going to wrap up the video here. I am planning on doing more videos on warp. So if you want some more insights or you have suggestions then please do let me know and I look forward to seeing you in the next one. [Music]

Original Description

Get started with Warp: https://go.warp.dev/tim In this video, I'm going to show you how to do some advanced vibe coding that involves building an entire product from scratch, and then deploying it to production. And I'll show you how we actually get this live using an AI tool. Want to make real money with coding? I share high-signal insights on careers, monetization, and leverage in my free newsletter. Join here and get my guide How to Make Money With Coding instantly: https://techwithtim.net/newsletter 🎞 Video Resources 🎞 GitHub MCP Server: https://github.com/github/github-mcp-server Docker Desktop Download: https://www.docker.com/products/docker-desktop/ Railway: https://railway.com/ Git Tutorial: https://www.youtube.com/watch?v=DVRQoVRzMIY ⏳ Timestamps ⏳ 00:00 | Overview 00:56 | Warp Introduction 02:32 | Overall UI & Layout 04:12 | Modes & General Usage 07:00 | Multiple Agents 08:00 | Planning 11:23 | Agent/AI Settings 12:55 | Generating & Viewing Code 17:25 | Setting Up Deployment 19:15 | Version Control & Git 20:44 | Adding MCP Servers 25:25 | Handling Deployment Hashtags #Warp #AgenticAI #SoftwareEngineer
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Tech With Tim · Tech With Tim · 0 of 60

← Previous Next →
1 A* Path Finding Algorithm(Visualization)
A* Path Finding Algorithm(Visualization)
Tech With Tim
2 Python Programming Tutorial #1 - Variables and Data Types
Python Programming Tutorial #1 - Variables and Data Types
Tech With Tim
3 Python Programming Tutorial #2 - Basic Operators and Input
Python Programming Tutorial #2 - Basic Operators and Input
Tech With Tim
4 Python Programming Tutorial #3 - Conditions
Python Programming Tutorial #3 - Conditions
Tech With Tim
5 Python Programming Tutorial #4 - IF/ELIF/ELSE
Python Programming Tutorial #4 - IF/ELIF/ELSE
Tech With Tim
6 Python Programming Tutorial #5 - Chained Conditionals and Nested Statements
Python Programming Tutorial #5 - Chained Conditionals and Nested Statements
Tech With Tim
7 Python Programming Tutorial #6 - For Loops
Python Programming Tutorial #6 - For Loops
Tech With Tim
8 Python Programming Tutorial #7 - While Loops
Python Programming Tutorial #7 - While Loops
Tech With Tim
9 Python Programming Tutorial #8 - Lists and Tuples
Python Programming Tutorial #8 - Lists and Tuples
Tech With Tim
10 Python Programming Tutorial #9 - Iteration by Item (For Loops Continued...)
Python Programming Tutorial #9 - Iteration by Item (For Loops Continued...)
Tech With Tim
11 Python Programming Tutorial #10 - String Methods
Python Programming Tutorial #10 - String Methods
Tech With Tim
12 How to Overclock a NVIDIA GPU
How to Overclock a NVIDIA GPU
Tech With Tim
13 Python Programming Tutorial #11 - Slice Operator
Python Programming Tutorial #11 - Slice Operator
Tech With Tim
14 Python Programming Tutorial #12 - Functions
Python Programming Tutorial #12 - Functions
Tech With Tim
15 Python Programming Tutorial #13 - How to Read a Text File
Python Programming Tutorial #13 - How to Read a Text File
Tech With Tim
16 Python Programming Tutorial #14 - Writing to a Text File
Python Programming Tutorial #14 - Writing to a Text File
Tech With Tim
17 Python Programming Tutorial #15 - Using .count() and .find()
Python Programming Tutorial #15 - Using .count() and .find()
Tech With Tim
18 Python Programming Tutorial #16 - Introduction to Modular Programming
Python Programming Tutorial #16 - Introduction to Modular Programming
Tech With Tim
19 Python Programming Tutorial #17 - Optional Parameters
Python Programming Tutorial #17 - Optional Parameters
Tech With Tim
20 Python Programming Tutorial #18 - Try and Except (Python Error Handling)
Python Programming Tutorial #18 - Try and Except (Python Error Handling)
Tech With Tim
21 Python Programming Tutorial #19 - Global vs Local Variables
Python Programming Tutorial #19 - Global vs Local Variables
Tech With Tim
22 Python Programming Tutorial #20 - Classes and Objects
Python Programming Tutorial #20 - Classes and Objects
Tech With Tim
23 Cool VBS Script to Prank Your Friends!
Cool VBS Script to Prank Your Friends!
Tech With Tim
24 How to Overclock an AMD GPU
How to Overclock an AMD GPU
Tech With Tim
25 Best GPU'S For Mining Ethereum (2018)
Best GPU'S For Mining Ethereum (2018)
Tech With Tim
26 Recursion and Memoization Tutorial Python
Recursion and Memoization Tutorial Python
Tech With Tim
27 Ethereum Mining Rig - Hardware Guide
Ethereum Mining Rig - Hardware Guide
Tech With Tim
28 Pygame Tutorial #1 - Basic Movement and Key Presses
Pygame Tutorial #1 - Basic Movement and Key Presses
Tech With Tim
29 How to Install Pygame (Windows 8/10)
How to Install Pygame (Windows 8/10)
Tech With Tim
30 How to Trade Your Cryptocurrency (Bitcoin, Ethereum etc.) For Cash!
How to Trade Your Cryptocurrency (Bitcoin, Ethereum etc.) For Cash!
Tech With Tim
31 How to Mine Ethereum 2018 - WORKING (Super-Easy)
How to Mine Ethereum 2018 - WORKING (Super-Easy)
Tech With Tim
32 Microphone Comparison - $10 Mic vs $150 Mic (Blue Yeti USB)
Microphone Comparison - $10 Mic vs $150 Mic (Blue Yeti USB)
Tech With Tim
33 Pygame Tutorial #2 - Jumping and Boundaries
Pygame Tutorial #2 - Jumping and Boundaries
Tech With Tim
34 Pygame Tutorial #3 - Character Animation & Sprites
Pygame Tutorial #3 - Character Animation & Sprites
Tech With Tim
35 Pygame Tutorial #4 - Optimization & OOP
Pygame Tutorial #4 - Optimization & OOP
Tech With Tim
36 OBS Studio Tutorial - Best OBS Settings
OBS Studio Tutorial - Best OBS Settings
Tech With Tim
37 Linear Search Algorithm - Python Example and Code
Linear Search Algorithm - Python Example and Code
Tech With Tim
38 Make Any Mic Sound AMAZING! (WITH OBS)
Make Any Mic Sound AMAZING! (WITH OBS)
Tech With Tim
39 Binary Search Algorithm - Python Example & Code
Binary Search Algorithm - Python Example & Code
Tech With Tim
40 Pygame Tutorial #5 - Projectiles
Pygame Tutorial #5 - Projectiles
Tech With Tim
41 Pygame Game - Mini Golf
Pygame Game - Mini Golf
Tech With Tim
42 Pygame Tutorial - Projectile Motion (Part 1)
Pygame Tutorial - Projectile Motion (Part 1)
Tech With Tim
43 Pygame Tutorial - Projectile Motion (Part 2)
Pygame Tutorial - Projectile Motion (Part 2)
Tech With Tim
44 Pygame Tutorial #6 - Enemies
Pygame Tutorial #6 - Enemies
Tech With Tim
45 Pygame Tutorial #7 - Collision and Hit Boxes
Pygame Tutorial #7 - Collision and Hit Boxes
Tech With Tim
46 Pygame Tutorial #8 - Scoring and Health Bars
Pygame Tutorial #8 - Scoring and Health Bars
Tech With Tim
47 Cloud Mining vs. Hardware Mining - 2018
Cloud Mining vs. Hardware Mining - 2018
Tech With Tim
48 How to Install Pygame on Mac OSX (Fast-Simple)
How to Install Pygame on Mac OSX (Fast-Simple)
Tech With Tim
49 Pygame Tutorial #9 - Sound Effects, Music & More Collision
Pygame Tutorial #9 - Sound Effects, Music & More Collision
Tech With Tim
50 Pygame Tutorial #10 - Finishing Touches & Next Steps
Pygame Tutorial #10 - Finishing Touches & Next Steps
Tech With Tim
51 How to Fade Your Screen in Pygame [CODE IN DESCRIPTION]
How to Fade Your Screen in Pygame [CODE IN DESCRIPTION]
Tech With Tim
52 How to Create a Button in Pygame [CODE IN DESCRIPTION]
How to Create a Button in Pygame [CODE IN DESCRIPTION]
Tech With Tim
53 Pygame Side-Scroller Tutorial #1 - Scrolling Background/Character Movement
Pygame Side-Scroller Tutorial #1 - Scrolling Background/Character Movement
Tech With Tim
54 Pygame Side-Scroller Tutorial #2 - Random Object Generation
Pygame Side-Scroller Tutorial #2 - Random Object Generation
Tech With Tim
55 Pygame Side-Scroller Tutorial #3 - Collision
Pygame Side-Scroller Tutorial #3 - Collision
Tech With Tim
56 Pygame Side-Scroller Tutorial #4 - Scoring and End Screen
Pygame Side-Scroller Tutorial #4 - Scoring and End Screen
Tech With Tim
57 How to Create A Message Box in Python - Tkinter
How to Create A Message Box in Python - Tkinter
Tech With Tim
58 Is Ethereum Mining Still Profitable - Is It Worth It (April 2018)
Is Ethereum Mining Still Profitable - Is It Worth It (April 2018)
Tech With Tim
59 How to Run MAC OSX on a WINDOWS PC (Clover Boot-loader)
How to Run MAC OSX on a WINDOWS PC (Clover Boot-loader)
Tech With Tim
60 Programming Problem #1 - Alphabet Soup (Beginner/Novice)
Programming Problem #1 - Alphabet Soup (Beginner/Novice)
Tech With Tim

This video teaches advanced vibe coding using Warp, covering building and deploying applications from scratch, and provides insights into AI agent settings and code generation. By following this tutorial, viewers can learn how to create and deploy their own AI-powered applications. The video is geared towards beginners and provides a comprehensive overview of the process.

Key Takeaways
  1. Introduction to Warp and its UI
  2. Understanding modes and general usage
  3. Setting up multiple agents
  4. Planning and configuring agent/AI settings
  5. Generating and viewing code
  6. Setting up deployment using Railway
  7. Version control and Git tutorial
  8. Adding MCP servers and handling deployment
💡 Using Warp, developers can build and deploy AI-powered applications quickly and efficiently, leveraging the power of AI agents and automated code generation.

Related Reads

📰
I stopped my AI agents from being expensive black boxes (here is the architecture)
Learn how to avoid expensive black box AI agents by building a transparent workflow architecture with LiveContext
Dev.to AI
📰
We Built an AI Receptionist With No Per-Call Fees and No Customer Cap
Learn how AION Voice Receptionist offers a flat-fee AI-powered phone receptionist service without per-call fees or customer caps, and how it can benefit businesses
Dev.to AI
📰
BizNode uses Ollama (Qwen3.5) running locally on your hardware — your data never leaves your machine. True AI pri (Jul 07 15:15)
Learn how BizNode uses local AI to automate business operations, increasing efficiency and reducing reliance on human emotion
Dev.to AI
📰
SOC 2 vs. HIPAA Compliance for AI Medical Scribes
Learn why HIPAA and SOC 2 compliance are crucial for AI medical scribe vendors in healthcare documentation
Dev.to AI

Chapters (12)

| Overview
0:56 | Warp Introduction
2:32 | Overall UI & Layout
4:12 | Modes & General Usage
7:00 | Multiple Agents
8:00 | Planning
11:23 | Agent/AI Settings
12:55 | Generating & Viewing Code
17:25 | Setting Up Deployment
19:15 | Version Control & Git
20:44 | Adding MCP Servers
25:25 | Handling Deployment
Up next
AI Agents Are Starting to Talk to Each Other... Without Us.
PlivoAI
Watch →