In code reviews, discussions often focus on minor issues like formatting and style, while critical aspects—such as functionality, performance, and backward compatibility—are overlooked. Code reviews can be even more challenging than writing code itself, as ensuring quality across these critical areas requires careful attention.

Image by Gunnar Morling, licensed under CC BY-SA 4.0.

Doing a 'perfect' code review means finding all the bugs, knowing best practices yourself, sorting through a bunch of code you didn't write, writing comments that could be taken as subjective criticism without sounding like a jerk, and justifying every comment you make. It's exhausting from a logical standpoint and a social standpoint. Or you can rubber stamp it but feel bad when a bug makes it through to production and the codebase becomes a mess.

10 lines changed : 10 comments, 500 lines changed : 'LGTM'.

Many development teams often focus on shipping bug-free code to production. While that's important, the ability to spot and resolve issues when they arise quickly is frequently overlooked—ideally through automated tools or straightforward processes. But what if I told you there's an easier way—one that streamlines code reviews in a fraction of the time? That's what CodeRabbit does.

In this guide, we'll learn how to catch issues in a popular OSS TypeScript codebase using CodeRabbit. Upon completion, you can review TypeScript pull requests in your codebase and ensure that only high-quality code is merged into our repository using the AI code reviewer CodeRabbit.

Want to jump right in? Here is the pull request for a quick look.

Prerequisites

CodeRabbit is language-agnostic, so you don't need a specific programming language background. However, this article demonstrates how CodeRabbit works using the Dub.co GitHub repository, written in Typescript.

Before you begin, make sure you have the following:

• GitHub Profile
  • Ensure you have an active GitHub account to fork and contribute to various code repositories.
• Code Editor - A powerful code editor like Visual Studio Code or IntelliJ IDEA

Why do you need an AI code reviewer?

As software engineering teams strive to maintain high-quality code while meeting tight deadlines, efficient and reliable code review processes become increasingly necessary.

CodeRabbit can 10x your team's productivity and code quality as it can help you with:

• Faster Code Review Cycles
• Consistent and Objective Feedback
• Increased Developer Efficiency
• Continuous Improvement

How to configure CodeRabbit in GitHub

Signing up with CodeRabbit is a two-step process. First, log in using your GitHub account and then add our GitHub app to your organization.

Next, we can integrate CodeRabbit into all our code repositories or select specific ones from the list.

Now, CodeRabbit is fully integrated into our repositories and ready to review any code changes. It is as simple as that.

Reviewing TypeScript Code using CodeRabbit

Dub. co is an open-source link management platform that offers features such as link shortening, analytics, free custom domains, a QR code generator for links, and more. Its codebase is written in TypeScript and React, so a basic understanding of these technologies will help you navigate it more effectively.

To get started, let's fork the Dub.co repository.

Next, run the following command in your terminal to clone the Dub.co TypeScript repository to your local computer.

git clone https://github.com/dubinc/dub.git

Install its package dependencies using the command below:

pnpm install

Rename or copy the .env.example file within the apps/web folder into a .env file:

cp .env.example .env

Follow the steps in the Dub. co Local Development Guide to set up and run a local version of dub.co on your computer.

Getting a PR review

Let us change the forked Dub. co repository and see how CodeRabbit identifies issues in a large TypeScript codebase.

Before we proceed, create a new GitHub branch called tutorial/coderabbit in our forked repo. This will enable us to compare both branches and create pull requests.

Navigate into the app folder and update the code in the below files:

• app.dub.co/(dashboard)/[slug]/page.tsx
• apps/web/app/api/links/route.ts
• apps/web/app/app.dub.co/(dashboard)/[slug]/auth.tsx
• apps/web/app/app.dub.co/(dashboard)/layout.tsx

For example:

export default function WorkspaceLinks() {
  return (
    <div className="mx-auto my-3 w-[70%] px-2 text-center">
      <h2 className="mb-3 text-2xl text-orange-500">
        Testing how CodeRabbit works
      </h2>
      <p>
        CodeRabbit is an AI-powered code reviewer for your code repositories. It
        provides quick, context-aware code review feedback and line-by-line
        suggestions, significantly reducing manual review time.
      </p>
    </div>
  );
}

The code snippet changes the homepage content.

To demonstrate how CodeRabbit works, we have updated the page. TSX file with the wrong React syntax and pushed the code to the test branch. You can do this via the GitHub web interface or command line.

import WorkspaceLinksClient from "./page-client";

export default function WorkspaceLinks() {
  return (
    <>
      <h2 className="text-2xl mb-3 text-orange-500">
        Testing how CodeRabbit works
      </h2>
      <p>
        CodeRabbit is an AI-powered code reviewer for your code repositories. It provides quick, context-aware code review feedback and line-by-line suggestions, significantly reducing manual review time.
      </p>
    </>
  );
}

Next, we can compare both branches and create a pull request.

CodeRabbit reviews the updated code on the tutorial/code rabbit branch, highlights the issues within the pull request, and even includes sequence diagrams showing how it analyses the code. Then, it provides a solution to ensure the pull request passes all necessary tests for merging.

For example, let's look at the CodeRabbit in action.

• PR summary by CodeRabbit

• Complete walkthrough by CodeRabbit

• Actionable comments by CodeRabbit

You can check the example pull request here on the GitHub repository.

Congratulations. You've successfully integrated CodeRabbit into an open-source TypeScript repository.

Conclusion

We looked at how CodeRabbit could be integrated into a TypeScript repository.

CodeRabbit is an AI Code Reviewer that helps you or your team merge your code changes faster with superior code quality. There is more that you could do with CodeRabbit with TypeScript or JavaScript.

Here is some further reading:

• Enabling Automated Linting with Biome, Eslint
• Adding Custom Review Instructions
• Discovering Code Intent Patterns

Sign up to CodeRabbit today and merge your PR 10x faster, without compromising code quality or security.