✅
AIが書いたコードをローカルでレビューできる「ReviewIt」を作った
最近、AIが書いたコードをレビューしたい機会が増えましたよね。
しかしAIがコードを出してきたあとに軽くターミナルのgit diffで差分を眺めるのですが、いまいち頭に入ってこない…
これ激しく同意で、めちゃくちゃあるな、と思いました。
でも自分とAIしか関わっていないのにいちいちPRを作るのも面倒…
作った
というわけで、ローカルでGitHubのレビュー画面のような表示をできるツールを作ってみました。
npx reviewit
これでローカルサーバーが起動してlocalhostが立ち上がり、HEADコミットの差分が以下のように表示されます!
特定コミットハッシュの指定もできます。
# Review HEAD commit
npx reviewit
# Review Uncommitted working directory diff
npx reviewit .
# Review a specific commit
npx reviewit 6f4a9b7
# Review HEAD~3
npx reviewit HEAD~3
# Custom port, don't auto-open browser
reviewit 6f4a9b7 --port 4300 --no-open
UIはGitHub同様side-by-sideとinline、デフォルト空白無視(-w状態)でどちらもグローバルヘッダーから切り替えられます。
コメント機能
AI Coding用途なので、行コメントをつけつつ、それを楽にAIに送信できるようプロンプトとしてコピーできるようにしました。
ここで Copy Prompt
ボタンを押すと1行目にファイルパスと行番号が付与された形でクリップボードに入ります。
src/client/components/DiffViewer.tsx:13
相対パスじゃなくて @/types でimportしてみて
コメントしてもlocalStorageに入るのみでどこにも送信されないので、コピーして自分でClaude Codeのプロンプト欄に貼ってください!
本当はコメントした瞬間Claude Codeのセッションにプロンプトを送れたらよいのですが…結構大変そうですよね〜
まあ使いながら今後もどんどん改善していきたいと思います。
いろんなプロジェクトのgitで開発中のディレクトリでnpx reviewit
だけで使えるのでぜひ使ってみてください!改善やStarもお待ちしてます!!
Discussion
denoを介して最小権限でreviewitを実行したいと考え、いろいろ試したところ下記で実行できました。
読み込み権限はもう少し絞れるかもしれません。
deno run -E -R --allow-run --allow-net --no-prompt npm:reviewit@latest