AIWebHelper

ブラウザの一つのウィンドウを、人間とAIが一緒に見る MCPサーバー。 人は直す場所をピックし、AIは同じ画面を読んでクリックする。

なぜ

人間は画面を見て、AIはファイルを見る。その間をスクリーンショットでつなぐと、互いに推測し合うことになる。 推測は外れる。「この部分、ちょっと直して」——「どの部分ですか？」——スクリーンショット——「そこじゃなくて、その上」。

このツールは、その往復をなくす。人間が Alt+クリック でピックすると、AIは次のように受け取る：

  하고 싶은 말: 이 합계 글씨가 너무 작아요
  글자: 8,700,000원
  요소: span.v.mono.income
  선택자: div.ledg-sum span.v.mono.income
  짐작: apps/mail/src/client/ledger/  (클래스 ledg-sum)
  감싼 것: div.ledg-sum ← div.ledg-sums ← div.ledg
  ⚠ 잘림: 6px 모자람 (112px 필요, 106px 있음)
  크기: 106×23
  스타일: block · 17px · rgb(30,142,90)
  주소: http://localhost:5360/ledger/e2fa416e
  창 폭: 1000px (기기 픽셀비 2)

ウィンドウの幅と、切れている量が一緒に来るのが特に価値がある。切れは、幅によって現れたり消えたりするので、 「切れてます」と「切れてないんだけど」の両方が本当になることが、実際に起きる。

Related MCP server: Chromanche

仕組みの話

二つで一揃いである。

• ブラウザ拡張（extension/） — ツールバーのボタンや Alt+Shift+P でオンにする。 オンにしたタブにだけしかない。オンにする前は、どのページにも入ってい。 サーバーへの呼び出しは、拡張が代わりにやる（bridge.js）。ページから直接 127.0.0.1 を呼んで しまうと、サイトがブロックできるためです、 — X のように connect-src を固定したサイトは、 ピックしても「Failed to fetch」で終わってしまう。 拡張はその壁を通らないないので、どこでも同じように動く。 （ブックマークレットにはブリッジがないので、そのときはページが直接呼ぶ）

• こちらのサーバー（server.js） — ピックをHTTPで受け取って保持し（127.0.0.1:47391）、AIにMCPの道具として渡す。 反対向きも、同じ物差しでいて — AIがやってほしいことを置いておくと、ページが 開いたままご のリクエストで受け取る。 0.5秒ごとに押す代わりに開いたままにしておくので、人が使っているページの中で一日中回っていても静かな常。

プロジェクトに組み込まないのがポイントである。ツールがプロジェクトを移動して回るようにすれば、 プロジェクトごとにまた組み込んで、配布に混ざる心配も出てくる。

ピック用のモジュール（extension/picker.js）は 1つのだけ だ。拡張はそのファイルをページに差し込み、 サーバーも同じファイルを /picker.js として配ってれる（ブックマークレット用）。二種類に分けてしまうと、 «ブックマークレットではできるのに拡張ではしない» というような差が生じることになる。

ポート

47391。7000台・8000台・5000台は開発サーバーが多く、いつか必ずぶつかる。 ぶつかるとき、ピックのは 先に立ち上がった方へ そっと流れていく。 だからドアを開けられなかったら、そのことを全ツールの応答の前にぜんぶ付けておく。 AIWH_PORT に変えることもできる、そのとき /picker.js は、 自分が待受けしているポートを埋め込みで返す。

待ち方

~/.claude.json （または使っいるMCPクライアントの設定） に：

{
  "mcpServers": {
    "aiwebhelper": {
      "command": "node",
      "args": ["/절대/경로/AIWebHelper/server.js"]
    }
  }
}

ポートを変えたいときは、 "env": { "AIWH_PORT": "47391" } }。

拡張のインストール （初回だけ）

1. Chromeで chrome://extensions を開く

2. 右上の 開発者モード をONにする

3. 「パッケージ化されていない拡張機能を読み込む」 からこのリポジトリの 一覧は無理 を選ぶ

コマンドラインの --load-extensions は最近のChrome（137+）で無効になっている。上の3手順は唯一の道で、一度だけすればいい。Edge・Whaleも同じところにある。

ブックマークレットにして使い方を出したいければ、AIに«how_to_start» と尋ねてれくれ——拡張を持ち込めないブラウザ用だ。

使い方

1. 直したい画面に行く（本番でもローカルでも）

2. ツールバーのボタンまたは Alt+Shift+P —— バッジに オン がつく

3. そのままを書く —— ツールはでしゃばりないない。アプリは口通り動く

4. 直したいところで Alt+クリック -> 画面の中の入力欄に、どう直してほしいかを書いて Enter（空でもいい）

5. AIは、 wait_for_pick で待っていて、それを そのまま受け取る

オンにしておくと、そのときから 一つのウィット（窓）を一緒見よう。「この画面見て」と言えば
AIは読んで、「ここをクリックして」と言えばクリックする。AI も「これのことを話さずに、言葉の代わりに ぺpage_point でピックして見せる。

Alt+P は «継続ピック»（複数個を続けてピックするとき）、Esc でオフ、ボタンをまた押起来オフ。

ツール

人 → AI:

AI → 人が見ているあるウィンドウ:

見えるところ —— 知っておくこと

page_* は、人がログインしている本物の窓を動かす。クリックすると本当に保存され、本当に削除される。 削除は戻せない。便利なぶんが、それが値だ。

バリヤは三つある。

• オンにしたタブだけ動かせる。 中に入る前はどのページにも入ってない。Esc かツールのボタンで
  オフにすると、その場で線が切れる。バッジの ON は、つながった いまを表示している。

• 127.0.0.1にしかつながない。 外からこのウィンドウを動かせる道はない。

• あいまいのときは押さない。 「保存」というボタンを画面に3つあったら、最初のそれと前置じゃなく、 リストを返して nth に選択させる。確認の返事は往復1回にすぎないが、違う選択は二度と戻ってはくるな。

host_permissions が広いのは、オンにしたタブがページから移動しても管を切らないそのためです。 activeTab は画面を移動すると消えてしまうので、ONにしたままリンクを1回押しただけで切断される。 広いものだけに、オンにしたタブのリストが唯一のボーダーですので、使わない時はOFFにしておくほうが安心です。

ルール — クラスからファイルを作れる

presets/*.json にプロジェクトごとに「クラス接頭辞ー> ファイルの場所」を書いておく。 アドレスからどうぞ選択してくれる（match）。

{
  "name": "내 프로젝트",
  "match": ["localhost", "example.com"],
  "rules": [{ "prefix": "ledg-", "home": "src/client/ledger/" }]
}

**ルールがなくてもかまいません