browser-review: 指さして直すUIレビューツール

https://github.com/kechol/browser-review

Transcript

1. 指さして直す UI レビューツール browser-review Point at it, say what is wrong, let your agent fix it 指さすだけで、エージェントが直す。
2. browser-review — Point at it, say what is wrong, let your agent fix it ブラウザとターミナルを往復しながらの修正は面倒 Claude Code などのエージェントに UI の修正を頼むとき、いまはたいてい次の手順を 踏みます。 1. ブラウザで気になる箇所を見つける 2. ターミナルの Claude Code に切り替える 3. 「ヘッダー右上の青いボタンの余白が……」と文章で説明する 4. ブラウザに戻って確かめる。違う場所が直っていたら、2 からやり直し ブラウザとターミナルを行き来するのも、場所を文章で説明するのも手間です。 2
3. browser-review — Point at it, say what is wrong, let your agent fix it browser-review ：ブラウザから修正を頼めるツール は、ブラウザに表示した UI に直接コメントを残し、 その修正を Claude Code などのコーディングエージェントに任せるツールです。 browser-review /browser-review:open http://localhost:5173 /browser-review:resolve # レビューを始める（.html ファイルも可） # 届いたコメントを直してもらう 表示された URL を開き、要素をクリックして直したいことを書くだけ。 エージェントにはそのファイルと行が届くので、ブラウザを離れずに済みます。 Claude Code のプラグインです。MCP 対応のエージェントや curl からも使えます。 3
4. browser-review — Point at it, say what is wrong, let your agent fix it ページ内のオーバーレイ UI から要素を選択して修正依頼 を押して要素をクリック 2. 直したいことを書いて Send 3. ピンの色で進み具合がわかる 待機中 対応中 修正済み 4. キー操作にも対応 c 選択、 l 一覧、 s ステータス 1. Comment 127.0.0.1:53211/r/…/ 1 div.card 2 カード下の余白をもう少し広げたい ⌘/Ctrl + Enter to send Cancel Comment Send Comments 2 Status 4
5. browser-review — Point at it, say what is wrong, let your agent fix it ローカルの HTML ファイルも開発サーバーもそのままレビュー open に渡すのがファイルなら html-file 、 http://localhost の URL なら proxy で動きます。 html-file proxy 対象 ローカルの .html ファイル http://localhost:PORT/... オーバーレイ UI の入れ方 解析し、末尾に差し込んで配信 中継し、HTML にだけ差し込む ソースの手がかり 正確（全要素に行番号） フレームワーク次第 エージェントが編集できる範囲 そのファイル 1 つ プロジェクトディレクトリ配下 ライブリロード あり（ファイルを監視） 開発サーバーの HMR をそのまま通す 注意点 — 開発サーバーの CSP ヘッダーは外される どちらのモードでも、ディスク上のファイルは書き換えません。 5
6. browser-review — Point at it, say what is wrong, let your agent fix it ローカル server を経由してエージェントとやりとり ブラウザ ページ＋オーバーレイ UI Claude Code ・フック stdio MCP ↔ WebSocket 3 ↔ MCP 4 1 review server 127.0.0.1 ↕ 読み書き /browser-review:open ↔ 2 あなたのページ 開発サーバーか .html セッション $XDG_STATE_HOME で review server が起動 し、セッションが作られる 2 サーバーがページを中継し、HTML にオーバーレイ UI を差し込んで返す 1 の空きポート 中継して包む の JSON クリックしたコメントは WebSocket でサーバーに 届き、セッションに保存される 4 /browser-review:resolve でエージェントが MCP から受け取り、直すとピンが緑になる 3 6
7. browser-review — Point at it, say what is wrong, let your agent fix it エージェントは MCP ツールでコメントを受け取り修正を報告 コーディングエージェントは、MCP 経由でコメントを読み取ります。 ツール review_status review_wait review_list / review_get review_resolve review_ask review_dismiss review_screenshot 役割 セッションのモード、対象、編集範囲、待機中のコメント数 新しいコメントを最大 90 秒待つ。各コメントは 1 回だけ渡す 一覧と詳細（コメント、要素のマークアップ、手がかり） 修正済みにする。ピンが緑になり、要約が表示される ピンの吹き出しで質問する。回答は次の review_wait で届く コードを変えずに閉じ、理由をレビュアーに見せる ページか要素の PNG。Playwright があるときだけ使える どの要素を指しているかわからなければ、エージェントは推測せずに聞き返します。 7
8. browser-review — Point at it, say what is wrong, let your agent fix it 修正は別の Claude Code セッションに引き継げる browser-review のコメントは、リポジトリを開いた別の Claude Code にも渡せます。 Watch this browser-review session and fix the code for each comment that arrives. Work in the repository that owns the reviewed page. MCP server URL: http://127.0.0.1:53211/r/<token>/__br/mcp claude mcp add --transport http review 'http://127.0.0.1:53211/r/<token>/__br/mcp' ... 依頼文は、MCP URL 付きでオーバーレイ UI からコピーできます。 MCP を使わないエージェントやシェルスクリプトは、HTTP フィードを curl で読め ば同じコメントを受け取れます。 8
9. browser-review — Point at it, say what is wrong, let your agent fix it 確度の高い手がかりから順に修正箇所を特定 オーバーレイ UI が要素の手がかりを集め、ソースに近い順に並べます。 エージェントはその順に試し、最初に当たったところで止まります。 属性。html-file サーバーか Vite プラグインが付ける Svelte の __svelte_meta 、React の _debugSource 0.90 loc 0.80 component 要素を囲む React / Vue のコンポーネント階層 data-testid 、 data-cy 、 id など 0.70 data 要素にマッチするスタイルシートのルール 0.60 css 生成した CSS セレクター、表示テキスト、位置と大きさ 0.40 selector 0.95 loc loc data-review-src はファイルと行なので直接開けます。それより下は grep の手がかりです。 9
10. browser-review — Point at it, say what is wrong, let your agent fix it React 19 React 19 は Vite プラグインで行番号を補完 では _debugSource がなくなり、DOM から出どころをたどれません。 import browserReview from "@browser-review/vite-plugin"; export default defineConfig({ plugins: [browserReview(), react()], }); 要素に data-review-src を付け、確度 0.95 の手がかりにする コードは再生成しないので行番号がずれない。ビルドにも影響しない 入れなくても動く。そのときはセレクターなど確度の低い手がかりから探す JSX 10
11. browser-review — Point at it, say what is wrong, let your agent fix it ぜひ使ってみてください /plugin marketplace add kechol/browser-review /plugin install browser-review@browser-review CLI だけ使うなら次のどちらか npm install --global browser-review brew install kechol/tap/browser-review https://github.com/kechol/browser-review 11
12. browser-review — Point at it, say what is wrong, let your agent fix it ：コマンド早見表 Appendix 分類 コマンド Claude Code /browser-review:open / :resolve / :status / :close CLI browser-review open <file.html | URL> [--port] [--project-dir] [--json] browser-review status [--session] [--json] browser-review close [--session <id|latest>] browser-review mcp [--session <id|latest>] （stdio MCP） （SSE）/ POST /resolve / /ask / /dismiss HTTP GET /pending / GET /feed Vite npm install --save-dev @browser-review/vite-plugin 前提：Node.js 24 以上、macOS または Linux（Windows は非対応）。 は Anthropic とは無関係の独立したサードパーティ製ツールです。 「Claude」「Claude Code」は Anthropic PBC の商標で、対応先を示すためだけに使っています。 browser-review 12