AIWebHelper

An MCP server where a human and an AI share one browser window. The human points at what to fix; the AI sees the same screen and clicks.

Why

The human sees the screen; the AI sees the files. Bridge them with screenshots and both sides start guessing — and guessing is wrong. “fix this part” — “which part?” — screenshot — “not there, the one above.”

This tool removes that round trip. When the human points with Alt+click, the AI receives this:

  하고 싶은 말: 이 합계 글씨가 너무 작아요
  글자: 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)

The really valuable part is that the window width arrives together with the clipped amount. Clipping appears and disappears depending on the width, so “it’s clipped” and “it’s not clipped” can both be the truth — and that really happens.

Related MCP server: Chromanche

How it works

It comes in two pieces:

• A browser extension (extension/) — turned on with the toolbar button or Alt+Shift+P. It attaches only to the tab where it was switched on. Before you switch it on, it does not enter any page. The calls to a server are done by the extension on the page’s behalf (bridge.js). Skips 127.0.0.1 from page itself; a site can block it — on sites that pin connect-src, like X, a choice just dies with “Failed to fetch”. The extension doesn’t hit that wall, so it behaves the same anywhere. (A bookmarklet has no bridge, so then the page has to call directly.)

• The server here (server.js) — receives picks http on a port, holds them, and serves it via the MCP tool to the AI. The route works in the opposite direction too: commands left by the AI are given to the page as request held open. Instead of polling every 0.5 seconds, the page keeps on long-open request, which stays quiet even if it is open all day on a page that someone is using.

The point is not to walk inside the project. If the tool were a part of a project, you would have to embed into each project again, and you would have to worry about it mixing into a build.

The past picker (extension/picker.js) is one copy. The extension injects that file, and the server serves the same file as /picker.js (for the bookmarklet). Two elements would cause “works in the bookmarklet but not in the extension,” everything gone hard to solve.

Port

47391. The 7000, 8000, and 5000 ports are too busy with dev servers, so loss is only a matter of time — and when there are just two, picks quietly go to whichever side opened the door first. That is why, if the door cannot be opened, that your fact is written at the heading of every tool response. You can move to with AIWH_PORT; when you do, /picker.js is served baked with its own listening port.

Adding

In ~/.claude.json (or config of the MCP client you’re using):

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

To change the port, do "env": { "AIWH_PORT": "47391" }.

Installing the extension (first once)

1. Open chrome://extensions in Chrome

2. Turn on Developer mode in the upper right

3. Choose Load unpacked → select the extension/ folder of this repo

--load-extension command line option is blocked in recent Chrome (137+). The three steps above are the only way, and only once. Edge and Whale have the same in the same place.

To use as bookmarklet instead, ask the AI for how_to_start — good for browsers where an extension cannot be installed.

Usage

1. Go to the screen that you are going to fix (production or local).

2. Press the toolbar button or Alt+Shift+P — a badge shows ON.

3. Keep using nothing else. It does not interrupt; the app runs as normal.

4. Alt+click on the place to fix — in the entered input type what should be change, hit Enter (you can leave it empty).

5. The AI waits with wait_for_pick, and receives it in that form.

While it is on, from that moment, you are sharing one window. If you say "look at this screen", the AI reads it; if you say "click here", it clicks. The AI can also demonstrate “do you mean this one” by highlighting the pick with page_point instead of saying.

Alt+P toggles continuous picking (for a run of picks), Esc disables it, and clicking the button again turns it off.

Tools

Human → AI:

AI → human–read window:

What to know before using

The page_* tools operate the real human window where the person is logged in. A click can really save, really compose, and really delete. It is not reversible. That is exactly the value: as convenient at the present that it is competing — it is no longer a free try.

There are three fences:

1. Only in the tab you switched on. It does not enter any page before turning on. Press Esc or the toolbar button — it breaks right there. Badge shows ON you are connected at the moment.

2. Opens only to 127.0.0.1. From outside there is no path to this window.

3. If the cage is cloudy, don’t click. On a screen with three “Save” buttons, not it will not silently choose the first save; it returns the list and lets you decide by nth. Asking back costs one extra round trip; getting it wrong the other way can’t be undone.

The host_permissions are broad because the connection held while the on-tab navigates to a different page. activeTab disappears when the view navigates, so even a link passed to the background after switching once is cut off. With that broad scope, the currently-on tab list is the only fence, so it is better to let it off when you don’t need it.

Rules — from classes to file

Each line in presets/*.json maps and project class prefix → file. It selects by URL (match).

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

Rules are optional. The displayed element, selector, snapshot, clipping and window size all come over as they are — rules are the bonus.

This way outlives React’s source metadata (_debugSource). It is removed in React 19 and production builds have component names compressed away. CSS classes carry through the build.

Not included

• Screenshot capture. With text, geometry, and the clipping, a picture is usually not needed, and pictures make dialogue heavy.

• Embedding inside the app. — you have to re-embed per project and worry about deployment.

• Being an Electron shell. — an earlier version was built that way, but that would bring a screenshot–copy–paste round trip; via MCP the AI just receives the pick directly.

• Remote connection. Unique to 127.0.0.1 — no reason other browsers obtain the pick.