Build ANYTHING with Claude Code & n8n (Beginner's Guide)

All right. So, a lot of us have been building editin workflows for a while now. So, today I'm going to show you how you can take any of your editin workflows that you already have and turn that into a web app. And I'm not talking about just showing you something like lovable to build a front end and then connecting it to your end web hook. I'm talking about cloud code having the ability to look at your workflow essentially audit it to make sure it's ready to go for an app and then make any of the changes that you need on the back end before you build the front end. But let me show you guys what I actually mean by that. Otherwise, it just sounds like a bunch of gibberish. So, here is a workflow that I wanted to turn into a web app. It takes a form submission where we get information from a user like product name, product photo, avatar, features, and video setting and it turns that into a UGC ad with this workflow. As you can see right here, so what I told Claude Code to do was look at this workflow and then just optimize it so I could actually use it and connect it to a front end. And what it did is it changed the workflow to look like this. There are actually a lot of changes that it made here. And I need you guys to believe me when I said I was seriously impressed when I saw this. So real quick, just wanted to put these side by side so you can actually see what it did. on the left was the original and on the right is what cloud code built. So, first of all, it switched out the form submission trigger to be a web hook. Not too hard, but that's what it did. So, if you remember, one of the raw inputs it gets was a photo. So, cloud code actually realize that it's going to come through as a base 64 string when we send it over web hook and it has to convert that. And then at the end, what we had to do is we had to figure out how did we want this to be displayed in the front end. So, we basically are sending back a message whether it was successful or not. And we're sending over the URL so it can be embedded in the actual landing page. And it also changed all of these HTTP requests to be continue with an error output and it routed the error to a different branch which would send the front end an error message. And another cool thing to realize is that when it changes the actual source of the input data, it had to change the variables everywhere else. So, it really thought about the actual node by node flow, not just changing the input and the output. So, if you don't understand all of those changes that I just explained and like why that's important, it's not a huge deal. The point I was trying to make there was just showing you that Claude will look at your workflows and fix them for you before you ever turn them into a front end. And you guys know that my job is to make complex or intimidating things as simple as possible. So, that's exactly what I'm going to do today. We're going to walk through it all step by step, and you're going to realize how easy it actually is. So, real quick before we get into that, I just want to do a quick demo of the final product of this that took me basically 40 minutes. where I started with this workflow. Claude Code turned it into this workflow and now we have this front end where I can put in the information and let me just show you guys a quick demo. So I put in some information, I put in a product photo and I'm going to go ahead and hit generate. And now what happens is it basically tells us on this right hand side that we have this one job processing. If I go into the actual end workflow that it's hitting right now and I go to executions, you can see that there were some failures when I was doing testing and stuff. But what we're going to notice is that we get a new execution right here pop through. And then when that's finished, it will automatically display right here where we can see the video and we'll be able to download it. So you can see that the workflow just finished up and you can see we have our video right here which is displayed in the website. We can click on this link to download it. And also just for reference, here is the original cologne image that I uploaded. So you can see that it pretty much looks the exact same. So I'm not going to be diving into this actual workflow that produced the results. I already made a video about this. So if you want to check it out, I'll link it up there. All right. Hopefully I'm not losing you already. I know that this workflow and this demo may seem a little bit complex, but we're going to set up everything step by step from the full process of taking an edit in workflow, optimizing it with claude, and then getting it onto a front end and deploying it. Okay, so step one is open up VS Code. This is where I like to work with Claude Code as an extension because the actual visual interface is just so much cleaner. It's so much better and you don't have to look at your nasty terminal or anything like that. VS Code's been around for a long time and it's a very trusted platform. So once you're in here, you're going to click on this lefth hand side and go to extensions. And then you're going to type in up here cloud code. Once you do that, just click on cloud code and then go ahead and install it. And when you install it, it should prompt you to sign in with your Enthropic with your cloud account. And that's how you actually link them together. Now, once we have that extension installed, we actually need to start up a project. So what I'm going to do here is I'm going to go to the lefth hand side and go up to this button right here, which is the file explorer. And it says you have not opened a folder yet. So go ahead and open one up. So I'm in my documents. I'm in a folder called Agentic Workflows. And then I'm drilling down to another folder called Enitident app which has nothing in it. So it's a blank folder. It's a blank project. And I'm going to select it which now gets us into this environment. So you can see up top we've got Enident app which is our project. And on the lefth hand side over here we're going to see all the other files that we add to this or that get created. In the middle is where we're going to actually be chatting with Claude Code. And the way we do that is by clicking on this little Claude Code extension button right here and then closing out of whatever else we don't want. And on the right hand side is where we have the actual like VS Code agent chat, which means we can talk to this agent about like what's going on in here. And honestly, I never really use this because the Cloud Code agent is smart enough. So that's kind of the interface we're looking at. I know it may seem a bit overwhelming right now cuz there's lots of new buttons and there's lots of places to look, but I'm basically just going to tell you guys about what you need to know. And if you follow this demo all the way through, by the end of it, you'll have a really good understanding of what you're looking at and how to work with Cloud Code. All right. So the first thing that we want to do whenever we start up a new project is we want to give it some sort of guidelines about what are we actually doing in this project. And the way we actually do that is we just have to create a file which is essentially the system prompt and it's going to be called claude.md. And so what you could do is come over to the lefth hand side and you could click on new file. You could type in claude.md and then we could basically just start working in this file or we could have claude itself edit the file. And the reason why this popped up over here is just so we could view it. You could close it. You could open it back up. You could open up like 10 different files at the same time if you want to. But let's just keep our screen clean and keep open just the cloud code for now. Okay. So, what I'm going to do is have Claude Code help us write that cloudMD file. So, let me just read out what I actually wrote to it. So, I said, help me create a cloud. MD file in this project to set up what we want to do here. This project is essentially built to help me turn my NN workflows into apps. So, there's going to be a few pieces. The first piece is going to look at my workflows in Nitn to make sure that they're ready to go as far as having the right intake of data and output of data so that if it's a web app, when the app sends data to NN, it can properly receive it. And then also when NN sends a response back to the front end, it's properly displayed just like we saw here in this example. I wanted to make sure that when NN sent the response back to the app, it could be displayed as an embedded video. And I also wanted to make sure that when we sent over a JPEG file to NN, it could receive it properly. Then I came back and said once we know the workflow's optimized then we have to start building the front end. So we're going to start building it and testing it in a local environment and then once we like how the app looks and functions then we'll push it to GitHub. And GitHub is basically just a home for our code and it will let us do different versions and see all the changes. And then what happens is our code lives in GitHub but then we're going to have Verscell sync up to it. And Verscell is where we actually deploy those apps on the web. And I have a diagram to break this down in a few minutes here, but essentially the idea is we work in cloud code, we push changes to GitHub, and then our actual real web app on the public URL always reflects the most recent version. So it's just super easy. So there's also a couple things that we're going to utilize. One of them will be the Niten MCP so that you can understand NIDN nodes, configurations, templates, and you can look through my NIDN instance and create and edit workflows and things like that. I'm also going to give you access to two skills, the end skills and the front-end developer skills. And I'm going to give you access to the GitHub MCP so that you can actually push changes to my GitHub. And then I finish that off by saying with all that in mind, ask me any questions that you may need and help me make this file concise so that we keep everything neat and lean. So before I send this off, I wanted to talk about these different modes. So right here, you can see I'm on bypass permissions, which is orange. We could go to ask before edits, which is a lighter orange. We could go to edit automatically, which is white. Or we could go to plan mode, which is blue. And so whenever I'm doing something like this, or whenever we're setting up an initial prompt. I always like to use plan mode because it thinks a lot better and it asks you questions and it basically just lets you guys have a conversation before you actually do anything. So I'm going to go ahead and shoot off this prompt in plan mode. And we're going to see Claude code think about what it needs to do. It's going to first look through the current structure to see if there's any files. It's going to understand what we're doing here. And you can see right here it said, "Before I draft the file, I've got a few clarification questions." So, what's the typical structure of the workflow that you want to turn into an app? Right now, let's just say various triggers because we don't actually know what we want to turn into an app yet. For the project structure, do you have a preferred project structure in mind? I'm just going to say propose structure, whatever. I don't really care. Repo strategy. Should each workflow become its own repo in GitHub? Yep. We'll just do separate repos, one for each app. And then for styling, we'll just go ahead and go with Tailwind CSS. And if you don't know what this stuff means, you can just go ahead and ask it to. That's the beauty of Claude code is that we don't have to really understand all the code and exactly what it's doing. We just have to be able to communicate our thoughts clearly. And if we get confused, just ask Claude what it's doing and why. Because it's really good at that. So you can see it gave us this plan for the claude file and I said, "Yep, that sounds good." I'm going to go ahead and autoaccept. And now it's going to update this claude MD file, which right now has nothing in it as you can see. And it's going to basically just write in the system prompt. And you can see that it just happened in real time right there. Okay, our system prompt is configured. So next, what we have to do is give it access to all of those things that we mentioned like the skills, the servers, whatever the MCP. But before we do that, let me just show you guys exactly what we're doing here on a whiteboard, so it all makes way more sense. So in my last video, I showed you guys how we can use cloud code and give it the end MCP and the end skills to build workflows for us in our own end instance. So we're kind of building on top of that here. If you haven't watched that video, that one might be a good one to start with and then come back to this one. So I'll tag that right up here. But essentially the end MCP gives Cloud Code access to all the nodes, configurations, workflow patterns, things like that. And end skills gives Cloud Code all the knowledge about expressions, how to use this MCP server, how to code, all this kind of stuff. So the TLDDR is you're essentially giving one of the smartest brains in the world access to all of the information about Nin that you could possibly need. So now we're building on top of that and we're creating web apps. So what we do here is we've got once again cloud code with MCP servers and with different skills and now what we wanted to do is create us a web app. So in order to create that web app first of all we use end to see the backend automation that we want to turn into an app and we create the front end to actually like collaborate with that. Now what is the front end? It's actually just code. So claw code is building the code that displays the website and what we do with that code is we push that to GitHub in something called a repository or what a lot of people just call a GitHub repo. And then we have Verscell which actually deploys it on the internet so that other people could access this app and Verscell is constantly looking at your GitHub repos so that if anything changes over there you can basically have that change be instantly reflected on your real app. So like with this web app the actual code for this lives in my cloud code locally. It's also reflected on GitHub and then Verscell has deployed it. So let's say I wanted to make this green instead of blue. I could tell cloud code to change the code to make it green and then I could say push this to GitHub. So, GitHub would grab it and then Verscell would grab it from GitHub and then in like 20 seconds we would see that this website would be green instead of blue. Hopefully that architecture makes sense. Now, let's get back into cloud code and let's start connecting all these things that we need. So, now what I'm doing is I'm saying connect all of these MCP servers and skills and just let me know if you need anything else. So, I'm giving it the URL for the NIDN MCP server. I'm giving it my cloud URL. I'm giving it my NADN API key. I'm giving it the GitHub MCP server URL. I'm giving it my GitHub personal access token. I'm giving it the repo for my the end skills and I'm giving it the repo for the front-end design skills. All of these links that you'll need, I'll just put in the description of this video. And what I'm going to do is I'm going to turn this on bypass permissions mode because I just want it to go without me having to approve everything. So, I'm going to go ahead and shoot this off and let it work its magic. And while that's running, I'll show you guys two things. The first one is how do you get bypass permissions mode if you don't see it natively right there? Well, you go to your settings down here and then you would type in clawed code and then right here you just have to turn this check mark on that says allow dangerously skip permissions. Now, I know it sounds dangerous, but it's not too bad as long as you're watching it and like, you know, making sure that you're not telling it to go delete all your files and things like that. Now, the second thing I wanted to show you is how to get your GitHub personal access token. So, here is my GitHub. All you have to do is just go to GitHub, create an account. It's free to create an account. And then you're going to go up here to your settings and then at the bottom of your settings you should see developer settings and you're going to go ahead and create one of these personal access tokens and you'll create a fine grained token. So that's all you have to do. It'll give you basically an API key and then that's what you're going to give to cloud code here so that it can set everything up. And when you actually go to create this token pretty much just give it a name. I leave mine on public repositories. I change the expiration to never. And then the last thing is about permissions. And usually what I do is I just add all of these. There might there's like 23 or something, but just add all of them. If you realize later you want to restrict something else, you can just go ahead and create a new one or restrict it in cloud code. It's not a huge deal. And then generate the token and pop it over to cloud code. And so the other thing to look at, and throughout this tutorial, you might see me use like a slashclear or some other things, but if you hit slash, you can see that there's other things that we can look at. So we can attach a file, we can mention a file from a project, we can switch the model. So we can go from default or sonnet 4.5, opus, haiku. We could also turn on thinking. We can manage our MCP servers, agents, hooks, memory. We can do all of these other slashcomands as well. And then if you actually use cloud code in something like cursor or in the terminal environment, there's even more commands and like more things you can do with agents and like plan mode and things like that. But like I said, VS Code just makes this all look a lot cleaner and a lot less intimidating, which is why I wanted to do cloud code on VS Code in this tutorial. So now it's asking me, how would you like me to configure all of this stuff? I'm just going to say create the MCP JSON file because I don't want to do it myself. I just want you to go ahead and take care of all of this stuff. And that's the thing that's interesting about this because when you go to a lot of these MCB servers or skills, it'll basically tell you installation steps and it will say, "Hey, go add this to your cloud code file or hey, go install this plugin." And I don't want to actually do that. I just want Cloud Code to do it. So, all I do is I give it the raw URLs. And what you can see here is when I give it the raw URLs, it just uses its web search tool and it reads the page and understands installation and then just does it. So a lot of times if cloud code comes back to you and says, "Hey, what you need to do is do this." You can come back to it and just say, "No, you do it." And most of the time it'll just do it. Every once in a while it'll say, "I actually can't. I need you to do this." But most of the time you can just tell it to do it for you. Like right here it says, "Install the skills by running these commands after restart." I'm going to say, "I don't want to install those commands. Can't you just do it for me? And what do you know? Done. Both skill sets are now installed. So I didn't have to do any of that. So right here we have the MCP JSON file. And this is where you can see we have our NIDN MCP server and we have our GitHub MCP server. And you'll notice that we don't actually see the skills in here. And the reason why is because the skills were installed globally, not just within this one project that we're working in called end to app, which is cool because later if we make another project, we already have those skills installed. And if you don't believe me or you get confused, you just ask Claude. I said, why don't I see the NIN skills in this project? And it basically just came down and said, yeah, they're installed globally. Here are the seven Naden skills. And for some reason, it said six. So, not the best at counting. But then we also have the front-end skill down here. So, that's just to prove that they are actually installed, even though you don't see them over here on the file explorer. Now, something else to keep in mind about this MCP JSON file is that it has your real GitHub token and your real API key in here. So if you've shared this file for some reason or someone had access to this, they would be able to do anything in your end because they have this information. So obviously I'll be deleting these credentials after this video goes live. But just something else that I wanted to make sure you guys were aware of. That is why typically when you're doing certain things, you're going to have like av file and you'll have your actual scripts and things call on those credentials so they only use them when they need them. And like all those files are encrypted. So don't want to confuse you guys. We're not going to dive into that right now. Just something that you should be aware of. All right, so what I'm going to do now is I have to restart Cloud Code, otherwise it won't actually reflect all that. So really what I'm going to do is just close out of VS Code and then we're going to open it back up and then everything should be all set. All right, so I'm going to go ahead and do a slash command. I'm going to do /cle just to get rid of this conversation so we can start fresh on a new context. But keep in mind, every time we talk to cloud code, it's still going to be reading through our cloud.MD system prompt to understand what we're doing in this project. Okay, so what actually are we going to turn into a web app? Well, let's make it pretty simple. I've got this workflow here, which is just an AI agent, and it's a chat window here, and it's called fitness coach. So, in here, I basically just have a system prompt prompting this agent to be a fitness coach with stuff like um you know, weightlifting, working out, some basic nutrition stuff, just so we can make a little demo here. But you can see that this is not ready to go to be turned into a web app. Not really, at least. But all I'm going to do is just tell Cloud Code to look for this workflow and help me turn it into a web app. So, we're going to go back into cloud code. I'm going to change this to plan mode because we want to like brainstorm how we're going to do this. And I'm going to say I've got a workflow in my edit instance called fitness coach. I want to turn this into a web app. So, before we do that, please take a look at it and help me change it so that it's ready to go and I can talk to it from a front end. So, I'll shoot this off and we're basically just going to watch it think. It's going to walk through its steps. And what you can see right now is that it's using the Nitin MCP to find our workflows. Now it was able to find the fitness coach. So it's going to analyze it. And you can see that it found the workflow, but there's an issue, which is it's using the chat trigger, which is not really designed for a custom front end. So it's going to write up a plan to change this workflow for us. So here it asks, do you want the fitness coach to remember conversation history? Because right now in the actual workflow, there's no memory. So what I'm going to do is say, yeah, that's a great feature. We want the coach to be able to remember like it's having a conversation. Okay. So here it came up with a plan which is to prepare the fitness coach workflow to be a web app. So it tells us what the problem is. It tells us what it's going to do. So it's going to replace the chat trigger with a web hook. It's going to add a window buffer. It's going to add a window buffer memory. It's going to update all these connections. It's going to configure the agent input. And then it's going to publish the workflow as well. And so we could obviously make some changes here if we want. I want to see how it did on its own. So, I'm going to go ahead and just auto accept all these changes. I'm going to make this bypass permissions so that we can just basically see when it's done. And what it does is it creates a to-do list, which is really cool because it helps the actual model stay on track, but it also helps us understand its thought process and what stage it's on. So that way, a lot of times when you're working with Cloud Code, you can have it open on one monitor, you can be doing something else, watching a YouTube video, whatever you want to do, and just kind of checking in and making sure that it's staying on the right path. And a lot of times it's not perfect, but what's so cool about cloud code is that it runs into issues and it analyzes what went wrong and then fixes it. So right here you can see that there was an error because the key parameter for the session ID for the memory was was missing. And so it figured out that the body is actually nested and then it went ahead and just, you know, changed the workflow after it realized that. So it's all about how much context you give it and how clearly you can explain what you want. And that's also why the planning mode is so helpful. But it looks like that workflow has been updated. Now, what I'm going to do is go back into edit end, which was this workflow right here. And I'm going to hit refresh, and we should now see that the workflow is changed, and it should be ready to go for our web app. So, we've got a web hook, which is post request. We've got our memory, and let's see if it changed the actual configuration of the user message, which it did. So, we also, I noticed, don't have a responder web hook node. So, what it's doing is it's using respond when the last node finishes with the first entry. So, I think we should be all right. But later if we end up needing to change something, we would just say, "Hey Claude, this didn't work. Go fix the workflow." All right, so back in Claude, what I'm going to do now is I'm going to clear out this context once again, and I'm going to go back into plan mode, and we're going to talk about what we want this actual web app to look like. Hey Claude, help me create a plan to actually build out this front end for the end workflow. I want to make sure that in your plan, you're going to be using the front-end designer skill, the end tools skill, and all of the resources that you have to make this as good as possible. We don't want the web app to look AI vibecoded. We want it to look professional, very minimalistic, and we want it to be super clean. We also want it to be a little bit gamified to incentivize people to come in and to talk to the fitness coach. Maybe we can have the main chat interface and then on the right hand side, we can have a little bit of gamification with um a tracker for how many times people have talked to the fitness coach and maybe they can level up after, you know, every five or 10 messages or something like that. Ask me clarification questions to make sure that we're not leaving any holes in our plan here and any suggestions that you may want to make that I didn't yet think of. All right, I'm shooting that off. I'll let you guys know if anything important happens. All right, so I got some questions here. The first one is which end workflow should this front end connect to? We're going to do the existing workflow which it should be able to find. Now we have what core features should the fitness coach provide when users chat with it? General fitness Q&A, personalized workout plans, progress tracking. Yeah, we'll just do all of these. Gamification. For the gamification system, what should users be leveling up and earning rewards for? Just a message count. Let's just do that. And then what's your preference for user data persistence, remembering their level, message count, things like that. And I'm just going to say let me decide later. We can get into a bunch of backend database storage and, you know, authentication in different videos. We want to keep this one simple. So, for now, we're just going to go with that. Now, it's asking for the name or ID of the existing fitness coach workflow, the one that it found earlier. So, I'm just going to go ahead and type in the name or ID. And honestly, now that I think about it, it probably would have been better if I didn't clear the context and we just kept talking on that previous thread. But what are you going to do? Some more questions now. What color scheme or brand aesthetic do you want? I'm going to go with dark mode primary. The app name, let's just go with yeah, fit coach AI. And then mobile layout. Should the gamification panel be visible on mobile or only larger screens? We're just going to go with always visible. Keep things nice and easy. All right. So, the plan for the Fit Coach AI web app is done. There's tons of stuff in here with structure, text stack, key features, all this kind of stuff. Obviously, you would read through this and make some changes if you want, but we're just going to see how Cloud Code does on its own. So, I'm going to go ahead and auto accept those changes. And of course, what it's going to do is set up a to-do list, as you can see right here. So, I'll just check in with you guys when we have something ready to test. Okay, so there we go. The to-do list has been completed and Fit Coach AI is ready. You can see that it's actually living right now on a local host which basically just means only we could access this. So if I gave you this exact, you know, HTTP address, it would pull up your own local host, whatever you're hosting on 302. So what we need to do is make sure it works here and then you can see when you're ready, we'll initialize the git and we'll push it to GitHub and then we'll deploy it to Verscell. So I'm going to go ahead and open up this local host and let's take a look at what we've got. All right. So, this is the Fit Coach AI interface that it came up with. And you can see we've got ready to crush your goals. You can try creating a 30-minute hit workout. What should I eat after working out? How do I stay motivated to exercise? We've got some stats over here. So, we've been a member since January 14th. We've got rookie level one 11 points to the next. We've got a road map. So, it did everything that we were looking for. Let's see if it's actually able to talk to our NN workflow. So, I'm going to start off by just saying, "Hey there." We'll shoot this off and let's see if we get some sort of response back. Okay, cool. So, it gave us a response but it doesn't look great as you can see because what happens is in n when we respond we get the whole JSON body. So, we get the output and then we get all this other stuff. So, if I actually go to the fitness coach workflow, we go to executions, we can see that when cloud code changed the workflow, it did everything right, which is great. But the actual output of the fitness coach is this JSON body. So basically the front end displays this JSON body rather than just the actual output which is what we want it to display. So super easy. What we're going to do is we are going to of course go back into Cloud Code and just tell it to fix that. So what I'm going to do is take a screenshot of this output just so that Cloud Code can see exactly what I'm talking about. We'll go back in here. I'll paste that in. So it's working good. But when the agent responds to us in the app, it actually displays the entire JSON body. We don't want to see the field called output. We just want to see the actual output itself. And for something simple like this, I'm not even going to go into plan mode because it's a very easy request. So, it should just be able to change the front end to configure just displaying the actual output. All right, sweet. So, it said that it fixed that. I'm going to go back in here and I'm going to say, what's the best time of day that I should be working out and eating? So, just something random. Shoot that off. And hopefully this time we only get back the actual output that we're looking for. Another thing that I am noticing though is nothing's actually happening on the gamification side. So, I imagine that this should be giving us points each time that we get a message back. As you can see, we did get a better output now. Although, I don't like that it's coming with like markdown and bold. So, that's something that we would actually change in the system prompt of the agent here rather than in the front-end development. So, not a huge deal, but we're not getting any points. So, that's the next thing that we have to tell Claude to fix. Awesome. That change worked. But now the issue is we're not actually getting any gamification. So, I've sent two messages now, but we still have zero points on the app itself. So, fix that. Okay. So, it looks like it reset some stuff with local storage and whatever this is talking about. Now, let's go ahead and try again. It seems like that should have fixed. Although, now we have to see if we can refresh the page. Uh-oh. So, this is the actual local host that we were supposed to be using the app on, but there's some sort of issue here even when I refresh. So, let me take an a screenshot of this and send this over to cloud code. I can't access the app anymore. Okay, so it says that it rewrote everything with a simpler approach. We should need to try to refresh. And there we go. Cool. So, we actually do have our two messages that we already sent. Let's just say um create a 30-minute hit workout. Shoot that off. And hopefully when the agent responds we'll get another point on the right hand side. Cool. We did. So we got the response and we also got another message. Now finally before we actually push this to GitHub I wanted to show you guys that we could change the system prompt with cloud code. So one last request. Awesome. That's working. My last request is that the agent is responding with markdown formatting and bold stuff. So I wanted to just respond in complete natural language paragraph form like an actual human would. So go ahead and make that change in the nin workflow and update the system prompt of the AI agent. All right, cool. So the end workflow has been updated. It went ahead and changed the system prompt so that now it should only be responding in natural language. I'm just going to go ahead and go to the workflow and refresh it. Make sure everything is all set. Looks like we've got it saved. It's still published. So, let's just do one final test in here. So, I set it like that because I want to make sure that the memor is working. I want to make sure that it comes back and responds to us in natural language only, no formatting, and that once again, we will get the um extra message. Okay, so we still got a little bit of bold things and we'd probably just have to go back. But what I wanted to actually make sure of was that in here it actually did change the system prompt, which you can see that it did. So, I guess maybe we just weren't explicit enough at actually how to prompt it. But the point I was trying to make, which is what I think is really important, is that what we just did is we had a random workflow. We had Cloud Code look at it, optimize it for a front end. We built the front end, and then we went back and forth with Cloud Code when the front end wasn't working how we wanted it to. And then we also had Cloud Code change the actual backend end workflow itself. So everything that we're doing here is just using our natural language to cloud code and just speaking very clearly about what we want. And that's obviously a good example. I wasn't clear enough about the way that I wanted it to respond. So I would just have to go back one more time. But now let's actually move on to the next step here where we're going to take the code and we're going to push it to GitHub and then have that automatically sync with forcell. So first of all, what you need to do of course is go ahead and go to GitHub. So this is my GitHub. You've already made your access token to give it to Cloud Code. But now what we need to do is create a repo. So I'm going to go up here, create new. I'm going to click on new repository. I'm just going to call this fit coach- aai since that is our name of our app. And then I'm just going to do dash app. Um, I'm not going to do description. We'll just leave it public. I'm not going to add a readme or get ignore any of that kind of stuff. I literally just added a name and I'm going to create that repository. Now, what I'm going to do is I'm just going to take the actual URL up at the top in my browser and copy that. Go back into cloud code. We're going to go ahead and, you know, let's just keep going in the same context window. I'm going to say here is the GitHub repo for this app. Paste in the URL and say please push this to GitHub so we can sync it with Forcell and get it live, get it deployed. So I'm going to shoot that off. I'm also leaving it once again on bypass permissions because this is a pretty simple request. And now it's going to go ahead and do that for us. And now in the GitHub repo, you can see there's nothing here. But what's going to happen is it will get um all of our files will be pushed to this environment. And once again, as you're working with GitHub and Verscell, you can ask Cloud Code any of the questions you may have about how they work together or why it's important, and it will get back to you. All right, cool. So, the code has been pushed to GitHub. Now, it says next steps would be to go to Verscell and import that repository. And then it also says to add the environment variable, which would be our actual web hook. But we'll we'll take a look at that when we get there. So, let's go to GitHub real quick. And if I refresh this repo, we can now see that we have these files in here. And basically these are the files that hold the code of our fit coach app. Now what I'm going to do is I'm going to go to versel which is right here. This is the UGC one that I was looking at earlier. And what's going to happen is you can see that this is pulling from my GitHub repo for this code. So what I'm going to do here is click on add new. We're going to add a new project. And I should be able to see import git repository. And right here we have our fit coach AI app. So I'm just going to go ahead and click import on that repo. And now I could change the name or the team or the preset or whatever I want to do, but I'm just going to go ahead and click deploy. All right, cool. So, we just deployed this project. I'm going to go back out to my dashboard and I'm just going to show you guys how you can get there. So, if I go back home, you can see the different projects that you have in your Versell. So, if I just give this a refresh, we can see we have the Fit Coach app. So, I click into that. What you can look at here is deployments. So, every time you have a new version, you can see when it was actually uploaded. We can look at our logs. We can look at gateways, storage, we can look at all this kind of stuff. But right now, what I wanted to do was actually just click on the project itself. So we can go to that domain, which is fit coach-ai-app.vercell.app. So if I open that up, this is what we see. And we're no longer on localhost. Now we are on this domain, which means that if I gave you guys this URL, you could access this and you could talk to like my instance and all that kind of stuff. So what I'm going to do is we're just going to say, how do I stay motivated? And what we get is a server configuration error. And so we need to figure out what happened here. So the first thing that I want to look at is I'm going to go to my actual end workflow and I'm going to go to executions. Now what happens here is we don't see that execution that we just did. So what that tells me in my brain is that we have our front end deployed on the web. We have an end deployed on the web but for some reason they're not talking to each other. So when I hit this button which says you know like when I send the message when I hit that button normally what that does is it sends this string of text to the edit and web hook but for some reason that's not configured. So if you remember we went back into cloud code and it says to add the environment variable which is the our edit and web hook and then we have the actual web hook to hit. So this is one of those examples like I was talking about earlier where we have an environment variable that only gets called when we need it. And so the reason why Cloud Code built it like this is because they didn't want anyone to be able to look at the GitHub repo and find our URL for our NN web hook. Now, in this case, I don't really care because if I have a web hook, I could set up my own authentication so that only people that make an account can actually talk to it. But it's important to think about because if I gave you guys this URL and I didn't have any, you know, web hook security, someone could spam it thousands of times and it would cost me money because it's on my NN with my OpenAI credentials or my open router credentials. So in this case, what you would do is you would add the environment variable. So you would come into where' my Versell go. So we'd actually be able to add that by going in here. We'd go to our settings. We could scroll down here to environment variables and we would basically just add one and we would have the key be nadn web hook URL and then we put in the actual URL and that way Verscell would understand to call on it when we hit that button. But in this tutorial I just want to keep things pretty simple. So, what I'm going to do is just go back to cloud code and just tell it don't do the environment variable. Just hardcode my web hook in the code because I also wanted to just show you guys how we can push that change instantly to forcell. I don't want to use my web hook as an environment variable. Please just change the code so the web hook URL is hardcoded in there. It's going to make it much more simple. Okay. So, now the web hook URL has been hardcoded into the code and we have to redeploy that. So, I'm going to import the changes to GitHub. You can see in my forcell it's rebuilding this real quick. And in GitHub if I refresh you can see that now there are two commits. So every time that you change the code and you push it to GitHub it will have another version here. So that way you can see what happened each time. And now you can see that this has been redeployed onto our um app in Verscell. So I'm going to go to the new landing page and we're just going to try to ask another question. So, um, design a beginner strength routine. And this time it's actually working. It looks like it's writing back some sort of response because it did hit our end web hook. That's at least the hypothesis here. Cool. So, now it responded with much more natural language, which is cool. You know what I think actually happened last time is maybe we just didn't like publish the most recent version. But anyways, in the fitness coach and it in workflow, I'm going to refresh this. We're going to see if we got that execution, which is right here. And we know it worked in this case because the actual post request that got sent over was design a beginner strength routine, which is exactly what we just said in our app right here. And I would also feel a little bit bad if one of you guys followed this tutorial and then woke up with like thousands of, you know, credits spent on your account. So another thing you can do is they have like a security review function in Claude Code. And obviously claude code with Opus 4.5 is going to be really really good at like reading your code and understanding if there's vulnerabilities which is something that you should you know regularly just say hey by the way like what should I be aware of and what like risks do I have? So I basically said here do a full security review of anything that I've pushed to GitHub to make sure that I don't have any credentials exposed online because my GitHub repo is public and my workflow is you know out there too. So, it searched through everything and it said, "Okay, cool. So, your hard-coded ended web hook is out there, which I told it to do that. It's fine. I understand that." And that basically just means that people could see this and then hit the web hook directly. So, that is a problem, but if you set up your own authentication on the back end or obviously this is just a demo, so I'm not too worried. And the recommendation would be to move this to an environment variable. And then it also talked about my credentials, which is something I brought up to you guys earlier, which is the fact that those are all stored in this MCP file. So in this JSON file, I have my credentials for GitHub and Nitn. So if someone got this file, that could be a big problem, too. But this file is stored locally. So I basically said to it, hey, why do I have to rotate my credentials? Aren't they safe for my local environment? And it basically said, yeah, you're right. Your credentials are safe. I was being overly cautious because this file is not in the GitHub repo. It's not online. it only exists locally on your machine. And I know that this project itself right here, like this app, isn't anything too complex or like super impressive. But the idea is now that you understand like this whole framework and how everything works together, you can continuously iterate upon this and you can maybe even add more end workflows in the back end using the help of cloud code, fixing things on the front end, adding different functionality, pushing it back to GitHub, and then it continuously gets better. Cuz I mean, think about it with something like this, it's really your imagination because you can control what you want on here. Maybe you want somewhere where they can upload progress pictures or a food logger or a workout logger, things like that. And then by default when you deploy something on Verscell, it'll have the domain that ends inversel.app. And so you will want to buy a domain somewhere else or just buy one right here in Verscell and connect it. And it's pretty simple. You would pretty much just click on this plus right here and you could either buy a domain or add a domain. You'll have to do something with the DNS records if you're transferring in a domain from like NameCheep or Squarespace or wherever you bought the domain, but it's super simple. You just have to go in there and change like an A record. And it may seem a little confusing, but just have chatbt or Gemini or Claude walk you through it. It's really easy. Or Claude Code. Just have Claude code tell you how to do it. And then the last thing I had to talk about cuz I know there's going to be tons of comments about this is the Claude plan. So, yes, you could 100% start on pro because you do get access to claude code if you're on the pro plan. But, I will say you probably will reach your limit pretty quickly. But, I really wouldn't stress this. It's just one of those things where start on pro. If you hit your limit, okay, go upgrade to the $100 a month plan. If you hit your limit on the $100 a month plan, upgrade to the $200 a month plan. And I know $200 a month sounds expensive, but if you think about how much you can do and if you think about how much would it cost for me to pay like a top tier developer to do this kind of stuff, it is significantly more than 200 bucks. So that 200 is going to be a huge bang for your buck. Once again, if you're on 200 a month and then you realize you're not using it all the way and it's not worth it, then just downgrade. It's not going to be permanent. Okay, so we just covered a ton of information. So let's just recap what we just did. First of all, what we did is we connected Cloud Code to the Enidin MCP server to look through how Enidin works and to be able to go into our instance, get workflows, create them, edit them, publish them, all that kind of stuff. And then we gave it access to the end skills so it actually knows how to use that server and how to build end to-end workflows. After that we were able to have cloud code optimize the workflows to be ready for a front-end deployment. So we also gave it access to a front-end designer skill. We gave it access to the GitHub MCP so that as we're building this web app and we're hosting it and testing it locally. Once we have that code ready to go, then we push it to GitHub which automatically syncs with Versell and then deploys it on the web. So now other people can actually access your app. It's not just on your own local environment. And then of course because of this whole framework, as soon as you update the code and push it to GitHub, it automatically will update on the web. And now that you're already in this project called NEvent app or whatever you called yours, if you wanted to, you could just do another workflow in this project because you already have the cloud MD file. You already have your MCP server set up. You already have your skills set up globally. You have this folder right here, which is all the stuff you need for this app. But if we wanted to, we could obviously just come in here. We could clear out this conversation history and we could say, "Okay, cool. Now I want to build a front end for this other app and just go through that whole process again." And because all of this is stuff that it can look through, it could maybe even take inspiration from other apps that you've done in the past. All right, so like I said, Cloud Code is super cool and it's something that it's been really, really impressing me, which is why I'm diving so much deeper into it and why I plan to bring a lot more Cloud Code content to my channel. So, please let me know what include code is confusing you guys, what else you want to see, what type of use cases as we get into more and more automation building in cloud code that's not actually built on nadn. But that's going to do it for today's video because I know that was a lot, but I hope that you enjoyed or I hope that you learned something new. I know it's intimidating, but just stick with it. I think it's really really going to be worth it if you learn these skills now. But as always, I appreciate you guys making it to the end of the video and I'll see you on the next one. So thanks so much everyone.