docs: add coderabbit to your repository section UI enhancements

coderabbitai · PrasadBhat4 · Jul 8, 2025 · Jul 9, 2025 · Jul 10, 2025 · Jul 16, 2025
commit dd9403ce5220a3f714dfa73d51a3cd6b63be75cb
diff --git a/docs/faq.md b/docs/faq.md
@@ -33,16 +33,16 @@ View step by step instructions depending on your platform:
 
 <Tabs>
   <TabItem value="github" label="GitHub" default>
-    See our [GitHub App installation guide](./platforms/github-com.md) for step-by-step instructions.
+    See our [GitHub App installation guide](./platforms/github-com.mdx) for step-by-step instructions.
   </TabItem>
   <TabItem value="gitlab" label="GitLab">
     Follow our [GitLab integration guide](/platforms/gitlab-com.mdx) to get started.
   </TabItem>
   <TabItem value="bitbucket" label="Bitbucket">
-    Check out the [Bitbucket installation steps](/platforms/bitbucket-cloud.md) for detailed setup.
+    Check out the [Bitbucket installation steps](/platforms/bitbucket-cloud.mdx) for detailed setup.
   </TabItem>
   <TabItem value="azure" label="Azure DevOps">
-    View our [Azure DevOps setup guide](/platforms/azure-devops.md) for complete installation instructions.
+    View our [Azure DevOps setup guide](/platforms/azure-devops.mdx) for complete installation instructions.
   </TabItem>
 </Tabs>
 

diff --git a/docs/getting-started/adding-organizations.md b/docs/getting-started/adding-organizations.md
diff --git a/docs/getting-started/adding-organizations.mdx b/docs/getting-started/adding-organizations.mdx
@@ -0,0 +1,42 @@
+---
+title: Add organizations
+description: Learn how to add new organizations to CodeRabbit
+---
+
+import InfoBox from "../../src/components/InfoBox"
+import ListItems from "../../src/components/ListItems"
+import Note from "../../src/components/Note"
+
+To add new organizations to CodeRabbit, follow these steps:
+
+<ListItems
+	orderedList
+	items={[
+		<>Navigate to <a href="https://coderabbit.ai">coderabbit.ai</a></>,
+		<>Click the "Refresh" button next to your organizations list to check for new organizations</>,
+		<>Find the organization you want to add in the list</>,
+		<>Click the "Grant" button next to the organization name</>
+	]}
+/>
+
+![Checking for new organizations](../../static/img/getting-started/check-for-new-orgs.png)
+
+![Granting permission to organization](../../static/img/getting-started/grant-permission.png)
+
+This will grant CodeRabbit access to the selected organization, allowing it to:
+
+<ListItems
+	items={[
+		"Read organization and team membership",
+		"Read organization projects",
+		"Access user email addresses (read-only)"
+	]}
+/>
+
+<Note type="note">
+Organizations control which applications are allowed to access their private data. You may need organization admin approval to complete this process.
+</Note>
+
+## What's next {#whats-next}
+
+- [Manage your subscription](/getting-started/subscription-management)
diff --git a/docs/getting-started/quickstart.mdx b/docs/getting-started/quickstart.mdx
@@ -11,6 +11,7 @@ import DarkCodeBlock from "../../src/components/DarkCodeBlock"
 import InfoBox from "../../src/components/InfoBox"
 import ListItems from "../../src/components/ListItems"
 import Note from "../../src/components/Note"
+import BlockQuote from "../../src/components/BlockQuote"
 
 # Quickstart
 
@@ -145,13 +146,13 @@ After CodeRabbit reviews a pull request, you can converse with it about its revi
 
 After a few moments, CodeRabbit posts its reply, explaining its motivations for its recommendation. The reply might resemble the following:
 
-<ChatBubble>
-{`You're right that these functions are quite self-explanatory from their names alone. Docstrings aren't strictly necessary for every function, especially in smaller projects with clear function names.
+<BlockQuote>
+You're right that these functions are quite self-explanatory from their names alone. Docstrings aren't strictly necessary for every function, especially in smaller projects with clear function names.
 
-  While docstrings do provide benefits (IDE tooltips, documentation generation, help for future developers), they can sometimes feel redundant for very straightforward functions. It's ultimately a matter of coding style and project requirements.
+While docstrings do provide benefits (IDE tooltips, documentation generation, help for future developers), they can sometimes feel redundant for very straightforward functions. It's ultimately a matter of coding style and project requirements.
 
-  If you prefer to skip docstrings for obvious utility functions in this project, that's perfectly reasonable. Would you like me to adjust my review approach regarding documentation for this repository?`}
-</ChatBubble>
+If you prefer to skip docstrings for obvious utility functions in this project, that's perfectly reasonable. Would you like me to adjust my review approach regarding documentation for this repository?
+</BlockQuote>
 
 In this case, CodeRabbit is offering to adjust its future behavior when reviewing changes to this repository. Instead, follow the next step to ask CodeRabbit to implement part of its suggestions.
 

diff --git a/.../getting-started/upgrading-permissions.md → ...getting-started/upgrading-permissions.mdx b/.../getting-started/upgrading-permissions.md → ...getting-started/upgrading-permissions.mdx
@@ -3,13 +3,21 @@ title: Set permissions
 description: Learn how to upgrade CodeRabbit's GitHub App permissions when new features are added
 ---
 
+import ListItems from "../../src/components/ListItems"
+import Note from "../../src/components/Note"
+
 Sometimes when we add new features to CodeRabbit, we need to request additional GitHub permissions. If you see a warning about permissions or resources not being accessible, you'll need to approve the new permissions. Here's how to do it:
 
-1. Navigate to your organization or repository settings in GitHub
-2. Go to the "GitHub Apps" or "Installed GitHub Apps" section
-3. Find CodeRabbit in the list of installed apps
-4. Click "Configure"
-5. Review and accept the new permissions
+<ListItems
+	orderedList
+	items={[
+		<>Navigate to your organization or repository settings in GitHub</>,
+		<>Go to the "GitHub Apps" or "Installed GitHub Apps" section</>,
+		<>Find CodeRabbit in the list of installed apps</>,
+		<>Click "Configure"</>,
+		<>Review and accept the new permissions</>
+	]}
+/>
 
 ![Permission warning example](../../static/img/getting-started/permission-warning.png)
 
@@ -19,11 +27,17 @@ Sometimes when we add new features to CodeRabbit, we need to request additional
 
 Common reasons for permission updates include:
 
-- Access to new GitHub features
-- Enhanced repository scanning capabilities
-- Additional workflow automation features
-- Improved security features
+<ListItems
+	items={[
+		"Access to new GitHub features",
+		"Enhanced repository scanning capabilities",
+		"Additional workflow automation features",
+		"Improved security features"
+	]}
+/>
 
-> Note: If you're not an organization admin, you may need to request approval from your organization administrators to update the permissions.
+<Note type="note">
+If you're not an organization admin, you may need to request approval from your organization administrators to update the permissions.
+</Note>
 
-After accepting the new permissions, CodeRabbit will have the access it needs to function properly. If you continue to experience issues, try refreshing your browser or reaching out to our support team.
+After accepting the new permissions, CodeRabbit will have the access it needs to function properly. If you continue to experience issues, try refreshing your browser or reaching out to our support team.
diff --git a/docs/overview/why-coderabbit.md b/docs/overview/why-coderabbit.md
@@ -348,7 +348,7 @@ CodeRabbit is built for production environments with:
 
 ### Three Steps to Better Code Reviews
 
-1. **Sign in** with [GitHub](../platforms/github-com.md), [GitLab](../platforms/gitlab-com.mdx), or [Azure DevOps](../platforms/azure-devops.md)
+1. **Sign in** with [GitHub](../platforms/github-com.mdx), [GitLab](../platforms/gitlab-com.mdx), or [Azure DevOps](../platforms/azure-devops.mdx)
 2. Select and add repositories in CodeRabbit dashboard
 3. That's it. You're good to go.
 

diff --git a/docs/platforms/azure-devops.md b/docs/platforms/azure-devops.md
diff --git a/docs/platforms/azure-devops.mdx b/docs/platforms/azure-devops.mdx
@@ -0,0 +1,105 @@
+---
+title: Integrating CodeRabbit with Azure DevOps
+description: Learn how to integrate CodeRabbit with Azure DevOps.
+sidebar_label: Azure DevOps
+sidebar_position: 5
+---
+
+import InfoBox from "../../src/components/InfoBox"
+import ListItems from "../../src/components/ListItems"
+import { Warning } from "../../src/components/Warning"
+
+This guide will assist you in effectively integrating CodeRabbit with Azure DevOps.
+
+## Prerequisites
+
+<ListItems
+	items={[
+		"An active Azure DevOps account",
+		"Use of organizational email addresses is required; personal email addresses are not supported for this integration"
+	]}
+/>
+
+## Integration Instructions
+
+<ListItems
+	orderedList
+	items={[
+		<>Log in to the CodeRabbitAI application</>,
+		<>After logging in, you will be redirected to a page displaying Microsoft Apps consent requests. Please forward these requests to your administrator for approval.
+
+		<Warning>
+			If you are an administrator, you may approve the applications directly. If not, please contact your administrator to request approval for the applications.
+		</Warning>
+
+		<img src="/img/integrations/azure_apps_consent_page.png" alt="CodeRabbit admin consent page for Azure DevOps integration" style={{border: '1px solid #e0e0e0', borderRadius: '4px'}} /></>,
+		<>Once your administrator has approved the applications, click "Continue"</>,
+		<>You will be redirected to the "Onboarding" page, where you can select the organization you wish to integrate with</>,
+		<>On the "Azure DevOps User" page, enter your Personal Access Token for Azure DevOps.
+
+		<img src="/img/integrations/azure_devops_user_page.png" alt="CodeRabbit azure devOps integration settings page" style={{border: '1px solid #e0e0e0', borderRadius: '4px'}} /></>,
+		<>To install CodeRabbit on a repository, toggle the switch on the "Repositories" page</>
+	]}
+/>
+
+## How it works
+
+For the CodeRabbit app to post reviews on merge requests, it needs to interact with the Azure DevOps API, which requires a Personal Access Token. This token can be generated by creating a Personal Access Token from one of your existing users.
+
+You can create a new user in Azure DevOps and generate a Personal Access Token for that user, following [our recommendations](#recommendations).
+
+## Azure DevOps Personal Access Tokens
+
+To interact with the Azure DevOps API, a **Personal Access Token** is required. This token can be generated by creating a **Personal Access Token** from one of your existing users.
+
+Upon first login to the application (immediately after the onboarding screen), you will need to add the Personal Access Token.
+
+![CodeRabbit azure devOps integration modal](/img/integrations/azure_personal_access_token_add.png)
+
+### Recommendations
+
+<ListItems
+	items={[
+		<><strong>Create a dedicated user for CodeRabbit</strong> - This ensures the user is exclusively for CodeRabbit, allowing better access control</>,
+		<><strong>Use "CodeRabbit" as the username</strong> - This makes the user easily recognizable for future reference</>,
+		<><strong>Use a dedicated email address</strong> - This helps in easy identification and management</>,
+		<><strong>Use the CodeRabbit logo as the profile picture</strong> - This further ensures easy recognition. You can download our logo from <a href="/img/integrations/logo.png">here</a></>
+	]}
+/>
+
+### Key Points to Remember
+
+<ListItems
+	items={[
+		<>Personal access tokens have expiration dates. Ensure the expiration date covers the duration of your intended use of the CodeRabbit app</>,
+		<>Code reviews will be attributed to the owner of the personal access token</>,
+		<>If the personal access token expires, you can add a new one via the CodeRabbit UI:
+		<ListItems
+			nested
+			items={[
+				<>Navigate to the "AzureDevOps User" page in the sidebar</>,
+				<>Add the new token and click save</>
+			]}
+		/></>
+	]}
+/>
+
+### Generating a Personal Access Token
+
+Azure DevOps provides an option to generate a personal access token for a user. Follow these steps to generate the token:
+
+<ListItems
+	orderedList
+	items={[
+		<>Log in as the user intended for CodeRabbit reviews</>,
+		<>Next to your avatar on the headers right side is a settings icon, click it</>,
+		<>Choose "Personal Access Tokens"</>,
+		<>Click "New Token"</>,
+		<>Select the organization you want to use the token with or select "All accessible organizations"</>,
+		<>Enter a name and an expiry date for the token</>,
+		<>We need to have read & write access to "Work Items" & "Code" to post reviews on pull requests. If you are on the Pro tier also add "Build" access for pipeline failure remediation</>,
+		<>Click "Create"</>
+	]}
+/>
+
+![CodeRabbit azure devOps personal access token creation form](/img/integrations/azure-access-token.png)