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

All right, so a lot of us have been building N8N workflows for a while now. So today I'm going to show you how you can take any of your N8N 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 frontend and then connecting it to your N8N webhook. 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 backend before you build the frontend. But let me show you guys what I actually mean by that. Otherwise, it just sounds like a bunch of gibberish. So here's 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 frontend. 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 webhook. 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 realized that it's gonna come through as a Base64 string when we send it over webhook, 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 frontend 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. Cloud 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 editing 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. Load it. And also, just for reference, here's 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 1 is open up VS Code. This is where I like to work with Cloud 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 gonna click on this left-hand side and go to extensions, and then you're gonna 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 Anthropic, with your Claude 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 gonna do here is I'm going to go to the left-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 Anident App, which has nothing in it. So it's a blank folder, it's a blank project, and I'm gonna select it, which now gets us into this environment. So you can see up top we've got N8N to App, which is our project. And on the left-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 Claude 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 gonna 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 Claude 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 gonna be called called Claude.md. And so what you could do is come over to the left-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 Claude code for now. Okay, so what I'm going to do is have Claude Code help us write that Claude.md file. So let me just read out what I actually wrote to it. So I said, help me create a Claude.md file in this project to set up what we want to do here. This project is essentially built to help me turn my NNN workflows into apps. So there's going to be a few pieces. The first piece is going to look at my workflows in NNN 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 NNN, it can properly receive it. and that also when N8N sends a response back to the frontend, it's properly displayed. Just like we saw here in this example, I wanted to make sure that when N8N sends 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 N8N, 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 frontend. So we're gonna 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 Vercel sync up to it. And Vercel 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 gonna utilize. One of them will be the n8n MCP so that you can understand n8n nodes, configurations, templates, and you can look through my n8n instance and create and edit workflows and things like that. I'm also gonna give you access to two skills, the n8n skills and the front-end developer skills. And I'm gonna 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 too. 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 Cloud File, and I said, yep, that sounds good. I'm gonna go ahead and auto accept, and now it's going to update this CloudMD 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 could 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 N8N MCP and the N8N Skills to build workflows for us in our own N8N 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 N8N MCP gives Cloud Code access to all the nodes, configurations, workflow patterns, things like that. And N8N 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 TL;DR is you're essentially giving one of the smartest brains in the world access to all of the information about n8n 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 want it to do is create us a web app. So in order to create that web app, first of all, we use n8n 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 Claude 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 Vercel, which actually deploys it on the internet so that other people could access this app. And Vercel 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, the actual code for this lives in my Cloud Code locally. It's also reflected on GitHub, and then Vercel 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 Vercel 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 EnidN MCP server. I'm giving it my cloud URL. I'm giving it my EnidN 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 EnidN 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 gonna do is I'm gonna turn this on bypass permissions mode because I just want it to go without me having to approve everything. So I'm gonna 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 Claude 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 gonna go up here to your settings. And then at the bottom of your settings, you should see developer settings. And you're gonna 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 gonna give to Cloud 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 the /clear 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 slash commands 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 MCP 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 gonna say, I don't wanna 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 N8N 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 n8n 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 n8n skills in this project? And it basically just came down and said, yeah, they're installed globally. Here are the 7 n8n skills. And for some reason it said 6, so not the best at counting, but then we also have the frontend 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 n8n 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 a.env 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.env 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 /clear 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 Claude Code, it's still gonna be reading through our Claude.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, you know, weightlifting, working out, some basic nutrition stuff. Just so we can make a, 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 gonna do is just tell Cloud Code to look for this workflow and help me turn it into a web app. So we're gonna go back into Cloud Code. I'm gonna change this to plan mode because we wanna like brainstorm how we're gonna do this. And I'm gonna say I've got a workflow in my NNN 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 gonna watch it think. It's gonna walk through its steps. And what you can see right now is that it's using the N8N MCP to find our workflows. Now it was able to find the fitness coach, so it's gonna 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 gonna 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 gonna do. So it's gonna replace the chat trigger with a webhook. It's going to add a window buffer. It's gonna add a window buffer memory. It's gonna update all these connections. It's going to configure the agent input, and then it's gonna publish the workflow as well. And so we could obviously make some changes here if we want. I wanna see how it did on its own. So I'm gonna go ahead and just auto accept all these changes. I'm gonna 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's 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 gonna do is go back into N8N, which was this workflow right here, and I'm gonna 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 webhook, 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 Respond to Webhook 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 edit-in workflow. I want to make sure that in your plan you're going to be using the front-end designer skill, the end-to-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 vibe-coded. 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 a tracker for how many times people have talked to the fitness coach, and maybe they can level up after, you know, every 5 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 NNN 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, tech 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 gonna 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 localhost, 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 localhost, whatever you're hosting on 3002. 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 Vercel. So I'm gonna go ahead and open up this localhost 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 HIIT 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 1, 11 points to the next. We've got a roadmap. So it did everything that we were looking for. Let's see if it's actually able to talk to our NNN workflow. So I'm gonna 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 NNN, 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 wanted to display. So super easy. What we're gonna do is we are going to, of course, go back into Cloud Code and just tell it to fix that. So what I'm gonna 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. I'm going to 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 frontend 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 2 messages now, but we still have 0 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 localhost 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 a screenshot of this and send this over to Claude 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 HIIT 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 want it to just respond in complete natural language, paragraph form, like an actual human would. So go ahead and make that change in the N8N workflow and update the system prompts of the AI agent. All right, cool. So the N8N 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 memory's 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 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 prompts, 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 frontend. We built the frontend, and then we went back and forth with Cloud Code when the frontend wasn't working how we wanted it to. And then we also had Cloud Code change the actual backend and, and 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 want 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 Vercel. 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 gonna go up here, create new. I'm gonna click on new repository. I'm just gonna call this fitcoach-ai since that is our name of our app. And then I'm just gonna do -app. Um, I'm not gonna do a description. We'll just leave it public. I'm not gonna add a README or a.gitignore, any of that kind of stuff. I literally just added a name and I'm gonna create that repository. Now what I'm gonna do is I'm just gonna 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 Vercel 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 all of our files will be pushed to this environment. And once again, as you're working with GitHub and Vercel, 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 Vercel and import that repository. And then it also says to add the environment variable, which would be our actual webhook. 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 Vercel, 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 Vercel. 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 product itself so we can go to that domain, which is fitcoach-ai-app.vercel.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 N8N 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 N8N 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 frontend deployed on the web, we have N8N 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 N8N webhook, 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 N8N webhook, and then we have the actual webhook 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 NNN webhook. Now in this case, I don't really care because if I have a webhook, 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, webhook security, someone could spam it thousands of times and it would cost me money because it's on my NNN with my OpenAI credentials or my OpenRouter credentials. So in this case, what you would do is you would add the environment variable. So you would come into— where'd my Vercel 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 n8n_webhook_url, and then we put in the actual URL. And that way Vercel would understand to call on it when we hit that button. But in this tutorial, I just wanna keep things pretty simple. So what I'm gonna do is just go back to Cloud Code and just tell it, don't do the environment variable, just hardcode my webhook in the code, because I also wanted to just show you guys how we can push that change instantly to Vercel. I don't want to use my webhook as an environment variable. Please just change the code so the webhook URL is hardcoded in there. It's gonna make it much more simple. Okay, so now the webhook URL has been hardcoded into the code. and we have to redeploy that. So I'm gonna import the changes to GitHub. You can see in my Vercel, it's rebuilding this real quick. And in GitHub, if I refresh, you can see that now there are 2 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 Vercel. So I'm going to go to that new landing page and we're just gonna try to ask another question. 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 N8N webhook. 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 N8N workflow, I'm gonna refresh this. We're gonna 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 hardcoded NNN webhook 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 webhook directly. So that is a problem, but if you set up your own authentication on the backend, 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 N8N. 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 in 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 edit and workflows on the backend using the help of Cloud Code, fixing things on the frontend, adding different functionality, pushing it back to GitHub, and then it continuously gets better. Cause I mean, think about it, 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 Vercel, it'll have the domain that ends in.vercel.app. And so you will want to buy a domain somewhere else or just buy one right here in Vercel and connect it. And it's pretty simple. You 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 Namecheap 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 ChatGPT 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, cause I know there's gonna 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. 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 Claude Code to the Enniton MCP server to look through how Enniton 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 Enniton skills so it actually knows how to use that server and how to build Enniton workflows. After that, we were able to have Claude Code optimize the workflows to be ready for a frontend deployment. So we also gave it access to a frontend 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 Vercel 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 Claude 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 frontend 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 in Cloud Code is confusing you guys, what else you wanna see, what type of use cases as we get into more and more automation building in Cloud Code that's not actually built on N8N. But that's gonna 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 gonna 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 all in the next one. So thanks so much, everyone.