The workflow for building the Live Objection Handler app consists of the following steps:

1. Start a new project in GitHub Desktop: Create a new repository for the project and set up the local folder.

2. Use Claw Code to generate the initial app: Provide Claw Code with a prompt to create a simple web application that can use the browser's speech recognition API, convert the speech to text, send it to the OpenAI API, and display the AI-generated comeback response.

3. Set up the necessary accounts and tools: Create accounts for OpenAI, Anthropic (for Claw Code), GitHub, and Code Rabbit. Install the required applications, such as Claw Code, Node.js, GitHub Desktop, and Code Rabbit.

4. Implement the core functionality: Test the initial version of the app, which should be able to transcribe speech, send it to OpenAI, and display the response.

5. Version the project using GitHub: Commit the initial version of the app to the main branch in GitHub, then create a new branch (e.g., "v2 more features") to continue development.

6. Add new features with Claw Code: Use Claw Code to add new features to the app, such as a dark mode.

7. Review the changes with Code Rabbit: Create a pull request in GitHub, which will trigger Code Rabbit to review the code changes and provide suggestions for improvement.

8. Merge the changes and repeat the cycle: Merge the pull request to update the main branch, then create a new branch to continue development.

9. Customize and expand the app: Keep repeating the cycle of adding features with Claw Code, reviewing with Code Rabbit, and versioning with GitHub until the app meets your desired functionality.

10. Share the final app: Once you're satisfied with the app, share the GitHub repository with others so they can clone, customize, and use the application.

This workflow allows you to quickly build and iterate on your application, while also ensuring code quality and maintainability through the use of GitHub for versioning and Code Rabbit for automated code reviews.

First up, you need accounts for multiple services:

1. OpenAI: To have access to their API.
2. Anthropic: To use Claude Code.
3. GitHub: To store all the changes and the different versions.
4. Code Rabbit: To create the documentation for all the changes and the versions, and to make suggestions on how to improve the build that Claude Code created.

Regarding the cost, both for the OpenAI and Anthropic accounts, you will be using the API, so everything you do in Claude Code or every request you send to the GPT-4 API will cost you. With Code Rabbit, you get a 14-day free trial to try out the product and see if it works for you, and then they have their paid plans.

Next, you need to install the necessary applications:

1. Claude Code: This is the main tool you'll be using to create the application. Follow the instructions on the Claude Code website to install it.
2. Node.js: Claude Code requires a version of Node.js above 18, so go to the official website and download the installer for your operating system.
3. GitHub Desktop: This will help you manage the versioning of your application without having to use the terminal.
4. Code Rabbit: Sign up for an account and connect it to your GitHub repositories.

Once you have all these tools set up, you're ready to start building your application using the workflow described in the video.

I'll start with a bird's eye view of the entire workflow. It really begins with Claud Code, the app I prefer for many reasons, one being that I've used it since day one and enjoy how it's motivated to enhance my vision in a single shot.

I start the project and add features in Claud Code. Once I have a version I like, I use GitHub for versioning to create digital checkpoints. The industry standard way to do this versioning is with Git branches. I can create versions like "v1", "v2", etc. as I progress.

Finally, I use an app called Code Rabbit to automatically review the code, find potential improvements, and provide suggestions. Code Rabbit runs dozens of industry-standard code review tools, which is great because Claud Code will write working code, but it may not always be optimal.

For the setup, I need accounts for several services: OpenAI for API access, Anthropic for Claud Code, GitHub for versioning, and Code Rabbit for code reviews. The only ongoing costs are the API requests to OpenAI and Claud Code, which can be just a few cents per request.

With the setup complete, I can start building the initial version of the app. I open the GitHub Desktop app, create a new repository called "Comeback Assistant Tutorial", and launch Claud Code from the folder. I provide Claud Code with a prompt to create a simple web app that can use the browser's speech recognition API, convert speech to text, send it to OpenAI's API, and display the AI-generated comeback.

Claud Code gets to work and populates the folder with the necessary files. I can then open the index.html file and see the initial version of the app running in my browser. It's able to transcribe my speech and provide AI-generated responses.

At this point, I want to save this initial version as a checkpoint. I switch back to GitHub Desktop, review the changes Claud Code made, and commit them to the main branch with a summary message. This creates the first version of the app in my Git repository.

To prepare for future changes, I then create a new branch called "v2 More Features" in GitHub Desktop. This gives me the freedom to make additional changes and experiment without affecting the main version of the app.

With the initial version created and versioned, I'm now ready to start adding more features to the app using the same workflow of Claud Code, GitHub, and Code Rabbit.

My journey always starts in the GitHub Desktop application. This is simply explained - there are really three steps at the top: the repository (aka folder) that you're working in, the version that you're on (they call this "branches"), and the ability to sync.

To start a new project, I'll open up the repositories, say "add", and then "create new repository". I'll call this one the "Comeback Assistant Tutorial" and create the repository. This creates a brand new folder on my local drive that I can reveal in the Finder.

Since I've already gone through the setup checklist and have Claude Code working on my machine, I can right-click this folder, go to services, and say "new terminal at folder here". This opens up a brand new terminal window, and the only thing I need to do is say "claude" and hit enter.

Claude initializes and asks if it can read files from this folder. I say yes, and it's ready to go. I'll use a prompt I prepared in advance to create a simple web application called the "Live Objection Handler".

Once Claude has created the initial files, I can double-click the index.html file to open it in my browser and see the first version of the app working.

Now, to save my progress, I'll open up GitHub Desktop. It recognizes that these are new files, so I'll add a summary, "v1 main application", and a description, "core functionality working for my comeback assistant". I'll then commit these changes to the main branch.

Next, I'll create a new branch called "v2 more features". This gives me the freedom to make changes on this new branch without affecting the main branch. I'll then publish this repository to GitHub, so my work is backed up and versioned.

As I continue to add features, like a dark mode, I can commit those changes to the v2 branch. GitHub Desktop will recognize the changes, and I can add a summary, "dark mode update", and commit them to the v2 branch.

By using this workflow of creating branches and committing changes, I can always return to previous versions of my application if needed. The combination of Claude Code, GitHub, and Code Rabbit provides a powerful way to create, version, and improve my applications over time.

After implementing the dark mode feature, I used Code Rabbit to review the changes and identify potential improvements. Here's what happened:

Code Rabbit's review provided several valuable insights:

1. Visualizer Bar Style: The review pointed out that there was no CSS style defined for the visualizer bar element, which was dynamically created by the audio processor. To fix this, I simply copied the suggested CSS code and pasted it into the styles.css file, instantly resolving the issue.

2. Handling Audio Overflow: One of the more significant findings was that the app could potentially flood the OpenAI API with too many requests when the user spoke continuously. This could lead to responses arriving in an unpredictable order, confusing the user. Code Rabbit provided a concrete fix for this problem, which I was able to commit directly from the pull request interface, without needing to make any additional changes in the code editor.

3. Other Minor Improvements: In addition to the major issues, Code Rabbit also suggested a few minor improvements, such as optimizing the CSS and ensuring consistent formatting. While these were not critical, implementing them helped to further refine the codebase.

By incorporating Code Rabbit's feedback, I was able to improve the robustness and reliability of the application, addressing potential issues before they became problems for users. The combination of the initial vibe coding with Claude, followed by the automated code review from Code Rabbit, created a powerful workflow that allowed me to quickly build and iterate on the application.

Overall, the Code Rabbit integration was a valuable addition to the development process, providing an extra layer of quality assurance and helping to ensure the app was well-structured and optimized for its intended use.

Here is the section body in markdown format:

With that transcribe and vibe workflow explained, let's talk about accessing the final version of the app that was built.

The full application is publicly available for you to access. You can find a link to the repository in the video description. From there, you have two options:

1. Clone the Repository: You can clone the GitHub repository to your own machine and start working on it right away. This will allow you to have the full codebase on your local system and customize it further as needed.

2. Download the ZIP File: If you don't want to deal with Git and cloning, you can simply download the ZIP file of the repository. This will give you the complete application that you can unzip and start using immediately.

Whichever method you choose, you'll have access to the final version of the "Live Objection Handler" app that was built step-by-step in the video. Feel free to explore the codebase, make changes, and see how the full workflow comes together to create a functional AI-powered application.

Remember, the app is currently only compatible with macOS, but if someone from the community creates a Windows version, the link will be provided in the video description as well.

Enjoy exploring and building upon this project! The workflow demonstrated should give you a powerful template for creating your own custom AI applications in the future.

In this video, we covered a comprehensive workflow for building a custom AI application using a combination of powerful tools - Claw Code, GitHub, and Code Rabbit.

The key steps of this workflow include:

1. Ideation and Prototyping with Claw Code: We used Claw Code's natural language interface to quickly prototype and build the initial version of the "Live Objection Handler" application.

2. Version Control with GitHub: We set up a GitHub repository to manage the different versions of our application, allowing us to experiment and make changes with the confidence of being able to revert if needed.

3. Code Review and Optimization with Code Rabbit: We integrated Code Rabbit to automatically review our code, provide suggestions for improvements, and help us maintain code quality and security.

By following this workflow, we were able to efficiently build, iterate, and refine our AI-powered application, leveraging the strengths of each tool to create a robust and customizable solution.

The final application, which can listen to user input, generate AI-powered responses, and even include features like dark mode, showcases the power of this workflow.

I encourage you to try out this process for yourself, whether it's building the "Live Objection Handler" or creating your own unique AI-powered application. The setup may seem daunting at first, but the benefits of this workflow make it well worth the initial investment.

Remember, as you explore the capabilities of this application, to always be mindful of the ethical considerations around the use of AI and to communicate transparently with your conversation partners. With responsible use, this tool can be a valuable asset in your arsenal.

Happy coding!