AIが書いたコードをローカルでレビューできる「ReviewIt」を作った

に公開
1

最近、AIが書いたコードをレビューしたい機会が増えましたよね。
しかしAIがコードを出してきたあとに軽くターミナルのgit diffで差分を眺めるのですが、いまいち頭に入ってこない…

https://x.com/mizchi/status/1938978478814331065

これ激しく同意で、めちゃくちゃあるな、と思いました。
でも自分と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もお待ちしてます!!

https://github.com/yoshiko-pg/reviewit

Discussion

kuboshokubosho

denoを介して最小権限でreviewitを実行したいと考え、いろいろ試したところ下記で実行できました。
読み込み権限はもう少し絞れるかもしれません。

deno run -E -R --allow-run --allow-net --no-prompt npm:reviewit@latest