AIWebHelper

MCP-сервер, где человек и ИИ смотрят в одно окно браузера. Человек указывает место, которое нужно поправить, а ИИ читает тот же самый экран и нажимает.

Зачем

Человек смотрит на экран, ИИ — в файлы. Если соединять это скриншотами, приходится догадываться, а догадки ошибочны. «Вот тут поправь» — «Где именно?» — скриншот — «Не там, а выше».

Этот инструмент убирает такой обмен. Как только человек делает Alt+клик, ИИ получает вот что:

  하고 싶은 말: 이 합계 글씨가 너무 작아요
  글자: 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, сайт может это заблокировать — например, там, где жёстко прописан connect-src, как на X, даже указание закончится ошибкой «Failed to fetch». Расширение обходит эту стену, поэтому работает одинаково везде (у букмарклета моста нет, поэтому там страница вызывает сервер напрямую).

• Вот здесь (server.js) — принимает указание по HTTP и хранит его(127.0.0.1:47391?), а ИИ получает его как MCP-инструмент. В обратную сторону ходит та же дверь: ИИ оставляет поручение, а страница забирает его через открытый запрос. Не опрашивает каждые 0,5 секунды, поэтому в живой странице, где человек работает весь день, всё тихо.

Встраивать в проект не нужно. Если бы инструмент жил внутри проекта, его пришлось бы подключать заново в каждый проект и переживать, что он попадёт в дистрибутив.

Механика выбора(extension/picker.js) — в одном экземпляре. Расширение подставляет этот файл, и сервер отдает такой же по адресу /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://extensions в Chrome.

2. В правом верхнем углу включите Режим разработчика.

3. Нажмите Загрузить распакованное расширение → выберите папку extension/ этого репозитория.

Командная строка --load-extension в Chrome 137+ больше не работает. Эти три шага — единственный путь, и их достаточно выполнить один раз. В Edge и Whale оно находится там же.

Если нужен букмарклет, спросите у ИИ «how_to_start» — он выдаст его. Это для браузеров, где расширение установить нельзя.

Использование

1. Откройте нужную страницу (продакшн или локально).

2. Нажмите кнопку инструмента или Alt+Shift+P — на значке появится ON.

3. Просто работайте — инструмент не мешает. Приложение ведёт себя как обычно.

4. В нужном месте сделайте Alt+клик → в появившемся поле напишите, что исправить, и нажмите Enter (можно оставить пустым).

5. ИИ ждёт через wait_for_pick и получает это именно в таком виде.

Когда вы это сделали, дальше вы смотрите в одно окно вместе. «Посмотри на этот экран» — ИИ читает, «нажми сюда» — нажимает. ИИ, если сомневается, вместо слов «Это вы имели в виду?» показывает page_point — отмечает выбор на экране.

Alt+P — «длительное выделение» (когда нужно указать несколько подряд), Esc — выключить, кнопка выкл.

Инструменты

Человек → ИИ:

ИИ → в то окно, которое видит человек:

Совместный просмотр — что учитывать

page_* взаимодействует с реальным окном, в котором залогирован пользователь. Нажал — реально сохранил, отправил, стер. Отката нет. Насколько удобно — настолько и стоит.

Есть три ограничения.

• Работает только на включенной вкладке. До включения не входит ни на одну страницу. При выключении через Esc или кнопку — соединение обрывается на месте. Индикатор ON на значке означает, что соединение активно.

• Слушается только 127.0.0.1. Снаружи вмешаться в это окно невозможно.

• Если ситуация неоднозначная — не кликать. На экране, где есть три одинаковые кнопки «Сохранить», не выбирает молча первую, а возвращает список и даёт выбрать через nth. Один лишний вопрос — это одно лишнее действие, а ошибка уже неверна.

Широкие host_permissions нужны вследствие того, чтобы канал оставался живым, даже когда вкладка переходит на другую стра. activeTab исчезает при смене страницы: если включено, достаточно одного перехода по ссылке, чтобы связь оборвалась. Именно поэтому при широких правах единственная реальная граница — это список открытых вкладок, так что стоит выключить его, когда он не нужен.

Правила — по классу CSS в файлы

В presets/*.json у каждого проекта можно записать соответствие «префикс класса → путь к файлу. Оно выбирается по адресу страницы (match`).

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

Правила не обязательны. Элемент, селектор, содержащий текст, обрезание и ширину окна — всё это приходит в таком же виде. Правила — бонус.

Этот подход живёт дольше, чем информация из исходников React (_debugSource). Та в React 19 убрана, и в продакшен-сборках имена компонентов сжаты и теряются. классы CSS в собранном коде остаются.

Что не сделано

• Скриншоты. Внимание, текст, размеры, обрезание — этого обычно достаточно, а картинка делает сообщение тяжелее.

• Встраивание в приложение. Пришлось бы в каждом проекте подключать заново, а также беспокоиться, что это попадёт в релиз.

• Электронная оболочка. Сначала было так, но остаётся ручной обмен через копирование и вставку. MCP-интерфейс отдаёт данные сразу.

• Удалённый доступ. Слушается только 127.0.0.1; принимать указания из чужого браузера не для чего.