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

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

@nateherk 39:58 8 chapters
[developer tools and coding][AI agents and automation][open source and self-hosting][content creation and YouTube][e-commerce and conversion optimization]
// chapters
// description

Full courses + unlimited support: https://www.skool.com/ai-automation-society-plus/about All my FREE resources: https://www.skool.com/ai-automation-society/about Work with me: https://uppitai.com/ My Tools💻 14 day FREE n8n trial: https://n8n.partnerlinks.io/22crlu8afq5r Code NATEHERK to Self-Host n8n for 10% off (annual plan): http://hostinger.com/nateherk Links: n8n-MCP: https://github.com/czlonkowski/n8n-mcp n8n-skills: https://github.com/czlonkowski/n8n-skills Github MCP: https://github.com

now: 0:00
// related videos (5)
Two Ways To Come Up With Business Ideas
[community building and audience growth][market research and validation][revenue model and pricing strategy]
→
Episode 2 - Building a SaaS to $1k MRR
[community building and audience growth][market research and validation][revenue model and pricing strategy]
→
Building a SaaS to $1,000 MRR - episode 3
[community building and audience growth][market research and validation][revenue model and pricing strategy]
→
Someone Will Get Really Rich Doing This
[community building and audience growth][market research and validation][revenue model and pricing strategy]
→
Episode 1 - Building a SaaS to $1k MRR
[community building and audience growth][market research and validation][revenue model and pricing strategy]
→
// actions
← back to terminal open on youtube → @nateherk channel →
// tags
[developer tools and coding][AI agents and automation][open source and self-hosting][content creation and YouTube][e-commerce and conversion optimization]