Claude Code for Non-Coders | A Complete Beginner's Guide

Claude Code has been dominating the Vibe coding space the last few months and for good reason. It is the best tool for leveraging AI to build things that were impossible to build just a few years ago unless you were a software developer. But unfortunately, it's really hard to find videos or guides that walk you through from beginning to end how to set up Cloud Code and use it properly. Unless you are a software developer, there's a ton of assumed knowledge. And in this video, I'm going to do the opposite. I'm going to assume you have

no knowledge that you aren't technical and I'm going to take you through how to install cloud code, how to set up your environment. We're going to walk through an entire demo where we create a front end using cloud code and hook it up to an NAN agent on the back end. And I'm going to show you how to deploy it using GitHub and Verscell. And I'll also show you how we can use Cloud Code inside of Cursor so we can get out of the terminal and have an environment where we can have AIS play off

of each other. So that's a ton to cover in one video, especially since I'm assuming zero outside knowledge. But the truth is you don't need that outside knowledge to get started. You just need to be curious. And so with that, let's get started. So let's start by explaining what the heck cla code actually is. So claude code is essentially allowing Claude allowing sonnet and opus to work inside of our terminal to edit files, create files, so it can build applications for us. Now what is the terminal? This is the terminal. If you go to your

start menu and you type in terminal, this is what's going to pop up. Scary hacker coder stuff. what I'm doing right here. This is sort of the command line. Okay. Now, this is where Claude Code lives and this is how we interact with it. Now, that probably turns you off right away. You've never worked with it before. Don't worry. We're going to ease into this specifically when it comes to the terminal. We're going to be using a program called Cursor, which gives us an entire user interface. We can see our files. Much easier to deal

with. Another way to think about cloud code is relating it to Lovable. You've used Lovable before, right? I give it prompts. It creates web apps for me. Cloud code is essentially that except instead of it living on this website, it's living on our computer inside of our terminal and it can create files and edit files on our actual machine. So what does that actually buy us? Well, it buys us more power and more control at ultimately a cheaper cost at scale using cloud code. The downside is simply the user setup, right? I can't just go

to lovable and type it in. Everything's ready to go. We need to download cloud code. We need to install certain packages. We need to know how to manipulate it. But in the end, we have a way stronger tool at our disposal that we can use, which is why you're here in the first place, right? So, let's talk about pricing. You need at minimum the pro plan, which is 20 bucks a month. So, an actual claw subscription, or you can go higher tier, which is the max models, which is either $100 or $200 a month. If

you're doing the pro, which will be enough for today, you get everything in cloud code, but you only get access to sonnet versus opus. Opus is the more powerful claw model. Sonnet is slightly less powerful, but it's quicker. And honestly, sonnet is more than enough in most cases. The other big difference between Pro and Max obviously is the usage. So, you are a bit limited when it comes to Pro. So, now let's talk about installation. So, you're going to go to anthropic.com/cloud-code and you're coming to this page. The first thing you need to do is

install node.js on your system. So, you're going to click this link. It's going to bring you to this page. Just specify what system you're on, whether that's Windows, Mac, or Linux, and then you're going to do the installer. You're going to run through the wizard. If you're on Windows, you'll have something pop up that asks you if you want to install Chocolatey. You don't need to do that. Just install everything else. And just so you're just hitting next, next, next. Once you finish installing NodeJS, we are now going to install Cursor. So, Cursor is also

an AI code editor, and it's the application that we are going to be using to interface with Claude Code. They have a free tier, no need to pay for it, so just download it and install it. Once you've installed cursor, I want you to go to your desktop and create an empty folder called claude code test. Once you've created that new folder on your desktop, I want you to open up cursor and go to open project and then find the folder you just created. Your page will look something like this. I want you to then

go to terminal at the top and hit new terminal. And this is cursor in a nutshell. So remember that terminal I showed you a few minutes ago, that scary one. That's the exact same thing we have here on the bottom. The difference is with cursor, as you'll see soon, we have a bunch of different stuff that we can see. On the left hand side, although it's empty, that's where it's going to show all our files that we create. On this top half, that's going to show the file itself that we're working on. And on the

right hand side is another place that we can talk to and query AI. And again, we'll dive into that later. But now, what we want to do is actually install Claude Code. So, we have the terminal up. We just need to run the command. So, I want you to go back to this Claude Code page. I want you to copy this. You're going to come back to the terminal. You're going to paste that in and you're going to run it. You should see something that says like added a certain amount of packages, changed packages, 11

packages are looking for funding. Something like that. If you see that, it worked. Next, I just want you to type claude. Hit enter. Once you put in the claude command, it's going to ask, do you trust the files in this folder? Just hit yes, proceed. So, hit enter. And then it's going to tell you, welcome to Claude. At this point, Claude should ask you to log in. If that doesn't happen, what you want to do is you want to do slash. You'll see a bunch of slash commands and then just type in login. Hit enter.

It's then going to prompt you to log into your cloud account. It'll actually give you a link that takes you to the actual web page. Once you've done that, we now have Claude code running inside of the folder that we've created. And this little command line where I'm typing stuff in. That's just like as if we were talking to Claude on the actual Claude web page. So, if I were to type in right now, what sort of stuff can you do? It's going to actually process it. It's sending the request back to the cloud servers

and it's going to give us response just like a traditional large language model. So you can see I asked it hey what sort of stuff you can do and it gave me a whole breakdown code management project management all this stuff. So before we actually have claude start building stuff for us let's go over some of the basics of cloud code. Now the first thing you need to understand are slash commands. So if I do slash like this I can then use my up and down arrows to go through all the different slash commands that

are available to me. So, for example, I just showed you /lo, right, to log into your cloud account. We have a ton of different ones. For example, slashcontext tells me how much of our context window has already been used. At this point, we're at 8% and it breaks it down by things like system prompt, tools, MCP tool, messages, and then free space. But, as you can see, there are a ton of these. Now, I'm not going to go through all of these because cloud code goes very, very deep. But, there are a few we want

to know about. And the first one we want to talk about is slashinit. Now slashinit creates a new claude.md file with codebased documentation. And anytime you start a new project using claude code, one of the first things you want to do is slashinit. Now alls it's doing is it's creating essentially a text document that's going to essentially summarize everything that's been done to our codebase up until that point. That way, further down the line, if you start working on this project again or you leave it alone and you don't come back for weeks and weeks

and weeks and you start cla back up, it knows where it needs to check to see what the heck has been going on and what it needs to do going forward. Now, when you do /init, you can see up here at the top, this is the file it's creating, right? All this green stuff. And it's also going to ask us, do you want to make edits to claw.md? We're going to go to two, say yes, you can allow all edits during this session. That's fine. And it's going to go ahead and create the file. And

we can see the file that was created over here in the top left, which is kind of our file explorer area. And if I click on that, here's the file itself. So remember what I talked about before, files on the lefth hand side, the file you actually are editing here in the middle, terminal down at the bottom, and then our little AI place on the top right. And feel free to browse through all these other slash commands, but right now all you need to do is that slashinit. So slash commands, very important. Now, real quickly,

let's talk about extensions. So, I want you to hit this little button on the top left. Go down to extensions, and I want you to search for Claude Code. You should see Claude Code for VS Code. I want you to install that. This is just an add-on for cursor that more seamlessly integrates Claude Code for us. And over on the left, you'll see a ton of different extensions. Extensions do all sorts of things from, you know, changing the way your text looks to how the actual UI looks to giving you different functionalities for different coding

language. You don't need to worry about any of that right now. Just go ahead and install Cloud Code. Now let's talk about planning mode and editing mode. So if I do shift tab, I can cycle through these different modes and you see them down here in the terminal. So question mark for shortcuts, accept edits and planning mode. So what is the difference between all these? So planning mode is just what it sounds like. I can have a conversation with the AI and before it actually builds anything, it's going to create an entire list, essentially a

product requirements document of what we want to build and how it's going to do it. This is great because this is something just a few months ago you'd have to do manually, but Cloud Code will do it for you. This way, you can go ahead and talk with the AI and actually get all of your thoughts down on paper before anything is built. And you should 100% use plan mode every single time you start a new project. Next is editing mode. And if you're in this mode and you tell it to do something, it's going

ahead and do it. It's going to edit files. It's going to save those changes. You're actually letting it go to work. So now, let's actually build something. So I'm set to plan mode. And I said, build me a landing page for my web app that acts as a front end for my nit chatbot. I want there to be a message window that allows me to communicate back and forth with my chatbot. And I want the UI to look like a matrix style terminal. So, I give it that and I just hit enter. And you'll see

it start to go to work and actually create a full plan for how we're going to hack this. So, we can see right away it creates this to-do list, right? Which is really nice cuz you'll see it as it goes on. It'll actually check off the boxes as it completes certain steps. And right now, it wants to actually search the web to get a better idea of what the website itself should look like. So, I'm going to tell it yes, I want to proceed, and it's going to continue planning. Now, you'll notice you kind of

need to be sitting here at the terminal giving it permission to do certain things. There is a way to bypass that completely. It's called clawed run dangerously. I'll show you that code later, but when you're first getting started, you want to be a little more hands-on so it doesn't like break anything. But for now, we're just going to wait for it to continue planning. So, we see here that it completed the plan. It tells us the files it's going to create. It tells us what's going to be in each file. Goes into visual effects. Talks

about N integration. All sorts of stuff. And I can either accept the edits right away. I can manually change the edits. Or I can tell it to keep planning and give it a little more structure. So I'm going to tell it to keep planning. So I just told it don't worry about the NAT integrations just yet. I'll give you that web hook information later. I now like the plan. So I'm going to go ahead and let it proceed with building everything. So, I said I'll accept all the edits. And what it's going to do now

is it's actually going to create all those files. And again, we see this nice little to-do list that it gives us. So, we can kind of keep tabs on where it is in the process, which is really, really nice. Also, while it's doing things, you can continue to give it more commands. So, if I do /context, once it finishes its task of actually creating all these files, it knows that I gave it another command that's sitting in the queue. So once it's done with that, it'll go ahead and show me what our context window is

looking like. So if this is your first time ever coding on your computer, as it's building these things out, there will probably be times where it's telling you, hey, I need to install this Python package. I need to install this Angro package. Understand that is safe. If you ever get confused, you can take the command it gave you and you can either go to like Google or Perplexi to find out or you can use the AI that's already built inside a cursor. And what do I mean by that? I'm talking about this thing over on

the top right. I'm going to set it to ask. So, we're just in talking mode. But what this is is cursor also has its own AI that can look at all the files we've created. So, I can give it prompts and it will have full context of the file that we're working inside of. So, cursor knows all these files on the left that just got created. So, if I'm ever like, I don't know if I believe you, Cloud Code, and I kind of want a second AI opinion, well, I can just go to Cursor and

have that happen. And on top of that, I can choose different models to use, right? I could use Claude 4 sonnet. I can use GPT5. I can use 40, right? Whatever I want. So I could, for example, as kind of this AI brainstorming phase, be like, take a look at my codebase. What do you think? Right? Obviously, this is very bland and generic. And I'm going to move this over here for a second. But over here on the right hand side, it's now going to take a look at all the code that's been written and

kind of give us an assessment if we've done anything wrong or if we could do things better. If you've been using AI for any time at all, you know, this kind of bouncing AIS off of each other's AI back and forth can be really helpful sometimes, especially if you're in a brand new environment like this, like the terminal encoding and you've never done it before. So, take full use of this if you're using cursor. So, here's the full response that GPT5 gave us, right? gave us some suggested edits, all this stuff. What you could do

is you could copy it down here, bring it into Cloud Code, and be like, "Hey, this is some suggested edits. What do you think?" Right? So, you can totally have these two AI coding masters kind of go back and forth if you're ever confused. We'll stick with what Claude Code created for now, cuz this was a pretty simple assignment. So, it's telling us that it created the web page for us that we can now look on our local browser. So, we're going to bring up the folder that we made. And inside we see index.html. So,

I'm just going to open this inside our browser. And here's what it created. Now, this is on our local host, right? This is not connected to the internet yet. There's no domain that I could give to a friend and have them look at it. However, even though it's on local host, this is great for us to look at and see, okay, like here's the prototype. What do we like? What do we not like? What I don't like is, you know what, I don't actually like it green anymore. I want this to be blue and I

want like a cool matrix background. So, you know what I'm going to do? I'm going to take a screenshot of it and I'm going to give that to Cloud Code. And then once inside of cloud code, I'll do altv and you should see like image number one, image number two, etc. show up there. If you're on Mac, you should just be able to drag and drop it. If you're on Linux or WSL, it'll be a little bit more of a pain in the butt and you can't do this directly. So, good luck with that. But

for most users, Mac, Windows, it'll look just like this. So, this is the same as me dropping a screenshot inside of like lovable or something. I can say, take a look at this. I want it to be blue instead. And I want a matrix style background, the falling text, right? I cannot type. So, giving it images to work off of is that easy. And again, it goes through the same cycle. It's going to create the to-do list, and then it's going to go step by step and knock out everything we need. Okay, so it's saying

it made the update. So, let's take a look. I'm going to go back to my web page again. We're on local host. I'm just going to refresh it and we can see, hey, it's now blue and it kind of has that Matrix style text in the background. Pretty sweet. Although, for whatever reason, it made it like Japanese, you know. So, that's interesting. So, we don't have this actually hooked up to our NAD backend just yet. But before we do that, I want to introduce you to sub aents inside of Cloud Code. So, what are Cloud

Code sub aents? Well, they're almost like miniature instances of clawed code that this primary claude code controls and we can have it do different tasks for us simultaneously, right? While this cla code instance that we're working with is kind of like this generalist, we're telling it to do all these things, create the web page, hook up n, what if we wanted a sub agent that was like just dedicated to the user interface or I wanted a sub agent that was just dedicated to like hooking up a Stripe integration. That's something we can totally do and

it's actually really easy. So, what we're going to do is we're going to do slash agent or sorry, slash agents. Scroll down. We'll hit enter. Now, we have a few builtin agents already. You see them down here. General purpose, status line, output style. But I want to create a new agent. So, I'm just going to hit enter. So, it's going to ask you if you want a project or a personal agent. So, a project agent is specific to that project just like it sounds. If I create this UI sub agent that we're going to create

and I make it a project one, you can only find it inside of this project inside of this folder. If I create a new folder for a new project, that won't exist. If I create a personal uh sub aent, that's essentially like a global sub aent that I've created that I can call on to do things in any project I make from here on out that uses cloud code. So, project ones, you can get very very like tight with your scope because it's only going to be used for that specific instance. And in this case,

we're going to go with project. Now you can either do manual configuration or you can generate with claude. I suggest just having it generate with claude. And now alls you do is you give it a prompt for the sub agent. So two ways to do this. You can either do it yourself and just say hey I want a sub agent that's built for specifically the UI and doing sort of like UX things or even better go to cloud go to chat GBT explain what you're trying to build and have it come up with a prompt

for you. So, I went to Perplexity had it create a prompt for me um for this landing page UI expert and it gave me all this stuff. So, all I'm going to do is I'm going to copy this, go back into cursor, paste that in there, and hit enter. And now Claude is going to do everything it needs to do in the background to create this sub agent for me. Pretty sweet. Now, it's going to ask you what tools you want to give it access to. We're just going to hit continue. We're going to give

it access to everything. And then it's also going to ask you what model you want it to use. Now, if you're on the Max plan, it'll also give you the option of Opus. Honestly, Sonnet is just fine. You also have the ability to just let it automatically select the agent based on the parent. So, for example, we're using sonnet in our main cloud code conversation, and that's what I suggest you always do. So, we'll just do sonnet for now. And then you can give it a color. So, we're going to give it red. And then

we're just going to hit enter. So now I can just back out, hit escape, and if we go to the top left, you see this.claude folder. If I click on that, you can now see that there's an agent subfolder and the landing page designer agent. So what I can do now is I can talk to Claude Code and say, "Hey, go use the landing page designer and have it come up with some ideas for the UI." So that's exactly what I told it. Use the landing page designer agent, have it come up with some landing

page UI ideas. And now in the background, that thing's working. And remember how we used the color red? Now, specifically, it shows it in red as it's doing stuff. Pretty awesome. And you can imagine how many sub agents you can create and have them working at a bunch of different things all at once. Now, you're going to be tempted to right away create like 50 agents and have them all doing those little tasks. Always remember, less is more, especially when it comes to simpler projects, but I did want to demonstrate how easy it is to

set up agents inside of Cloud Code and get them working for you. Now, for the sake of time, we're not going to implement all those sub aent changes it proposed. I just kind of wanted to run you through how the sub aent system works in cloud code. But what I want to do now is actually hook up, you know, our matrix style landing page that we've created to an NAN chatbot backend so we can eventually get this up and running for real on a true domain. So I'm inside of NADN right now and let's build

this super simple chatbot. So we want a web hook. We want it respond to be respond to web hook node. So it should look just like this. We need to hook it up to a basic LLM chain, right? Because we're just creating a simple chatbot interface here. We will leave this all the same. For the model, we're just going to do 4.1 mini. And then for the web hook, we'll do Whoops, wrong web hook. We will do um respond to web hook. So, how will this all work? I will give it a message inside of

this web page. That message will flow to this web hook. That message then goes to the large language model which generates a response. That response then goes to this web hook which then appears back on our web app. Right? A very simple web app chatbot application that we're building. So what do we need for this to actually work? Well, we need some web hook information, right? I need to set this to production ideally and I need to copy this. So, we're going to copy this web hook and we're going to save this and we're also

going to set this to active. So, we need the web hook information which we got. What else do we need? Well, we need some sort of internet connection, right? Because right now this is locally hosted. This is just running on our computer. It's not exposed to the internet at all. Do we need to get a domain right now and then put it on a website to have it working like that? No. We can actually use what's called a Python HTTP server to essentially simulate that. That way we can actually send a response out to Nadn

and get a response back. So we're going to give all that information to cloud code. Now we're going to say, hey, we want to implement the nadn stuff. Here is the get web hook and we're going to paste the URL. And then we're going to say to test this, can we use some sort of Python HTTP server? Now what you're probably asking is like, well Chase, I had no idea about the Python HTTP server. How was I even going to do do that if I was doing this on my own? Well, that's where you would

have just asked Claude Code like, hey, I want to test this, but I'm on local host. what should I do? It would have given you that exact same answer. So, we're going to make sure we're on plan mode. And before we go to plan mode, I actually want you to do /model. And I want to go over this real quick. So, I probably should have mentioned this earlier, but if you do the /model command, you can see the different models you can use. We have default, which is sonnet 4. We have opus, and then we

have opus plan mode. So, opus and opus plan mode are only available if you're on the max plan, right? The $100 or $200 a month plan. If you're just on the normal pro, you'll only see default. All right, that's okay. Now, if you are on the max plan, I suggest that you use Opus plan mode. So, that means when you do any of the planning stages, it's going to use the powerful Opus model. But when it comes to actually executing the changes, it's going to use sonnet. This gives us a nice kind of balance between

using the really powerful stuff to do highle strategy and using the quicker, cheaper model to actually execute things on the ground. So, just know that. Now, with that being said, let's give it the prompt. So, I wrote, I want to now integrate the NAND web hook stuff. We are still locally hosted, so we should set up a Python HTTP server to test this out. The NAND web hook is get and then I pasted the rest of the web hook and hit enter. So, here's the plan. It's giving us. It's going to create that Python HTTP

server. It's going to integrate the web hook changes. That way, we can actually test it for real and get information to NADN and get responses back. So, I'm going to tell it yes, I'd like to proceed. As it goes through this, it's going to ask for permission for different Python commands, Bash commands. Go ahead and accept those. Okay, Cloud Code finished up, and it gave us a local server to test this on, right, localhost 8000. So, I'm just going to control-click this link. And that brings us here. Now, what I'm going to do is I'm

going to give it a test message. And it's not going to work at first, which is totally okay because we're going to have to change some things on the NAN side. We said, hey, what's up? And hey, even look at that. that says web hook call successful but no response data received. Actually exactly what happened. So what I want you to do now is go back into n. We're going to go to executions and you'll see we just got an error here. But this again is totally expected. So I'm going to hit debug and editor.

And so what happened here? Well, what happened was everything was working on our kind of clawed code side. We click on the web hook. We can see a bunch of information was passed, but we got stuck here at the basic LLM chain because we hadn't properly configured this yet in terms of the source for the prompt. And if you've ever done work with lovable and nen, you know this is kind of the expected workflow. So, we're just going to go to define below and I'm going to go down to prompt. And you see here on

the bottom left where it says message, hey, what's up? We're just going to put that in here. Now, it's going to know going forward what everything should look like. So while I'm here though, I'm going to do execute step and this is going to give us the response. So if I then go to respond to web hook, I'm going to do execute step as well. And this is the response that from now on is going to be sent to um our server. So, let's go ahead and copy this. Go back into Cloud Code. And we're

just going to say, just as a heads up, expect JSON responses from Naden to look like this. And I paste that in there. So, what have I done? I've said, hey, like everything's working on our end. Just know that when Naden responds to you, this is what the responses are going to look like. And it needs to know what the responses are looking like so it can then parse them properly and display it properly on this, you know, terminal web page that we've been playing around with, right? And that sort of like back and forth

just making sure everything aligns on both n and clawed code is something you should be very familiar with if if you use level at all. Right? Same idea. It says it's been updated. So let's try again. We're just going to refresh this and then let's send our message. Hey, what's up? And we can kind of fix these random things coming in. Um, says call successful. No response data received again. H well again. Let's take a look at our executions and see what happened. So, we got an error here. And what happened? Well, what happened was

your boy didn't save the changes he made. So, let's just go back to editor. Going to hit save. Come back in. refresh and same process. Hey, what's up? We're going to have to change all this. Um, but hey, we got a response. Hey, not much. Just here in case you need help. Cool. So, now we know the basic part of this is working. What I'm actually going to do here though is I'm just going to screenshot all this and I'm going to tell Claude Code like, can we get rid of all this stuff that is

at the beginning? That might be like a chat history, but I don't really like it. So, we're going to change it. So, I just put in the image says looks like it's working, but we get all these old messages populating. I open the page. Can we change that? But big picture, right, the base functionality of I talk to the web page, our ugly terminal web page, and it goes to nadn gets response and brings it back is working, which is awesome, right? That's claude code in action, and we got it working from ground zero all

the way from installation pretty quickly in the grand scheme of things. So now the next question you should have is, okay, sweet Chase, it's working in our local environment. How can I get this on the web in a secure fashion? And the secure fashion is important because right now we have certain things exposed, right? Namely like the web hook, right? Someone can actually see that in our code. How do we do all that? Well, that answer is going to come in two parts. The first part is GitHub and the second part is Verscell. Now, GitHub

and Versell are essentially two sides of the same coin. With GitHub, we are going to be able to take the code that we've been building and we're going to be able to push it essentially to the cloud as a repository. With Versel, we are then going to be able to take that code that we've uploaded to GitHub and turn that in to an actual website, a domain. We're actually going to put it into production. Right? So the part of the workflow we're in now in terms of like vibe coding is we're going from local testing

and making sure things work at a very base level and now we're starting to move into deployment and really when it comes to GitHub and Verscell into CI/CD which is continuous integration continuous deployment I'll explain that later. So here's what you are going to do now. You are going to go to github.com and you're going to create a new account. Once you create a new account, you're then going to create a new repository. So you see here on the left where it says repository. You're going to hit new. You're going to give the repository a

name. We're going to call this claude code test. Description can just be test. For visibility, keep it public. Read me. You can put off. Add get ignore. Do no get ignore. No license. Make sure you choose an owner. And then you're going to create the repository. Once you get to this page, just leave it as is because next thing I want you to do is go to verscell.com. Once you're at versell.com, I want you to sign up using your GitHub credentials, right? This will connect your GitHub and your Verscell, which is really important so that

we can properly deploy the code that we've been building. Again, you can do this all on the free tier. And what I need from you now once we're in Verscell is come to the top right. I want you to go to account settings. I want you to go to tokens and I want you to create a token name. give it a scope and give it an expiration. So, this is going to be CC test scope. I'm going to give it um full account scope for me and expiration. We're just going to do 7 days. You

could have this be as long as you want. I then want you to create it. Once it's created, have this page still up because you're going to need to give it to Claude Code in a second. So, coming back to Claude Code now, let's go over what is about to happen. So, like I said before, the code is working. We just need to make some changes before we actually push it to production. And to push it to production, we need to a take all this code and send it to GitHub. And then once it's at

GitHub, Verscell is going to recognize it and say, "Hey, he's updated his repository. Let's push that to the website." And once that occurs, you'll actually have this terminal thing we've been building out there online for real. Now, the security thing I've been talking about is stuff like the web hook in this case. But if you're building a more complex application, that's going to include things like API keys, right? We can hardcode them here when we're in the testing phase just to make sure it works. But in reality, we want when we want to push these

things to production, that's a no-go. We cannot do that. But cloud code can save us, right? And so what you always want to do when you go from a local testing environment to a public testing environment is you want to ask cloud code, hey, am I missing anything security-wise? Cuz like we've talked about before, you don't know what you don't know. But what you can do is ask it, what don't I know about security? What am I missing here? And what do we need to change before we push this to GitHub and we make this

live, right? And it's going to tell you and it's going to make those things happen automatically. So what will the prompt be? Well, first of all, I'm in plan mode and I said, I want to push this to GitHub and then deploy it via Verscell. I want to make sure we have no exposed web hooks or API keys. I can give you the GitHub repo link as well as my Verscell token to set up any environment variables. What else do you need to make this work, right? And that last sentence is important because it kind

of covers our ass in case we forgot anything. So, just going to hit enter and we'll have it create the plan for us. So, I know I'm stressing the security stuff a lot, but it is really important, especially if you push anything online and anybody can access it. So, make sure you ask Claude. Make sure you get your cursor AI second opinion on things to make sure nothing's slipping through the cracks. And also, there actually is a slash command for this. If you do slash security review, cloud will also go through the project that way.

So, here's a deployment plan it came up with. It recognized the web hook URL is currently hardcoded. It's going to change that. It's going to create environmental configurations. It's going to modify the JavaScript. that's going to prepare for GitHub set up for cell deployment and then do proper documentation. So it also tells us hey here's the two things that I need from you. I need the GitHub repository URL and I need the P for cell token. Okay so what we're going to do is we are going to actually have a key planning and we're going

to pass it those things first. So I'm going to say no key planning. I like this so far here. is the GitHub repo. And I want you to pull this back up. Go to your GitHub repo and just copy the URL. And then I said the Verscell token is we're going to go to Verscell. We're going to copy this back inside. Paste it. Hit enter. So once we gave it those things, it gave us one last overview of the plan. I like it. We're going to have it proceed. Now again, it's probably going to ask

you things like, hey, we need to install this Verscell package. It's like command line interface thing. Hey, we need to install certain GitHub things. You can go ahead and allow that. And again, if you're ever like, uh, I don't know. Should I allow this, get your second opinion, right? Make sure the other AIS sign off on what this guy is doing. So, while this is running through everything, let me talk real quick about the CI/CD thing I talked about earlier. Continuous integration, continuous deployment. So, the way it works is anytime I push changes to GitHub,

and remember, if I'm pushing a change to GitHub, I'm essentially telling GitHub, okay, this is the code I've been working on. I really like it and I want it to go live. But GitHub isn't a place that we create a domain from or like put into production per se, right? Instead, Verscell does that for us. And so Versell is always connected to our GitHub account and it's looking at it like, okay, has there been a new push? Anytime something new is pushed, that gives Versell the thumbs up to be like, okay, create a new deployment.

So it uses the new code that's been added to create the new website and the new update which means we can do everything from here from inside of our terminal inside of cursor. I don't have to go to GitHub. I don't have to go for cell. I don't have to do anything manually. I can have it keep running and updating as much as I want all automatically from one place which is super powerful. And again if you have no background in this stuff before I know a lot of it just seems like it's coming at

you super fast and kind of flying over your head. That's okay. One of the most important things that you should be doing as all this is happening is also asking claude code why are you doing it this way? Like can you explain this to me? Can you explain it simply, more simply, more more simply, right? Like you need to be really curious when it comes to this stuff, especially if this isn't your normal space. Even though we're vibe coding, it's on you to understand what's happening. Again, you don't need to understand what's exactly going on

in terms of the code, but you do need a highlevel view of what's happening or else how can you tell it where you want to go, right? Always remember that. All right, so it says it's finished and it gave us both the URL for the actual app as well as the GitHub. So, let's first take a look at the GitHub. Just control-click that link and it's going to take us to here. This is the repository for our Claude code test, right? This is where all our code is living and this is the code that the

actual website is based upon. And so everything we've been working on for the most part is here, including this read me. Again, AI created all this. That kind of gives us a breakdown of what it just created, what the text stack is, the project structure, right? All of this, and it's pretty in-depth. Now, if we go back here, let's take a look at the actual website and see if it actually worked. So, open it up. 404 deployment not found. That's okay. Let's see what happened. So, we're going to head back to Verscell. We're going to

go to the top right. We're going to go to dashboard. And we're going to take a look at the one that we just created. So we had cloud code test right here. And you can see it gives us the error. So we're just going to click here on the error. We are going to copy this error. You're just going to click this right here. We're going to go back into cloud code and we're going to just say, hey, we got an error with the cell deployment. This is what it said. Paste it in there. And

we're also going to put it on plan mode. And you know, I'm actually kind of glad this didn't work at the first try because this is the sort of back and forth you're going to have to get used to when it comes to creating AI apps, especially at the beginning. It's very rare you're able to oneshot something and it works perfectly every single time. This sort of back and forth workflow, just kind of needs to be your expectation. So, it says it found the error, gives us a plan, and we're going to have it just

go to work. So, it says it fixed the error. Now, remember, if we want to push this live, what do we need to do? we need to push the change to GitHub. Tell it to push the change to GitHub and that will automatically change the deployment itself. So, I'm just going to say um push this change to GitHub and it's going to go ahead and do it. So, um if nothing else, you're starting to kind of figure out and see, all right, here's how the whole GitHub thing works in action. GitHub and then Git in

particular, we're not going to dive in too deep on this lesson, right? Like what is Git, what are branches? We'll save that for a later one. just know it's important and for now just understand you need to be pushing stuff to GitHub when you want it to go live and apparently it already pushed the change to GitHub. So let's take a look at Verscell and see what actually happened. So I'm back here in Verscell on that deployment. Let's go back our projects cloud code test and I can look at where's the deployments again? What am

I doing? Okay, if I go to the top left, go to deployments, we can see that we just had a new deployment 11 seconds ago. says it's current. I can click on this guy and it looks like it's working. So, let's click on the UI and here it is. So, here's the update. Now, let's see if it really does work. Hey, what's up? Moment of truth. Hey, got a response. Now, is this response real? Is this fake? Well, let's go into NAN. Click on our executions and yep, real response. Response was, "Hey, not much. Ready

to help." And the response here, "Hey, not much. Ready to help." Sick. We got it working. Now, from this point forward, if you wanted to make more changes to that web app, but you didn't want to affect the deployment itself, you could do local testing. Again, you just go to Cloud Code, tell it, "Hey, I want to change some things using the code we have, but in a local environment, so I don't mess with the deployment itself." And it'd be able to help you do just that. So that's the video guys. I could have probably

kept going for another like five hours because this stuff is obviously very deep. But we did cover quite a bit, right? Everything from how to install cloud code, how to do the planning mode, how your general workflow should be with cloud code, including sub aents all the way to like a real life demo of connecting it to an end backend and deploying it via both GitHub and Verscell to have a true like CI/CD pipeline, right? Tons of cool stuff. And again, I'm sure you're very confused, right? If this is still your first, you know, kind

of visit to the vibe coding, low code space in in this sort of um context. But I promise you, it gets easier. Really lean heavily on AI to help explain things to you. And most importantly, remember the mindset. You're not a software developer. You're not. Don't let anyone tell you differently or tell you that you need to become one. You need to adopt the mindset of a product manager, right? Remember, you're focused on outcomes. You're focused on features. Let the AI do what it's best at, right? And in the meantime, you give it context and

you direct it. And as always, make sure you check out the school. Tons of resources in the free one. Obviously, the paid one is kind of a step up, especially when it comes to creating your own AI agency and making money with all this. And let me know in the comments what you thought, what I definitely missed, because I'm sure there was something. and I will see you guys