DEV Community: Ashik Varma

The Code Review Killer: Ditch Manual Checks with this n8n & GPT Automation Guide

Ashik Varma — Tue, 02 Dec 2025 03:07:05 +0000

Have you ever wished you had a code review assistant of your own that could instantly give feedback on each new Pull Request (PR)?

Manual code reviews are a necessary part of the development process, but they are expensive, slow, and inconsistent. As of writing this article, tools like GitHub Copilot's Code Review feature are premium, requiring subscriptions:

Copilot Pro: ($10 USD/month or $100/year)
Copilot Pro+: ($39 USD/month or $390/year)

Can we achieve this within a reduced budget? YES.

This article is designed to help you build your own persistent, automated AI Code Review Assistant hosted for free (or near-free) using a powerful, controlled workflow.

Tools

	Role in the System	Why We Use It
n8n	Workflow Creation	An AI workflow automation tool that connects GitHub to OpenAI, manages the logic, and formats the output.
NHost	Managed Database	Provides a free-tier, managed PostgreSQL database where n8n stores all workflow data and credentials.
Render	Hosting n8n	Hosts our n8n web service, assigns a domain URL, and connects to the NHost database.
OpenAI	Review Code	Provides the LLM intelligence to critique the code.

Why PostgreSQL (NHost) over SQLite?

n8n uses SQLite by default, which is great for local development but does not support highly concurrent transactions and struggles with scalability. We need a solution that can scale and adapt based on the number of Pull Requests being raised to the repository. NHost provides a free tier that fits well for a personal project while offering PostgreSQL's stability.

Database Setup and Hosting

I have followed the exact steps mentioned in this article → The Ultimate Guide to Self-Hosting n8n for Free using Render and Nhost - DEV Community to set up the underlying infrastructure.

Step 1

Create an account in NHost, start a project, and set up a Database. This will generate environment variables as mentioned in the post.

Step 2

Sign up for an account on Render, create a new Web Service, and choose n8nio/n8n:latest as the Docker image. Add the environment variables generated in NHost to the Render project.

This will host your n8n application on the cloud and generate a domain name.

Step 3

To ensure GitHub can reach your bot, you must correct the webhook URL inside n8n. Set the following environment variables in your Render Web Service settings:

WEBHOOK_URL: https://[your-render-domain].onrender.com/
N8N_HOST: [your-render-domain].onrender.com
N8N_PROTOCOL: https

Credentials Required

GitHub Access Token: Generate a Personal Access Token from your GitHub settings and ensure it has the repo scope checked (required for reading and commenting).

OpenAI API Key: You'll need an active key. If you are a new user, you might have received free trial credits, but many users now need to pay the minimum of $5 to activate the key and avoid the insufficient_quota error.

Cost Control: I have used gpt-5-nano for this project as it consumes the fewest tokens. You can use any capable model you wish, but remember that the Mini models offer the best balance of power and cost.

Creating the Workflow

In N8n, you’ll find a list of actions in the right pane that you can drag and drop to the canvas. The actions needed for our workflow are Github Trigger, HttpRequest, Code in JS, OpenAI.

Github Trigger

In Github, generate an Access Token from the settings and provide all access.

In the right pane inside n8n, search “Github”, and drag and drop “on a pull request” trigger. This will add the same to your canvas as the first step. Click on the item to open the settings.

Once saved, the GitHub Trigger node will display a unique Webhook URL.

Fetching the Code Diff

The goal is to fetch the raw code changes from the PR event data. The previous node provides an object containing the PR details. You must construct the GitHub API URL to get the file changes. For simplicity, you can often grab the {{ $json.body.pull_request.url }}/files to get the list of files in the PR. This HTTP request needs to use the GitHub Access Token credential for authorization.

Defining the AI Persona

The next step is to define the prompt for OpenAI to start reviewing your PR. Inject reviewPrompt to define the AI's role, ensuring high-quality, structured feedback. Paste a detailed prompt into this node. The persona "Senior Software Engineer" is vital for quality and technical feedback. This node structures the prompt and the code diff into the format expected by the OpenAI Chat Model. Add your own customizations inside the instructions variable.

Generating the Review

This is the step where you integrate OpenAI into the workflow. Select the cheapest capable model, such as gpt-5-nano. In the node settings, map the variables from the previous Function node. Add the API key that was generated previously.

Drag and drop {{$json.reviewPrompt}} to the Prompt field.

Formatting the Output

This is the node labeled "Translate to Github version" in the diagram. The goal is to take the raw Markdown text generated by OpenAI and wrap it in the exact JSON payload required by the GitHub Comments API.

Posting the Comment

The final step of the workflow: Node labeled "Post comments on Github". The goal is to send the formatted review back to the Pull Request.

Details:

Method: POST
API Endpoint: Construct the URL using data from the trigger node: {{ $('Github Trigger').item.json.body.pull_request.url }}/reviews
Body: Use the JSON output from the previous step - {{ $json.comments }}
Authentication: Select the GitHub Access Token credential.

Output

The agent posted the review comment to the Pull Request based on the instructions provided. Additionally, you can provide a structure or template, the agent can follow while creating the comment.

Conclusion

This is a fairly basic prompt that could be improved by adding more instructions to the Code Review Prompt node.

To ensure your solution stays robust and economical, implement conditional skipping logic in an IF Node to skip the expensive OpenAI call for trivial or work-in-progress PRs, and add schema validation to your final Function Node to ensure the AI's JSON output is always clean and accepted by the GitHub API.

You are now in full command of your automation. Happy coding!

Build a Design Picker Extension with Vanilla Javascript

Ashik Varma — Fri, 30 Jul 2021 02:55:36 +0000

Introduction

Sometimes you like the fonts and color palettes used in websites that you visit and wish to check out what they are. Most people use different extensions for this purpose.

Fetching a CSS property from wherever you click is so easy, that if you could build an extension, fetching the most relevant properties you want in one go improves your productivity.

I'm going to walk you through the steps I've used to build a simple extension using pure JavaScript and CSS.

If you'd like to explore it first, Check out -> Github Link

Files

Manifest file

{
  "manifest_version": 2,
  "name": "Picker Extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "html": ["popup/popup.html"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["tabs"],
  "icons": { "16": "icon.png", "48": "icon.png", "128": "icon.png" },

  "browser_action": {
    "default_popup": "popup/popup.html",
    "default_title": "Picker"
  }
}

A manifest.json file is where the configuration for your project exists. The browser derives the name, paths to your scripts, icons, permissions, etc. through this file. Furthermore, we have a list of options to specify the nature of your extension, like, how it should be rendered when the user opens a new tab or which all websites should this extension be applied to, etc.

Content Script

A content script is a JavaScript file that has access to the DOM of the website that you visit. This means that you can get and set the properties of any element in the DOM tree.

Pop up

This is the window that pops up when you click on the extension icon. Pop-up doesn't have access to the content of the website that you visit. This is also referred to as "Extension" in the Chrome development docs. It has its DOM and is standalone. But, we can make the connection between your Content Script and Popup script through a series of "Message Passing".

Get your Design

In the Content script ->

function listenToClick() {
  document.addEventListener("click", function (event) {
    payLoad = {
      ...payLoad,
      fontFamily: window
        .getComputedStyle(currElement, null)
        .getPropertyValue("font-family"),
      fontSize: window
        .getComputedStyle(currElement, null)
        .getPropertyValue("font-size"),
      color: window
        .getComputedStyle(currElement, null)
        .getPropertyValue("color"),
      backgroundColor: window
        .getComputedStyle(currElement, null)
        .getPropertyValue("background-color"),
    };
  });
}

Two global variables - payLoad and currElement - are initialized outside this function. Whenever the user hover over an element, the currElement will be set. Further, clicking the element fetches the design using the code above.

Initiate a Handshake

You need to ping the content script and get the design values you obtained in the content script as response.

In the Popup script ->

function initiateHandshake() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id,
      { message: "handshake" },applyValuesToView);
  });
}

function applyValuesToView(response) {
  let message = response;
  if (message != undefined) {
    if (message["color"]) font_col.innerHTML = message["color"];
    if (message["backgroundColor"]) bg_col.innerHTML = message["backgroundColor"];
    if (message["fontSize"]) font_size.innerHTML = message["fontSize"];
    if (message["fontFamily"]) font_fam.innerHTML = message["fontFamily"];
  }
}

Whenever the user opens the popup, a handshake message is sent to the content-script and in response, it will send the design data fetched when an element was clicked.

Send Response for Handshake

function listenToPopUp() {
  chrome.runtime.onMessage.addListener(function (
    request,
    sender,
    sendResponse
  ) {
    if (request.message === "handshake") sendResponse(payLoad);
  });
}

Copy design value

function copyDesign(event) {
  var tempInput = document.createElement("input");
  tempInput.value = event.target.innerText;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
  toggleSnackBar();
}

This is a hack for copying the text to the clipboard. An ** input** element is created to simulate click and copy through the JavaScript code.

We use a similar approach whenever we want to download content from a link.

Publish the Extension

Navigate to chrome://extensions/ and click on the Load unpacked button.
A prompt will appear to select your folder. Add the whole folder and it will install your extension locally.

This will run only on **your* browser.*

That's it.

Feel free to fork the repo and customize your extension as you like.
Thank you, for reading.