- Notifications
You must be signed in to change notification settings - Fork45
Introduction & Quickstart Page Styling#457
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Open
PrasadBhat4 wants to merge10 commits intocoderabbitai:mainChoose a base branch
base:main
Could not load branches
Branch not found:{{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline, and old review comments may become outdated.
Uh oh!
There was an error while loading.Please reload this page.
Open
Changes fromall commits
Commits
Show all changes
10 commits Select commitHold shift + click to select a range
4bc9f73 docs: convert introduction to MDX and add React components for better UI
mohd-khan096aabb8d docs: add Quickstart guide and replace FeatureList with ListItems com…
mohd-khan0924e6ad7 docs: WIP Quickstart ##438
mohd-khan09f8aa7f3 docs: added reusable components with Introduction Page (#438)
2991900 docs: added quickstart page (#438)
d6436da docs: modified chat bubble to include custom colors
de79b5b docs: removing unnecessary screenshot (#438)
c749c72 Merge branch 'main' into PrasadBhat4/docs-layout-improvements
PrasadBhat47539f61 Merge branch 'main' into PrasadBhat4/docs-layout-improvements
PrasadBhat49827f78 Merge branch 'main' into PrasadBhat4/docs-layout-improvements
PrasadBhat4File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
138 changes: 0 additions & 138 deletionsdocs/getting-started/quickstart.md
This file was deleted.
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
184 changes: 184 additions & 0 deletionsdocs/getting-started/quickstart.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| --- | ||
| title: Quickstart | ||
| sidebar_label: Quickstart | ||
| description: See CodeRabbit in action, using a live GitHub repository. | ||
| sidebar_position: 1 | ||
| --- | ||
| import CodeBlock from "@theme/CodeBlock" | ||
| import ChatBubble from "../../src/components/ChatBubble" | ||
| import DarkCodeBlock from "../../src/components/DarkCodeBlock" | ||
| import InfoBox from "../../src/components/InfoBox" | ||
| import ListItems from "../../src/components/ListItems" | ||
| import Note from "../../src/components/Note" | ||
| # Quickstart | ||
| This tutorial gives you a hands-on demonstration of CodeRabbit, using a real, GitHub-based repository. It guides you through the following tasks: | ||
| <ListItems | ||
| orderedList | ||
| items={[ | ||
| "Integrate CodeRabbit into a GitHub-based repository that you own.", | ||
| "Observe CodeRabbit perform a code review of a pull request that you initiate.", | ||
| "Converse with CodeRabbit about the code review.", | ||
| "Prompt CodeRabbit to generate its own improvements to the pull request.", | ||
| ]} | ||
| /> | ||
| When you complete this tutorial, you'll have seen CodeRabbit's code-review feature in action, and glimpsed a few of its other AI-driven abilities as well. | ||
| <InfoBox> | ||
| For a more general overview of CodeRabbit, see <a href="/">Introduction</a>. | ||
| </InfoBox> | ||
| <Note> | ||
| While this tutorial focuses on GitHub, CodeRabbit also works with GitLab, | ||
| Azure DevOps, and Bitbucket. For more information, see{" "} | ||
| <a href="/platforms/">Integrate with Git platforms</a>. | ||
| </Note> | ||
| ## Before you begin | ||
| Create a new, private repository on GitHub. Name the new repository `coderabbit-test`, and let it have otherwise default GitHub settings. | ||
| ## Integrate CodeRabbit with your GitHub account | ||
| To integrate CodeRabbit with your GitHub account, follow these steps: | ||
| <ListItems | ||
| orderedList | ||
| items={[ | ||
| <> | ||
| Visit{" "} | ||
| <a href="https://app.coderabbit.ai/login?free-trial"> | ||
| the CodeRabbit login page | ||
| </a> | ||
| . | ||
| </>, | ||
| <> | ||
| Click <strong>Login with GitHub</strong>. | ||
| </>, | ||
| <> | ||
| Click <strong>Authorize coderabbitai</strong>. | ||
| </>, | ||
| ]} | ||
| /> | ||
| CodeRabbit takes a moment to set up the integration. After it finishes, the CodeRabbit dashboard appears. | ||
| ## Add CodeRabbit to your repository | ||
| To add CodeRabbit to your test repository, follow these steps: | ||
| <ListItems | ||
| orderedList | ||
| items={[ | ||
| <>On the CodeRabbit dashboard, click <strong>Add Repositories</strong>.</>, | ||
| <>Select the <strong>Only select repositories</strong> radio button.</>, | ||
| <>From the <strong>Select repositories</strong> menu, select the <code>coderabbit-test</code> repository that you created earlier in this Quickstart.</>, | ||
| <> | ||
| Click <strong>Install & Authorize</strong>. | ||
| <Note> | ||
| CodeRabbit requests read and write access to your repository in order for its code review, issue management, and pull request generation features to work. CodeRabbit never stores your code. For more information, see <a href="https://trust.coderabbit.ai">the CodeRabbit Trust Center</a>. | ||
| </Note> | ||
| </>, | ||
| <>If a CodeRabbit <strong>Complete your signup</strong> dialog appears, then fill it out with the requested information before continuing.</>, | ||
| ]} | ||
| /> | ||
| CodeRabbit is now ready to use with your test repository. The next steps demonstrate its core code-review features. | ||
| ## Let CodeRabbit perform a code review | ||
| The following steps initiate a pull request to add a tiny and somewhat flawed Python library to your repository, triggering analysis and review from CodeRabbit. | ||
| Use your usual Git workflow to perform the following steps in the `coderabbit-test` repository: | ||
| <ListItems | ||
| orderedList | ||
| items={[ | ||
| "Create a branch named `add-utils`.", | ||
| <> | ||
| In that new <code>add-utils</code> branch, create a new file called <code>simple_utils.py</code>, with the following content: | ||
| <DarkCodeBlock language="python">{`# simple_utils.py - A tiny utility library | ||
| def reverse_string(text): | ||
| """Reverses the characters in a string.""" | ||
| return text[::-1] | ||
| def count_words(sentence): | ||
| return len(sentence.split()) | ||
| def celsius_to_fahrenheit(celsius): | ||
| return (celsius * 9/5) + 32 | ||
| `}</DarkCodeBlock> | ||
| </>, | ||
| "Commit the added file to the `add-utils`branch. Use any text you want for the commit message.", | ||
| "Create a pull request that proposes to merge the`add-utils`branch into the`main` branch. Use any text you want for the pull request message.", | ||
| ]} | ||
| /> | ||
| After a few moments, CodeRabbit responds to the pull request using the `@coderabbitai` GitHub account. It performs the following actions, all of which are visible on the pull request's page on GitHub: | ||
| <ListItems | ||
| items={[ | ||
| <>If you didn't write a pull request summary, then CodeRabbit adds a new summary to the pull request.</>, | ||
| <>CodeRabbit posts a comment titled <strong>Walkthrough</strong> containing analysis and commentary about the content of the pull request.</>, | ||
| <>CodeRabbit attaches a detailed code review to the pull request as another comment.</>, | ||
| ]} | ||
| /> | ||
| Part of the review resembles the following screenshot: | ||
|  | ||
| This shows that CodeRabbit has noticed some flaws with this Python library, including a lack of docstrings and input validation. The review comment identifies these flaws, and suggests how you might improve them. | ||
| ## Ask CodeRabbit for more information | ||
| After CodeRabbit reviews a pull request, you can converse with it about its review. You can also give CodeRabbit special commands to request it to perform specific functions, such as generating appropriate code changes for you. | ||
| 1. Post the following as a new GitHub comment attached to the pull request: | ||
| <ChatBubble>@coderabbitai Why do all of these functions need docstrings? Isn't it obvious enough what they do?</ChatBubble> | ||
| 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. | ||
| 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> | ||
| 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. | ||
| 2. Post the following as another new comment: | ||
| <ChatBubble>@coderabbitai generate docstrings</ChatBubble> | ||
| After a few moments, CodeRabbit does the following: | ||
| <ListItems items={[ | ||
| <>CodeRabbit creates a new branch, based on `add-utils`.</>, | ||
| <>CodeRabbit commits changes to the branch that adds suggested docstrings to `add-utils`.</>, | ||
| <>CodeRabbit opens a new pull request between the new branch and `add-utils`.</>, | ||
| ]} /> | ||
| ## Clean up | ||
| Continue experimenting with CodeRabbit in your test repository for as long as you like. When you're finished, you can delete the repository. | ||
| You are now ready to add CodeRabbit to other repositories that you own, and let it review some real pull requests. | ||
| ## What's next | ||
| <ListItems items={[ | ||
| <><a href="/platforms/">Integrate CodeRabbit</a> with your repositories on GitHub, GitLab, Azure DevOps, or Bitbucket.</>, | ||
| <><a href="/getting-started/configure-coderabbit">Configure CodeRabbit</a> beyond its default settings.</>, | ||
| <><a href="/guides/review-instructions">Add custom review instructions</a>.</>, | ||
| <><a href="/getting-started/support">Get support for CodeRabbit</a>.</>, | ||
| <><a href="/overview/why-coderabbit">Learn more about how CodeRabbit works</a>.</>, | ||
| ]} /> |
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.