How Codium PR Agent Works on GitHub

How Codium PR Agent Works on GitHub


CodiumAI is a coding assistant that developers can use to enhance their coding experience using the power of Artificial Intelligence.

It is a trending tool with features such as accurate code suggestions, explanation of the code, automatic test generation, and various language and IDE Support.

For this demo, we are going to use CodiumAI to make a Pull Request.



Installation

For the installation, we will need two things:

  • OpenAI API Key
  • GitHub Personal Access Token(Classic)

Now, let’s get the OpenAI API Key.



Getting OpenAI API Key

First, let’s go to the Codium AI GitHub repository and follow the installation instructions.

To get started with PR-Agent quickly, you first need to acquire an OpenAI key with access to GPT-4. Let’s do that.

Go to https://platform.openai.com/

You can then sign up

Image description

After signing up, log in to OpenAI.

Image description

This will lead you to the Welcome page.

Image description

When you hover over the left side bar menu, you will see an padlock icon called API keys.

Image description

Click on it.

We will then create an API key. I already created mine as you can see.

Image description

Click on the Create new secret key button.

Image description

Give your secret key a name. In my case, I will name it For CodiumAI. You can give it any name you like.

Image description

You API key will be generated.

Image description

Make sure to copy it somewhere. We are going to use it.

With CodiumAI, you can use many Git platforms like GitHub, Gitlab and Bitbucket. In comparison to GitHub Copilot, you can only use it with GitHub.

Also, the Codium PR-Agent is available both on Git and IDE not just Git.

In our case, we will use the Git version using GitHub.

We will need to get a GitHub personal access token(classic) since it is one of the two requirements of using Codium.



Getting a GitHub Personal Access Token(Classic)

To get the GitHub Personal Access Token, lets head over to GitHub.

On the upper right corner, click on your profile picture then on Settings.

Image description

In the left side bar, click on Developer settings

In the left side bar, under Personal Accecc Tokens, click on Tokens(classic).

Image description

Select generate new token, then generate new token classic

In the Note field, give your token a descriptive name.

Image description

To give your token an expiration, select Expiration, then choose a default option or click Custom to enter a date.

Image description

Select the scopes you would like to grant this token.

Image description

Click the Generate token button.

Image description

You can then copy the token somewhere for future reference.

Image description



Adding the secret to our repository

Before adding our secret, we need to have a repository.



Creating a new repository

So, let’s go to GitHub and create a repository.

First login to GitHub.

Image description

Then create a new repository

Alt text

The name of our website will be bakery website

Image description

It is a public repository. Incase you want to fork it, here is the link to it: https://github.com/KarlGusta/bakery-website



Now to adding our Secrets

Go to the repository that you have just created.

Image description

Click on Settings of the repository.

Image description

On the left side bar, click on Actions on the Secrets and Variables drop-down.

Image description

Click on New Repository Secret button.

Image description

Here, we will add the Open AI key that we got from the OpenAI website.

For the name of the key, it is OPENAI_KEY Make sure you name it exactly that way.

Image description

Click Add Secret



Cloning our repo to our local computer

We will then clone it to our local computer.

Image description

Let’s open it on VS Code.

Image description

We will create a simple index.html to use it for the demo.

Image description

I have added a title and a little description of it.

Image description

Let’s see how it looks on the browser. I’m using a VS Code extension called Live Server to view my page.

Image description

Here is the page.

Image description

Now, let’s push our changes to GitHub.



Adding GitHub Actions

We are going to use GitHub Actions.

To start lets create a .github/workflows/pr_agent.yml file to add the action.

Created the folder .github in VS Code by clicking the create folder icon.

Image description

Next, lets create the workflows folder inside .github folder.

Image description

Now, lets create the file pr_agent.yml inside the folder workflows.

Image description

Inside the file, add this GitHub actions code.

on:
  pull_request:
  issue_comment:
jobs:
  pr_agent_job:
    runs-on: ubuntu-latest
    permissions:
      issues: write
      pull-requests: write
      contents: write
    name: Run pr agent on every pull request, respond to user comments
    steps:
      - name: PR Agent action step
        id: pragent
        uses: Codium-ai/pr-agent@main
        env:
          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode

Exit fullscreen mode

Image description

Now lets push the changes to GitHub.

On the main branch, commit and push to GitHub.

Image description

Now, to testing the Codium PR Agent GitHub action.



Pushing changes to GitHub

Image description

The change has been pushed successfully as you can see.

Image description

Now, let’s a branch that we can use to test our Pull Requests.



Creating a branch to test Pull Requests

Image description

Call the branch new branch and press ENTER.

Image description

Now, let’s make a few changes and publish it with the branch.

Image description

We now commit and push the new changes to GitHub. Notice we are on our new branch.

Image description

Click on Yes.

Image description

Now back to our repository on GitHub.



Creating our first Pull Request

Let’s compare and make our Pull Request. Click the button Compare & Pull Request.

Image description

On the description, you can say write this Adding more content in the description or anything.

Image description

Then click the button Create Pull Request

Click the merge button.

Now, lets test how Codium PR Agent works.



Testing how Codium PR Agent works

CodiumAI PR Agent supports many commands which we are going to look at today. For Codium, these include things like:

  • Auto Description(/describe). This automatically generates the PR description. The title, type, summary, code walkthrough and labels.
  • Auto Review(/review). Adjustable feedback about the PR main theme, type, relevant tests, security issues, score, and various suggestions for the PR content.
  • Question Answering(/ask …). Answering free-text questions about the PR.
  • Code Suggestions(/improve). Committable code suggestions for improving the PR.
  • Update Changelog(/update_changelog). Automatically updating the CHANGELOG.md file with the PR changes.
  • Find Similar Issue(/similar_issue). Automatically retrieves and presents similar issues.
  • Add Documentation(/add_docs). Automatically adds documentation to un-documented functions/classes in the PR.
  • Generate Custom Labels(/generate_labels). Automatically suggests custom labels based on the PR code changes.

Let us test the Auto Review(/review) command.



Testing the Auto Review command

After merging, under the comment section, write this command @CodiumAI-Agent /review

Image description

Then click the button comment.

Codium PR Agent will do a review for you. Here it is.

Image description

The review is very descriptive and easy to understand.

It analyses the PR giving you information about the main theme. In our case, it is to enhance website content.

It also gives you a PR Summary, Type of PR, if there are any tests added, estimated effort to review the PR, any security concerns and PR feedback.

When we try the Code suggestions, it shows us how we can improve our code.

Image description

You can test all the above commands to see how Codium can work to suit you best.

Happy Coding!
Karl



Source link
lol

By stp2y

Leave a Reply

Your email address will not be published. Required fields are marked *

No widgets found. Go to Widget page and add the widget in Offcanvas Sidebar Widget Area.