AIWebHelper

Ein MCP-Server, bei dem Mensch und KI dasselbe Browserfenster sehen.
Der Mensch pickt die Stelle, die geändert werden soll; die KI liest denselben Bildschirm und klickt.

Warum

Der Mensch sieht auf den Bildschirm, die KI sieht in die Dateien. Verbindet man die Lücke mit Screenshots, beginnt man zu raten – und Raten liegt daneben. „Das hier bitte mal ändern“ – „Welche Stelle?“ – Screenshot – „Nicht die, sondern die darüber.“

Dieses Tool macht das Ping-Pong überflüssig. Wenn der Mensch per Alt+Klick pickt, bekommt die KI genau das:

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

Dass die Fensterbreite und das Maß des Abschneidens zusammenkommen, ist besonders wertvoll. Das Abschneiden erscheint und verschwindet je nach Breite: „Es ist abgeschnitten“ und „Es ist nicht abgeschnitten“ können beide zugleich wahr sein.

Related MCP server: Chromanche

Wie es funktioniert

Es sind zwei Hälften.

• Browser-Erweiterung (extension/) – ein- und ausgeschaltet über den Tool-Button oder Alt+Shift+P. Sie hängt nur an dem eingeschalteten Tab. Vor dem Einschalten greift sie auf keine Seite zu. Die Serveranfragen übernimmt die Erweiterung (bridge.js), weil es geeignet laufen kann, wenn die Seite selbst 127.0.0.1 aufruft – bei X beispielsweise, das connect-src festnagelt, endet ein Pick sonst nur mit „Failed to fetch“. Die Erweiterung stößt nicht an diese Wand und funktioniert dadurch überall gleich. (Ein Bookmarklet hat keine Brücke; dort ruft die Seite den Server direkt.)

• Hier (server.js) – nimmt die Picks über HTTP entgegen (127.0.0.1:47391) und reicht sie der KI um MCP-Werkzeuge weiter. Die Gegenrichtung geht durch dieselbe Tür: Was die KI erledigen will, holt sich die Seite über einen offengehaltenen Request. Statt alle 0,5 Sekunden zu klopfen, bleibt die Anfrage geöffnet; so bleibt es ruhig, selbst wenn die Seite den ganzen Tag in einer gebrauchten Ansicht läuft.

Das Projekt selbst wird dabei nicht eingepflanzt – das ist der Punkt. Würde das Tool dem Projekt folgen, müsste man es in jedes Projekt neu einbauen und hätte Angst davor, dass es in den Deploy gerät.

Das Pick-Einzelteil (extension/picker.js) existiert nur in einer Ausfertigung. Die Erweiterung legt diese Datei selbst in die Seite, und der Server liefert dieselbe Datei als /picker.js für das Bookmarklet aus. Zwei Eintrachtungen würden genau „im Bookmarklet geht's, in der Erweiterung nicht“-Probleme erzeugen.

Port

47391. Die 7000-/8000-/5000er-Bereiche sind voll mit Dev-Servern; irgendwann stößt man zusammen – und dann fließt der Pick leise zu dem zuerst geöffneten Nutzinteresse. Wenn sich die Tür nicht öffnen muss, wird diese Tatsache vor jede Werkzeug-Antwort geschrieben. Man kann mit AIWH_PORT wechseln; dann liefert /picker.js mit own gehörten Port aus geliefert.

Installieren

In ~/.claude.json (oder die Konfiguration deines MCP-Clients) schreibt:

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

Zum Portwechseln nimm "env": { "AIWH_PORT": "47391" }.

Erweiterung einbauen (einmalig)

1. In Chrome chrome://extensions öffnen

2. Rechts oben Entwicklermodus einschalten

3. Entpackte Erweiterung laden → das extension/-Verzeichnis dieses Repositories auswählen

Die Kommandozeilenoption --load-extension ist im neueren Chrome (137+) blockiert. Die drei Schritte oben sind der einzige Weg, und du brauchst ihn nur einmal machen. In Edge und Whale liegt derselbe Schalter an derselben Stelle.

Wenn du es als Bookmarklet nutzen willst, frag die KI nach «how_to_start» – sie reicht es dir aus. Das ist für Browser, bei denen man keine Erweiterung installieren kann.

Benutzung

1. Geh auf den zu ändernden Bildschirm (Produktion oder lokal)

2. Drück den Toolbutton oder Alt+Shift+P – im Badge erscheint ON

3. Schreibe einfach – das Werkzeug stört nicht. Die App läuft wie gewöhnlich

4. An der gewünschten Stelle Alt+Klick → ins eingebaute Eingabefeld auf dem Bildschirm schreiben, was du dir geändert hättest, Enter (oder leer lassen)

5. Die KI wartet mit wait_for_pick und übernimmt genau das

Wenn du es anschaltung lässt, seht man ab diesem Zeitpunkt dasselbe Fenster. Sagst du „Schau dir den Bildschirm an“, liest die KI ihn; sagst du „Klick mich hier“, klickt sie; und wenn die KI „Meinst du das da?“ meine will, zeigt sie es mit page_point statt einer Rückfrage.

Alt+P schaltet «Dauerhaft-Picken» (mehrere nacheinander), Esc schaltet aus, den Button erneut wieder wird sie deaktiviert.

Werkzeuge

Mensch → KI:

KI → Fenster, in der der Mensch schaut:

Gemeinsam ansehen – was man dazu wissen soll

page_* bewegt das echte Fenster, in dem der Mensch angemeldet ist. Was angeklickt wird, wird wirklich ge späten, wirklich gelöscht. Es gibt kein Undo. Die Bequemlichkeit ist genauso der Preis.

Der Schutzkreis hat drei Elemente:

• Es läuft nur im eingeschalteten Tab. Vor dem Einschalten greift es nirgendwo ein. Mit dem Esc oder dem Toolbutton beendet man es in diesem Moment. Das ON im Badge bedeutet, dass die Verbindung gerade besteht.

• Es öffnet nur 127.0.0.1. Von außen gibt es keinen Weg, dieses Fenster zu steuern.

• Wenn es unklar ist, klickt es nicht. Wenn dreimal „Speichern“ auf dem Bildschirm steht, wählt es nicht heimlich den ersten aus, sondern gibt die Liste zurück und lässt nth entscheiden. Eine Rückfrage kostet einen freien Austausch, ein falscher Wert ist aber unwiderruflich.

host_permissions ist weit gehalten, damit die Verbindung bleibt, auch wenn der eingeschaltene Tab die Seite wechselt. activeTab so verschwinden beim Seitenwechsel etwas – schon das Drücken eines Links hat die anwendbare Verbindung geknickt. Weil die Erweiterung so einfach wirkt, wartet die Tabliste der eingeschalteten Seiten ist das einzige Schutzdach, und es ist in tugend bright, das Werkzeug abzuschalten, wenn man es nicht braucht.

Regeln – von der Klasse zur Datei

In presets/*.json ist für jedes Projekt oder Häufungspräfix/ file location“ eingetragen. Die Auswahl erfolgt automatisch über die Adresse (match).

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

Achtung: Regeln sind unnötig. Element, Selektor, den Wrapper, das Abschneiden, die Fensterbreite – alles wandert mit; die Regeln sind ein Bonus.

Das hält uns länger als die React-Quellinfos (_debugSource). Die wurden in React 19 entfernt, außerdem werden in Production-Builds die Komponentennamen abgesperrt und wegkomprimiert. CSS-Klassen überleben den Build.

Was ich nicht gebaut habe

• Screenshot. Wenn man Text, Größe und das Maß des Abschneidens hat, braucht man ein Bild meist nicht; Bilder machen die Unterhaltung schwer.

• Einbau ins Projekt. Müsste man für jedes Projekt neu machen und parent sich in den Deploy.

• Electron-Hülle. Am Anfang habe ich so gemacht, aber dann bleibt ein Copy-Paste-Roundtrip durch den Menschen. Mit MCP bekommt es die KI direkt.

• Fernverbindung. Es öffnet nur 127.0.0.1. Es gibt keinen Grund, Picks aus fremden Browser zu akzeptieren.# AIWebHelper

Ein MCP-Server, auf dem Mensch und KI dasselbe Browserfenster betrachten.
Der Mensch pickt die zu ändernde Stelle; die KI liest denselben Bildschirm und klickt.

Warum

Der Mensch sieht den Bildschirm, die KI sieht die Dateien. Wenn man die Lücke mit Screenshots überbrückt, fängt man an, übereinander zu raten – und Raten ist daneben. „Das hier bitte mal ändern“ – „Welche Stelle?“ – Screenshot – „Nicht die, sondern eine darüber.“

Dieses Werkzeug macht diesen Ping-Pong überflüssig. Wenn der Mensch per Alt+Klick pickt, bekommt die KI genau das hier:

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

Dass die Fensterbreite und das Ausmaß des Abschneidens mitkommen, ist besonders wertvoll. Das Abschneiden tritt je nach Breite auf und verschwindet wieder: „Es ist abgeschnitten“ und „Es ist nicht abgeschnitten“ können beide zugleich wahr sein.

Wie es funktioniert

Es sind zwei Hälften.

• Browser-Erweiterung (extension/) – eingeschaltet über den Toolbar-Button oder Alt+Shift+P. Sie hängt nur am aktivierten Tab. Vor dem Einschalten greift sie auf keine Seite zugreift. Den Server ruft die Erweiterung auf (bridge.js), nicht die Seite. Denn wenn die Seite selbst 127.0.0.1 anruft, kann die Website das blocken – bei X etwa ist connect-src so eng gesetzt, dass ein Pick sonst nur mit „Failed to fetch“ endet. Die Erweiterung stößt nicht auf diese Mauer und läuft damit überall gleich. (Ein Bookmarklet hat keine Brücke; in diesem Fall ruft die Seite direkt auf.)

• Das hier (server.js) – nimmt Picks über HTTP entgegen (127.0.0.1:47391) und reicht sie der KI als MCP-Werkzeuge aus. Die Gegenrichtung läuft durch dieselbe Tür: Was die KI zu erledigen wünscht, holt sich die Seite über einen offen gehaltenen Request. Statt alle 0,5 Sekunden anzuklopfen, bleibt der Request offen – so bleibt es still, auch wenn die Seite den ganzen Tag benutzt.

Nicht in das Projekt eingepflanzt zu sein, ist gerade der Punkt. Wenn das Werkzeug dem Projekt folgen würde, müsste man es für jedes Projekt neu einpflanzen und sich um das Produkt und den Deploy verkaufen.

Die Picker-Einheit (extension/picker.js) gibt genau einmal. Die Erweiterung fügt diese Datei ein, und der Server liefert dieselbe Datei als /picker.js aus (für das Bookmarklet). Würdest du beide parallele Dateien führst, entstehen „als in the Bookmarklet geht, in der Erweiterung nicht“-Fälle.

Port

47391. Die 7000-, 8000- und 5000er-Bereiche nutzen viele Dev-Server; irgendwann passen sie sich zusammen. Wichtigste! Dann fliegt der Pick gedacht zu der Einheit, die zuerst geöffnet wurde. Deshalb: Lässt sich die Tür nicht öffnen, steht genau das in jeder Antwort – und Wort als Hinweise. Verschieben lässt sich der Port über AIWH_PORT – dann liefert /picker.js mit eingebauter eigener Port aus.

Installation

In ~/.claude.json (oder der Konfiguration des MCP-Clients, den du benutzt):

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

Um den Port zu ändern: "env": { "AIWH_PORT": "47391" }.

Extension einrichten (einmalig)

1. In Chrome chrome://extensions öffnen

2. Oben rechts Entwicklermodus einschalten

3. Entpackte Erweiterung laden → den Ordner extension/ dieses Repos auswählen

Die Kommandozeilenoption --load-extension ist in neuerem Chrome (137+) blockiert. Diese drei Schritte sind der einzige Weg, und nach einem einz langen. Edge und Whale haben die Auswahl an derselben Stelle.

Wenn du es als Bookmarklet nutzen möchtest, fragst du die KI mit «how_to_start» – das bekommst du dann. Für Browser, die sich nicht verlassen kann.

Benutzung

1. Geh zu dem zu ersetzenden Screen (Produktion oder lokal)

2. Drück den Toolbar-Button oder Alt+Shift+P – im Badge steht ON

3. Einfach weiter 코사용 – das Werkzeug stört nicht. Die App läuft normal weiter

4. Alt+Klick auf die zu ändernde Stelle → ins Eingabefeld im Bildschirm schreiben, was geändert werden soll; Enter (auch leer lassen)

5. Die KI wartet mit wait_for_pick auf das und bekommt dann

Läuft es einmal, sieht man danach denselben Fenster zu. „Schau dir diesen Bildschirm an“ – danndir liest ihn die KI, „Drück hier“ – drückt die KI. Und wenn die KI „Meinten Sie das?“ fragt, zeigt sie es nicht verbal, sondern zu einer page_point.

Alt+P schaltet «Dauerpick» (wenn mehrere Stände nacheinander gepickt werden), Esc aus, oder den Button wieder drücken.

Werkzeuge

Mensch → KI:

KI → das Fenster, das der Mensch sieht:

Zusammen sehen – Wissenswertes

page_* bewegt das echte Fenster, in dem der Mensch angemeldet ist. Ein Klick wird: wirklich gescht spoken, wirklich gelöscht zwischen. Nicht mehr rückgängig zu machen. Die Bequemlichkeit um den Preis.

Es gibt drei Zäune:

• Es läuft im aktiven Tab nur. Vor dem Einschalten greift das Werkzeug auf keine Seite zurück. Schaltest du mit Esc oder dem Toolbutton ab, wird die Verbindung an der Stelle abgeschnitten. Das ON im Badge weißt, dass sie noch verbunden ist.

• Es öffnet sich nur auf 127.0.0.1. Von außen gibt es keinen Weg, zwischen so sicher:

• Im Zweifel wird nicht geklickt. Wenn ein “Speichern” auf dem Bildschirm dreimal gibt, wählt sie nicht stillschritst. Das Array: der Liste weiter, den sie zurückgibt, und nth entscheidet. Ihre Wolle passt sich er, eine falsche ohne Rückfrage nicht.

host_permissions ist so breit, damit die Verbindung erhalten bleibt, auch wenn derwonkte Tab die Seite wechselt. activeTab würde beim SeitПереход verschwinden, und selbst ein Klick auf einener Link den Aufbau bricht. Umso breiter der Bereich, die Liste der aktiven Tabs ist der einzige Zaun – also aus besser: solange man es nicht benutzt, es ausschalten.

Regeln – Von der Klasse zur Datei

In presets/*.json wird pro Projekt eine «Klassenprefix → Dateipfad» abgelegt. Die Auswahl wird automatisch über die Adresse geprüft (match).

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

Regeln braucht es nicht. Elemente, Selektoren, eigene Container, Inhalt /abgeschnitten, Fensterbreite – Alles wird ausgeben, vieles Gute oder nicht.

Regeln bezahlen ist nur ein Bonus.

Diese Methode ist langlebiger als Reacts Quell-Information (_debugSource): Die hat in React 19 ohnehin fehlt, und im Production-Build werden Komponentennummern komprimiert. CSS-Klassen besitzen den Build überstehen.

Was fehlt

• Screenshots. Mit Text, Gr Go and Ausmaße des Abschneidens braucht man meist kein Bild; Bilder machen den Dialog dann.

• Im App auf ebenso.

• Electron-Schalen. Es war zunächst so gemacht, aber dann bleibt bei der Mensch einen Copy-Paste-Fluss. Mit MCP bekommt die KI das Direkt.

• Remoteverbindung. Öffnet nur für 127.0.0.1. Für Picks aus fremden Browser gibt es ziemlich keinen Anlass.