overview of what we'll be doing, let's go into the setup part of this and how to install this on a Mac. The Windows process would be very similar. Okay, first up, you need accounts for multiple services. One of them is OpenAI to have access to their API. Secondly, we need an Enthropic account to use clawed code. Thirdly, we'll need a GitHub account to store all the changes and the different versions. And then lastly, we need a code rabbit account to create the documentation for all the changes and the versions and also for it to make suggestions on how to improve the build that claude code created. Now, I want to talk about cost with these briefly because both for the OpenAI and Enthropic accounts, we will be using the API. So, there you are paying per usage. So, everything you do in cloud code or every request you send to the GP40 API will cost you. And with Code Rabbit, you get a 14-day free trial to try out the product, see if it works for you, and then they have their paid plans. But to follow this tutorial, essentially the only thing that will cost you are the requests that you send to both Entropic and OpenAI. With OpenAI, 20 users will cost you a few cents. And Cloud Code, if you're making changes to the app, per request might cost 10 to 30,400 cents, depending on how large it is. So, this workflow really is extremely cheap to try out. But that's just accounts you need. Now, we need to move on to some of the applications. And I won't go into full detail of showing you which button to click cuz it will differ from system to system. So, first up, we need Claude Code. This one is probably the trickiest one to install for newcomers, but all details are on this page. And I'm confident that everybody can do this. All you need to do is just copy this and in a new terminal window. You just put in this command and it will install everything for you. And for it to work, you need one more thing, which is a version of Node. js above 18. Sounds complicated, but really you just go to this link. It automatically picks your operating system and the newest version. And all you do is just say Mac OS installer. And when you open the installer, you just go for the standard installation. and then it just works. And then if you're setting this up for the first time, it will want your API keys. So because we set up our accounts in the first step, you will be able to go over to the Enthropic console here. Again, all links in the description, head on over to API keys, create a brand new key. I'll just name it Claude tutorial. And then this is the code that Claude Code will want from you. That will allow Claude Code to bill you, which also means you need to add some credits here. I believe that if you haven't done this before, you get $5 for free to try this out. And that concludes the setup of cloud code. So you installed it, you added Node. js, you linked it to the API key. Now really, there's just three more items left. One of them is having any browser installed. So in my case, I'm using Google Chrome, but we need something to open our application obviously. And then the last two items are having a version of GitHub Desktop cuz we want to avoid all terminal commands here. That's also super simple. Just under this URL, you go in here, you say download now. And when you download it, you just log in with the GitHub account that we created. And voila, you have this desktop application that we'll be working with in a second here. But you need this desktop app to make this process quite manageable if you follow my tutorial here. And then we need Code Rabbit. And what I strongly recommend is on the first setup, connect it to all of your repositories on your GitHub account. And then every time you create a new one, it will automatically comment and it will automatically work with all the pull requests that we will be creating in this tutorial. And at this point, if you're curious why we are using this application as the last part of our workflow, well, you can really see it here. If you go to the settings and you go to tools, you will see that there's dozens of these industry standard tools for code reviewing that Code Rabbit just automatically applies every time you create a new version of your app. So, you don't have to worry about all of this. It doesn't just document, but it also improves security and in many other ways makes the code just more robust. And by default, it just runs automatically every time we create a new version. So, this makes a really nicely rounded workflow. And that is really everything you need for the setup. I know it's not a short list. I know some of these tools might be brand new to some of you, but I would just say grab a drink, follow along for me going through the entire workflow here step by step, and then you can always return back to this checklist and then get set up for yourself at no cost and see what you can build yourself. I really do think that this is the most powerful way to create things, to create little applications for yourself. But obviously, if you want the most robust workflow with cloud code and versioning on GitHub and Code Rabbit doing all the reviews, you're trading off simplicity. So, with that being
said, let's get into the step-by-step process of how to set up a brand new project, which looks as follows. So, my journey always starts in this GitHub desktop application. And this is simply explained. There's really three steps here at the top. The repository, aka folder that you're working in, then the version that you're on. They call this branches. And then lastly, the ability to sync. And you always want to go left to right. Okay. So, if we start a new project, I will open up these repositories. Say add and say create new repository. And I will call this one the comeback assistant tutorial. I'll just copy this over to the description cuz why not? And I'll create this repository. And I have a brand new folder that is created on my local drive. I can rightclick this and say reveal and finder to reveal it. So, as you can see in my GitHub folder, there's just a brand new folder. And this is just a fantastic way to start because as I mentioned, GitHub will help us to version these apps as we move through it. So you can add new features, you can experiment, you could do anything you like with the confidence that nothing will be lost because every time you reach a version that you like, you will be creating a new branch in GitHub. And I will explain that once we get there. But really this is the first step just creating a new repository. I have this folder. And because I went through the setup checklist in advance and I already have cloud code that is working on my machine. I will just rightclick this go to services and say new terminal at folder here on the Mac. This opens up a brand new terminal window and I designed this entire tutorial to only use one single terminal command which we're going to be doing at this very point. Okay. And the only thing you need to be doing is saying claude. Hit enter. Beautiful. Now it initializes claude code and it asks me, hey, can I read files from this folder? Because I did this little thing with the services and open terminal at folder. The terminal is already pointing at this location on my hard drive. And now Claude is simply asking, hey, can I actually use what's in the folder? So I could hit enter or I could hit one. That's what I like to do. Yeah, in this case, yes, proceed. I hit one and it's ready to go. I could actually go ahead and tell it, build me a little snake game, hit enter, and it would do the whole thing. And then a snake game would appear inside of this folder. But in this case, we're not building a snake game. We're building a simple version of this combat generator that uses your microphone. And what I'll do for that is use this prompt that I prepared in advance with the help of Claude in this case, which I still use for prompt engineering. I'll just open it up and we can just have a brief look at it here. So it says create a simple web application called live objection handler that can use the browser speech recognition API to listen to spoken objections. Convert the speech to text and display it. Send the text to OpenAI's API to create a comeback response. Display the AI response. And then here's a few features I want the app to have. And I tell it to keep it super simple in a single file. So I'll just copy this prompt, paste it in here, hit enter. And now clot code goes ahead and works through this. And what we'll see happen now is this folder here being populated. So I'll open up the combat assistant tutorial folder just to see clot do its thing. I'm completely hands off here. The Gentic system will create all the files with the set 3. 7 model including creating the files linking them. Now the only thing I will have to do here and there especially when starting out my session is sometimes it will ask me do you want to create the index. html HTML file, the main file that I will open in my browser and I can say one yes or two yes and don't ask again this session. That's what I always like to do because then if it needs to create another file, it doesn't need to ask again and I can be hands off. So all I need to do is give permission here. And as it creates this initial version that will probably not be perfect, but that will only be a starting point that we can then keep on working with. We can watch this appear and yeah, it just did. So what I can do now is I can just doubleclick this index. html file. That's why I like building simple web apps cuz you can kind of just double click this and voila, it appears in my Google Chrome browser. And this is the first version of my live objection handler. First up in here, I will need to set up my API key. So here on platform. openai. com/appi keys. I will create a new secret key. I will call this the tutorial and create a secret key. You should always keep this hidden as this allows any app access to your OpenAI account which will then use your credits. And yes, you also need to make sure to have some sort of credits in your account. Otherwise, you cannot be paying per request. So, I'll put this in here. Save. And let's have a look if this works at all. I say start listening. Allow microphone access. And we're testing. There you go. It's working already. It's transcribing what I'm saying. And then here at the bottom, it's using Yeah, the expert sales coach is giving me a comeback. So, I'll just stop this for a second. It's telling me, "That's right. With my expertise, I can help you overcome any objections and find the best solutions for you. " So, I'll just try something here. Okay, let's do a little test. Okay, I really like the car, but I want 20% off. Otherwise, I'm leaving right now. And then here we have it. I understand you're looking for a great deal. Let's work together to find a price that works for both of us. How about we explore some other points to make sure you're getting the best value for your money? So, that's beautiful. It's using this system prompt to turn the spoken word into a AI comeback. And look at how simple that was. I literally believe that everybody can follow this tutorial and make this work in no time. And then you can build things like this. But we don't end here. This might be a first version of it. And I'm liking what I'm seeing here already because I have a fully customizable system prompt here. I could change this to be a comedian. I could put any sort of custom prompting, tonality, different examples of how I wanted to respond in here. All the prompting education that we've done on this channel and in the advantage community. This is where you can apply it and this is the real power here. But as you can see, the first version of our app of the live objection handler is
Beautiful. Now this is where we enter code rabbit and where it becomes really useful. So as you can see here we might have the general summary of our application but we really don't know what this change is about. And also ideally in the real world if we were working with a team we would want somebody else to review this code to make sure it's robust. Now, as we're just vibe coding by ourselves, this is not feasible. But what we can do is we can take advantage of a so-called pull request. Now, up until now, we lived in this codes tab. We're now going to be switching over to this pull request tab. And it can be something that might be a little confusing, but essentially a pull request is the standard language that is used within teams of developers. And you can think of it as a request to make changes to the main app. So, in this case, we added the dark mode feature. Now, if you're working with a team and in this case with code rabbit as our code reviewer, who's like an independent brain and an independent set of eyes to review what we did here, I just pushed my changes to GitHub and then we can create a pull request here, which it already tells us in this yellow box up here because it sees some changes for our code reviewer to have a look at what we changed and if it makes sense. So, long story short, I'm just going to press this little button here in the yellow box. And then I could add more details here, but this one is really simple. Add a dark mode. I'm just going to confirm here and say create pull request. And because we set up code rabbit with all of our GitHub repositories in the beginning, you will see that it automatically engages here. I didn't press a single thing. And Code Rabbit sees this pull request and is like, okay, it's time to review this with the dozens of tools that it has at its disposal to review the code, to review your work, to make it as good as possible. And I think in a second here, you'll see why this makes so much sense. So, right now, it's working. It's an agentic system that's doing its own thing at this very point in time. So, we need a little bit of patience. It usually takes about 20 seconds to a few minutes depending on how much there is to review. But we'll just cut back as soon as this is done. And then what I really like about this, it adds all the detail for what changers. So, it tells you exactly, hey, in our index. html file, the dark mode feature was added here. And here's all the technical implementations that we as Vibe coders might not have considered. And if anything breaks, it's a godsend to have all these details. You could later on copy paste this to fix certain things. Point being, it really adds a lot of color here. And then here's all the reviews. Now, obviously, this was the smallest implementation that one could think of, right? It's just a dark mode, but already found a few things that it would change. It's even saying these are really just nitpicks and not essentials. And overall, there's nothing major here that needs to be updated or fixed. But if you want, there is a few additional comments here. So, mainly in this step, it created the summary for me, which is super useful to have on every version. Now, this comment that Code Rabbit made is minor. And in this case, I'll decide to skip it and just proceed to merging this new version into our main application. And then when I say merge pull request and confirm this merge, it will automatically take these updates and merge this into my main branch of the tree. It's not a side branch anymore. This is the new version of the main app. And if I go into my GitHub desktop here and I click this fetch origin which basically syncs it with the cloud again, you will see that my main application has been updated just now and includes the dark mode. And now again I can repeat this little cycle and add more and more features with more and more versions very simply. So I'll just say new branch. I'll say v2 and I don't even have to name it cuz rabbit does all the commenting for me anyway. So now that I have v2 I can go back into cloud code add further features and going along with this cycle. Now, that is the core workflow. At this point, I will fast forward to a version of the app where I did this for a few hours and added a bunch of features that I really wanted to see inside of the application, and we're going to round out the video with one last cycle where you're going to see it in action one more time. Okay
so many hours later, I arrived at this version of the application. As you can see, it's still the same core app, but it has a lot more bells and whistles. For example, there's a preset selector here where I can save different prompts, and I can manage them in here. So, if I want to remove one of these, I could do that. If I wanted to rewrite this and save this as a new one, I think you see the point here. All the eye responses will be in here. Let's just give it a quick check. Hey, can you hear me? Is this transcribing well? Yep, there you go. It got my audio and it responded. And I even have a little model selector, a button to clear the history, and all of this follows the AI advantage branding here. Now, sure, there's even more features that you could think of here. For example, I tried adding speaker recognition, but actually in the process, I had to roll back to a previous version because I couldn't get it to work properly. But yeah, this is just the app I coded up over the weekend. And you can feel free to customize this further for yourself. But what I'm going to show you now is how I finished that because right now this app lives on this v2 branch. So what I'm going to do is I'm going to head on over to my GitHub. Make sure I'm on the V2. And then here on the pull requests, as I showed you earlier, I already created this pull request. And under v1 code, rabbit had a few minutes to actually look at all of this. Now, just for full transparency, I was actually coding this in a separate folder. So, here you see the big jump from the simple app you saw a minute ago to this completed app we have now. And just like before, we have this fantastic summary right here showing all the changes that happened. So, for example, in the style. css CSS file, the file that is responsible for the look of it. We can see that we introduced a new stylesheet defining theming, button styles, the responsive layout and specific UI elements supporting both light and dark modes. Then in the main file, we can see we added things like the AI model selection, the different prompt presets, and so on. Okay, so that's really great, but here's the main part. because when it reviewed this big change to the app, it noticed, hey, a bunch of things changed and there's actually a lot of things that you should consider improving. So, let's just have a quick look at these. Not going to go into every single one of them, but I think you'll quickly see why it's a good idea to include this in your workflow. So, the first thing right away is this comment right here saying, "There's a problem with your styles file. There's no style for the visualizer bar element that is created in the audio processor that you have. The bars are injected dynamically, but there's no CSS. So, the visualizer is invisible. A minimal style block like this would be enough. In other words, during vibe coding, I asked for it to visualize when the mic is working. I wanted a little bar showing the input level of the audio and it didn't add it. And Code Rabbit noticed that here. And by adding this little bit of code, you would instantly fix that. So, I have clawed code that's open over the current version of the application over here. And what I'll just do is I'll copy the entire suggestion here. implement this change and then I'll paste all of this in here. And this is really the simplest no code way to do it. Cloud code will take these super precise instructions and just change the files for you. And that's it. You can see it's already updating the styles. css file by adding 10 lines exactly the lines that it chose here. And that's it. I couldn't even finish explaining and it's done already. And if I update my application, it should show the visualizer bar now. Hello. Testing one two. Okay, this seems to be working great. Yep, might not be perfect, but this is what I was looking for. That's one way you can implement this. A second one is when Code Rabbit actually shows you that it can do it for you. This one is actually a game changer when it comes to the app. The main problem with the app at this point in time was that sometimes it just stopped working. And at first I didn't know why, but then I figured out that the OpenAI API was actually getting flooded with too much information because I didn't have a proper way of handling how much I would send to the API to get me a response. Now, Code Rabbit here with one of its various tools actually noticed that and said, "Hey, this part of the app can actually flood the OpenAI endpoint and when a user speaks continuously, this will spawn parallel requests hitting the rate limits and then you get the responses in an order that doesn't make sense, which will confuse you on the call. " a really important adjustment here and it recommends a concrete fix here. And on this one, we actually have this little drop down that we didn't have on the others, a commitable suggestion. And whenever we have a commitable suggestion, we can actually directly commit this to this new version of the app from within here without even having to vibe code anything else. I can just go in here, say commit suggestion. I can add a little comment if I want. I'll say fix audio overflow. Commit the changes. And now it updated the code base in V1 directly for me. No need for me to do anything else. And that's really it. That's the whole process here. As soon as I applied all the changes here, I can click this button, merge pull request. And what it will do is it will merge the new version of my v1 application into my main branch, which is my main app. And once you're done, you can just create a new branch. Let's call this one v3. Return to clot code to add new features. Expand the app. Do whatever you like. Once it wrote the new code, you commit the changes to your new GitHub branch. Use Code Rabbit to review and repeat the cycle over and over again until you're satisfied and have a working application that does what you need it to do. One note that I have to add is you don't have to do this cycle after every feature. You could just keep coding in cloud code for like 2 hours straight and then commit and review. That can be kind of nice if you're only doing little things and you don't want to go through the cycle every