Skip to main content

Command Palette

Search for a command to run...

CodiumAI PR-Agent,在 GitHub 上用 AI 來 Code Review

Published
•2 min read•View as Markdown
CodiumAI PR-Agent,在 GitHub 上用 AI 來 Code Review
L

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.

本篇要解決的問題

上次寫了一篇〈CodiumAI PR-Agent,在 GitLab 上用 AI 來 Code Review〉,原本在最後說下一篇會寫的是自己做一個用 AI 來 Code Review 的文章。

但這週下班後,在幫朋友寫一些東西時,發現常用的還是 GitHub 平台,而且加了 AI Code Review,真的是很有幫助,所以就決定先寫這篇 GitHub 使用的筆記文。

因為大部份的工跟 GitLab 那篇幾乎相同,所以這篇就是速速的寫。

本篇主要是用 GitHub Action 的方式,參考資源:

GitHub Run as a GitHub Action


準備好必要東西:GitHub 帳號、OpenAI API Key

GitHub 帳號,應該大部份的工程師大大們都有了,這邊就跳過。

OpenAI API Key,上一篇的段落已經寫過,就不再重寫,請看:OpenAI API Key。


GitHub 專案,設定 secret 變數

OpenAI API Key 不能外露,因此需要像 .env 檔一樣,將其設定為隱藏變數。

在 GitHub 建立好專案後,點擊:Settings > Secrets and variables > Actions > New repository secret:

在 GitHub 專案的設定頁面中,如何進入 Secrets and variables > Actions 以新增 OpenAI API Key 的畫面

在建立 secrect 時,要填寫二個欄位。

Name:填上 OPENAI_KEY。

Secret:填寫「OpenAI API Key」的那一串。

在 GitHub 的 New repository secret 頁面上填寫 OpenAI API Key 的名稱和密鑰欄位

填寫之後,點擊「Add secret」,就新增成功。


提交必要檔案

接著,我們把官方提供的程式碼,提交到 GitHub 專案上,就可以使用 AI Code Review 了。

1 .pr_agent.toml

先推送 .pr_agent.toml 檔案的原因,在 GitLab 那篇有完整的說明,簡單來說,就是要省 $$。

專案根目錄下,新增名為「.pr_agent.toml」的檔案,檔案內容如下:

[config]
model = "gpt-4o-mini-2024-07-18"
model_turbo = "gpt-4o-mini-2024-07-18"
fallback_models = ["gpt-4o-mini-2024-07-18", "gpt-4o-mini"]

這個檔案建立了以後,先提交到 GitHub 上。

pr_agent.yml

這個檔名跟前一個相同,只是副檔名不同,是要觸發 GitHub Action 用的。

我們專案的根目錄,建立 GitHub Action 用的資料夾跟檔案:

.github/workflows/pr_agent.yml

pr_agent.yml 的檔案內容如下:

on:
  pull_request:
    types: [opened, reopened, ready_for_review]
  issue_comment:
jobs:
  pr_agent_job:
    if: ${{ github.event.sender.type != 'Bot' }}
    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 }}

這段程式碼的最後,有看到 secrets 除了 OPENAI_KEY 之外,其實還需要另一個 GITHUB_TOKEN,這一點官方文件上說,GitHub 會自行生成,所以我們不用擔心。

檔案建立完成後,可以立即提交,也可以等到開發完成某個階段後再提交。

這個檔案一提交上去,之後只要有合併請求,就會自動觸發 AI Code Review。


測試一下威力

跟在 GitLab 時一樣,我們也來看一下 GitHub 上的 AI Code Review。

提交程式碼後,點擊 Pull Request,其實 AI 回應的東西蠻多的,上一篇 GitLab 只截圖了其中一小塊,這次就把收到的所有內容都一次截圖下來:

顯示在 GitHub 的 Pull Request 頁面中,AI Code Review 自動生成的回饋內容範例,包含程式碼檢查和建議


再小結一次

自從加進了 AI Code Review,在寫程式上真的覺得有幫助,最簡單的比方拼錯字,都會被指出來。

AI 也會另外提供一些沒意料到的 Bug,有幾次真的是看到 AI 的回饋,才想到漏寫、漏想了什麼。

GitHub 安裝方式因為不用再手動建立 GitHub Token,所以比 GitLab 又少了一個步驟,要安裝很容易。

最近一直在想,該怎麼樣把更多的 AI 打進工作流裡,減少人力的負擔,把工作心力可以釋放到其他區塊上。

有把 AI 大量應用在工作、生活上的棒油們,歡迎留言提供你的作法~

More from this blog

圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小

本篇要解決的問題 很多網站功能會需要處理使用者上傳的圖片,比方讓使用者上傳會員照片。 但隨著手機相機愈做愈好,拍出來的照片隨便都是幾 MB,直接上傳的話,耗時也佔空間。 雖然網路上搜尋有許多圖片壓縮工具,但大多只能設定固定的壓縮的品質,無法保證壓縮後的檔案大小符合需求。 本筆記文將使用 Compressor.js 套件,實作一個圖片壓縮功能,符合以下需求: 自動嘗試不同的壓縮品質,直到檔案小於指定大小(ex: 600KB)為止。 將圖片轉換為 WebP 格式。 長、寬限制最大尺寸。 這...

Oct 4, 20254 min read
圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小

使用 pm2.web 建立免費 PM2 監控系統

本篇要解決的問題 PM2 是 Node.js 裡常用的 process manager,一般如果是透過網頁監控、重啟,大概會使用官方的 Keymetrics。 但,But!就是這個 But!免費版最多只能監控 4 個 Process,再多就要掏出魔法小卡了。 問了 ChatGPT 後,發現有一個開源的替代方案:pm2.web,可以自己架設,不管幾個 process 都完全免費。 以下筆記如何使用 Vercel + MongoDB Atlas 部署 pm2.web,免費監控我們的 PM2。 架構...

Sep 26, 20252 min read
使用 pm2.web 建立免費 PM2 監控系統

GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學

本篇要解決的問題 最近在研究 MCP,剛好在 Threads 上看到有人實測 Figma MCP,想試看看是否真的能透過 AI 進行切版。 實作了一下後,還真的可以,不過目前僅針對簡單設計稿進行測試,結果略有跑版現象,整體效果尚可接受。 但目前就有這成果覺得厲害,再給它一段時間,也許前端工程師可以省掉切版的時間,把心力放到別的地方。 前提是,客戶要很明確的知道自己要什麼 XD,不然靠 AI 微調,還不如人工直接改程式還比較快。 用到的資源 以下是要實作用 Figma MCP 來切版,需要的資源:...

Apr 12, 20252 min read
GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學

使用 Google Apps Script 串接 Google Analytics API,整合多站數據

本篇要解決的問題 一間公司裡可能旗下會有多個網站,想同時查看所有網站的 GA 數據,通常需要開啟多個瀏覽器視窗並排顯示,操作較為繁瑣。 如果可以改由 API 來取得 GA 的數據,工程師就可以把各站的資料顯示在一個頁面上,而不用同時開多個 GA 來看。 開通 GA API 取得 GCP 專案編號 要先有 Google Cloud Platform(GCP)的專案,沒有的話登入自己的 Google 帳號,就可以先增一個。 專案編號就在 資訊主頁 上: 開通 GA API 功能 在使用 API ...

Mar 29, 20254 min read
使用 Google Apps Script 串接 Google Analytics API,整合多站數據

監聽 localStorage 事件:如何在同一頁面內偵測變更

本篇要解決的問題 我們有時會把資訊存在瀏覽器的空間裡,像是 Cookies、Local Storage、IndexedDB。 Local Storage 原生的 storage 事件主要用於跨分頁同步,如下: window.addEventListener("storage", () => {}); 但如果想要在同一個頁面內監聽變更,就需要手動覆寫 localStorage 方法。 localStorage event listener 我們可以透過 Storage.prototype 覆寫...

Mar 3, 20251 min read
監聽 localStorage 事件:如何在同一頁面內偵測變更
L

Let's Write

63 posts

前端工程師 August 的學習筆記 — solving problems, in simple ways.