I Rebuilt The Viral AI That "Cheats on Everything" (And You Can Too)
29:34

I Rebuilt The Viral AI That "Cheats on Everything" (And You Can Too)

The AI Advantage 01.06.2025 12 386 просмотров 372 лайков обн. 18.02.2026
Поделиться Telegram VK Бот
Транскрипт Скачать .md
Анализ с AI
Описание видео
Ship higher quality code in 50% of the time with 90% less bugs. Get CodeRabbit today! 👉 https://www.coderabbit.ai/ I used three powerful AI tools to build my own version of that viral AI app that helps you "cheat at everything" called Cluely. Watch the video to learn how you can use AI tools to build apps like this at speeds you never thought possible! Checklist: https://desktop.github.com/download/ https://www.anthropic.com/claude-code https://nodejs.org/en/download https://platform.openai.com/api-keys https://console.anthropic.com/settings/keys Link to the Transcribe n Vibe open source app: https://github.com/AIAdvantage/Transcribe_n_Vibe Chapters: 0:00 What I Built 0:36 Demos 3:12 Workflow 5:28 Setup 9:36 Building Process 14:54 Saving Progress 17:30 More Features 19:39 CodeRabbit 23:14 Improving the App 28:28 Sharing the Repository #ai Free AI Resources: 🔑 Get My Free ChatGPT Templates: https://myaiadvantage.com/newsletter 🌟 Receive Tailored AI Prompts + Workflows: https://v82nacfupwr.typeform.com/to/cINgYlm0 👑 Explore Curated AI Tool Rankings: https://community.myaiadvantage.com/c/ai-app-ranking/ 💼 AI Advantage LinkedIn: https://www.linkedin.com/company/the-ai-advantage 🧑‍💻 Igor's Personal LinkedIn: https://www.linkedin.com/in/igorpogany/ 🐦 Twitter: https://x.com/IgorPogany 📸 Instagram: https://www.instagram.com/ai.advantage/ Premium Options: 🎓 Join the AI Advantage Courses + Community: https://myaiadvantage.com/community 🛒 Discover Work Focused Presets in the Shop: https://shop.myaiadvantage.com/

Оглавление (10 сегментов)

  1. 0:00 What I Built 125 сл.
  2. 0:36 Demos 556 сл.
  3. 3:12 Workflow 530 сл.
  4. 5:28 Setup 988 сл.
  5. 9:36 Building Process 1267 сл.
  6. 14:54 Saving Progress 595 сл.
  7. 17:30 More Features 514 сл.
  8. 19:39 CodeRabbit 865 сл.
  9. 23:14 Improving the App 1196 сл.
  10. 28:28 Sharing the Repository 261 сл.
0:00

What I Built

I'm particularly excited for this video because I'm going to be showing you my full workflow of how I built a copy of an AI application that recently went viral. It's this app that listens to your microphone and then uses AI to give you life suggestions on things that you could be answering to your conversation partner. You could use this on any call or conversation and get potential comebacks or ways to reframe the situations that you might not have thought of. But rather than overexlaining it, here's a little demo clip of this little application that we'll be building A to Z today. And I'll also give you all the code for free at the end of the video. So, here's a
0:36

Demos

little demo. What up, guys? Today, we're learning another Vibe coding workflow. I'm going to be showing you step by step how to do this thing. And we have Chat Live here over here with my man Daniel. So, what you got to say? AI is ruining everything. It's going to end up killing us all. Boo. Actually, I think AI will help us solve more problems than it actually creates. Have you ever considered that angle before? I actually hadn't before. I will take that into consideration and come back tomorrow with different chat messages. Daniel, listen up. I have an unbeatable offer here for you. Honda Civic 2012 for the price. And now listen to this. $8,500. What you make of that? $8,500. Not a bad price, but I do feel like I can probably get that car at a better price elsewhere. Why should I be getting this model? Well, listen, Daniel, you're certainly a smart guy. I can see that right away. But this model's unique features might save you more in the long term than the investment now. Yeah, you're right. As you can see, this is a really fun little app, and I coded up this entire thing without writing a single line of code over the course of a weekend. And I think in total it took me about 15 hours, but that includes a lot of time that I wasted trying to make this a Chrome extension, which I wasn't satisfied with. So now it's a web app. So what are we going to be covering in this video? Well, it's really three things. First up, I'll be showing you the entire workflow of how I built this app myself. Now, I won't be showing every single little feature that I added, but I'll show you how I started the project, then how I added a feature, and then I'll show you the ending of the app reaching its final form. So, that's one point that we're covering. The second one will be the setup. Because this involves multiple applications, it is a bit of a process to get started here. The good news is the setup is a onetime thing. And once you have it, you can either take this app that I will be providing to you in this video and customize it to fit your needs or you can vibe code your own projects with the workflow that I'll be showing you here. And then thirdly, I'll also give you access to this entire application which you can then take and tweak to your own liking. Now, one big disclaimer here. As of now, this app only works on a Mac. That's because I work on a Mac. I built it on a Mac. But if somebody from the community takes this app and customizes it to also work for Windows, I'll certainly include a link in the video description below. But at the time of making this video, this is a Mac only app. So, if you're Windowsbased, the main value in this video will probably be the entire setup and the workflow that I'll be showing you. And with that being said, let's get into the explanation of my current Vibe coding workflow to build little bespoke applications like this for myself or
3:12

Workflow

others. Okay, so let's start with a bird's eye view of the entire workflow. It really starts with claw code. This is the app that I prefer for many reasons. One of them being that I've been using it since day one and enjoy one particular property of this application and that is the fact that you just give it a vision and then it's very motivated to come up with various ways to enhance your vision for you and it builds it all in one shot. So this is where I start the project. add features to the project. And once I have a version that I like, then I use GitHub for versioning to create these digital checkpoints for the application because the problem with VIP coding is you sometimes add features that break the whole thing or add bugs that are not really repairable anymore. So you absolutely need different versions of the project. Now the super simplistic way to do this is kind of just to duplicate the folder and create checkpoints that way. But the industry standard way to do this versioning is GitHub. Every time you add a new feature or multiple features, you can create this so-called branch. We'll discuss this in more detail later on. And you can create versions. Like right here, you can see the main app here. And this is version one, version two. And I would be adding more versions as I move through the process of building this application. And finally, once I have a version that I like, I use this application called Code Rabbit to write summaries of what the version added. And it also runs dozens of industry standard code review tools automatically on top of the code that has been written. Now, this is really good for many reasons because cloud code will just write a bunch of code and most of the time it will work, but it's not always optimal. What code rabbit does is it just runs all of these code review tools and finds parts that could be done better and then with the click of a button, you can improve that part and harden the main application. Now, at this point, I do want to say that Code Rabbit is actually sponsoring this video. Now, as per usual for sponsors that we take into a project like this, we thoroughly test applications. And with this one, we just quickly found that there is a reason why this is the most downloaded AI add-on for GitHub. And that completes our little cycle. Once code rabbit does the code review, we can either decide for or against certain changes. And then we go back to clot codes to write more code. So essentially what I do is I vibe code with natural language creating the application. Then I create versions of it. So in case I don't like a feature I added, I can always return. And then I use code rabbitic to review all the code in the new GitHub version. And then I go back to vibe coding and the cycle repeats. So now that you have an
5:28

Setup

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
9:36

Building Process

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
14:54

Saving Progress

working. Now, let's get to the part of this workflow where we save our progress. If any of you ever played a video game, you can think of this as a checkpoint or a new save file that you can then load later to return to this exact version because we'll be adding things and in that process something might break or we might not like certain changes. Doing what I'll do now will give you the confidence that you can always return to it. So I'll be opening up GitHub desktop and already you can see this green screen here. GitHub Desktop recognized that all of this code is brand new, right? We created these two files that were not in the folder with cloud code. GitHub desktop automatically picked up on that and it tells me hey these files are changed. So what I'm going to do here because nothing was in the main repository here. I'm simply going to add a little summary of this. So I'm going to say v1 main application and in the description I'm going to say core functionality working for my comac assistant. And then you click commit to files to main. And what it's going to do now is it's going to add those files. You can see all of this disappeared to the main branch. And I thought about this and I really think the best analogy here is a tree. The main branch is kind of the trunk of the tree. It's the core. It's the life of the entire thing. And then you can create different branches of the tree. But hey, if you cut off one of the branches, it's fine. As long as the main trunk is there and is wellnourished, the tree will be fine. The same goes for application. The main branch here is the core. It's your application. Right now, as we committed these changes to the main branch, this is the main branch right here. But then what we want to be doing next is creating a second branch. This one I'll call V2, more features. And I'll create this branch. And as you can see, now I have two branches. Now, at this point in time, they're identical because I didn't change anything. But this gives me the freedom to now go to this newer branch and make changes. And down the line, I can then always return to previous versions. Okay. So, what I'm going to do here is just say public repository. I'm going to use the default settings here. Hit the confirmation button here that says publish repository. It's just doing its thing. And there we go. Now we have our basic project structure backed up on GitHub. So no matter what happens to my computer, it's all backed up. It's up there. I have versioning setup and I have clawed code ready to go here to implement more changes. Isn't this just amazing? Now just to solidify the point, I will move over to GitHub to really show you what happened here. And you don't even have to be familiar with GitHub. You just have to follow this tutorial. But if I go to my repositories, there's a brand new one called comeback assistant tutorial. And you can see that it includes the index, the readme file that we also have on our local machine here, the index and the readme file. And then also we can see our vto more features branch which also includes the same files. But here's the
17:30

More Features

deal. We'll be making more changes and this is where this combination of clot code gitub and code rabbit really comes to play because let's try adding a feature here. The feature would maybe be let's see what could we add. I mean the first thing that comes to mind is we could add a dark mode. That is also very simple. So we'll just go ahead and say add a dark mode in clawed code here. Again no commands. I'm just talking to it in natural language. And then again I'm just leaning back. It's doing its thing and it's just updating all the files in here for me. And there you go. It did it. So here I have a little summary from clot code. It added the dark mode feature to the live objection handler app. Here are the exact changes. And what I can simply do is go to the browser, refresh this. There you go. Dark mode on the top right. I could just click this and we added the dark mode feature. This way I could expand it as far as I want. I mean at a certain level of complexity things will start getting complicated but there's really a lot of room to grow as you saw from the initial demo already. But let's say I added this dark mode feature and I wanted to save this version. I wanted a checkpoint of this application at this point in time. Well really all I need to do is open up GitHub desktop and it will already have recognized that hey you made a bunch of changes here. You remove these lines, added these lines, and you don't have to understand code to do this, right? Surely it helps, but you could always just kind of copy paste this into chatbt or claw and then have it explain it back to you. Anyway, GitHub did all the work here for me with the desktop app. It noticed all these changes and what I can do is say dark mode update added dark mode, right? And I'm already in this new branch, this v2 branch with more features. So, I'll just commit this change to the v2 branch. And then I need to push to origin. So, as you can see, it's always one, making sure you're working in the right branch, a new one if you want a new version. Two, making any changes. We're using clot code in this case. Three, committing those changes, telling GitHub, hey, this is the version that I want to save. And four, you just need to press this button and push to Origin. And what that will do is it will push it into the cloud, making it accessible through the GitHub website as a private repository on my account. So if I just refresh this site, I will see that hey V2 more features had a recent push 19 seconds ago and now we have this brand new version of the app that includes a dark mode on the GitHub.
19:39

CodeRabbit

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
23:14

Improving the App

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
28:28

Sharing the Repository

single time. But other than that, it only leaves us with one more thing and that is me actually sharing this repository with you. So there you go with that transcribe and vibe. The little app that I made over a weekend is publicly available. You could just find it from a link in the description and either clone it over to your own GitHub or just download the zip file and start working on it. And also maybe check the video description. Somebody turns this into Windows version. I'll put it right there. And that's it. You learned about the setup, the workflow. I just wanted to say a big thank you to Code Rabbit for actually making an amazing extension that you can add to your GitHub for free. and it does these comments that you can try out on your projects for free. To try it out, click the very first link in the video's description. And that is really everything I have for today. I'm looking forward to making more projectbased videos like this. And before we round this out, I want to say one more thing. And that should go without saying, but this can be a very powerful app. So, use it responsibly and always tell your conversation partners that you're actually transcribing their speech. And clearly, the social etiquette around this should be to communicate to the other person that you're actually transcribing it. I hope this was useful or at the very least interesting to you and I hope you have a wonderful

Ещё от The AI Advantage

Ctrl+V

Экстракт Знаний в Telegram

Транскрипты, идеи, методички — всё самое полезное из лучших YouTube-каналов.

Подписаться