AIWebHelper

Servidor MCP para una misma ventana del navegador compartido entre una persona y una IA. La persona señala el lugar que hay que arreglar, y la IA lee esa misma pantalla y hace clic.

Por qué

La persona ve la pantalla, la IA ve los archivos. Si se conecta uno con otro mediante capturas de pantalla, ambos empiezan a adivinar, y adivinar es fallar. «Arregla esta parte» — «¿Cuál?» — captura — «No ahí, más arriba».

Esta herramienta elimina ese ir y venir. Cuando la persona señala con Alt+clic, la IA recibe esto:

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

Que vengan juntos el ancho de la ventana y lo recortado es especialmente valioso. El recorte aparece y desaparece según el ancho, así que «está recortado» y «no está recortado» llegan a ser ciertos a la vez.

Related MCP server: Chromanche

Cómo funciona

Son dos piezas.

• Extensión del navegador (extension/) — se enciende con el botón de la herramienta o con Alt+Shift+P. Solo se acopla a la pestaña que está encendida. Antes de encenderla no entra en ninguna página. Quién llama al servidor es la propia extensión (bridge.js). Si la página llamara directamente a 127.0.0.1, el sitio podría bloquearla; en un sitio con connect-src clavado, como X, aunque señales acabas en «Failed to fetch». La extensión no choca con esa pared y funciona igual en todas partes. (El bookmarklet no tiene puente, así que ahí quien llama es la página.)

• Aquí (server.js) — recoge los señalamient por HTTP (127.0.0.1:47391) y los entrega a la IA como herramientas MCP. La dirección de vuelta atraviesa la misma puerta, cuando la IA deja algo pendiente, la página lo recoge como una solicitud abierta. En lugar de preguntar cada 0,5 segundos, mantiene la solicitud abierta, así que puede estar todo el día dentro de la página del usuario, sin ruido.

El punto es no incrustarla en el proyecto. Si la herramienta viajara con el proyecto, habría que volver a instalarla en cada proyecto y acabaría mezclada con el despliegue.

El fragmento de selección (extension/picker.js) es una única copia. La extensión lo inyecta, y el servidor sirve el mismo archivo como /picker.js (el del bookmarklet). Si hubiera dos copias, pasarían cosas del tipo «con el bookmarklet funciona, con la extensión no».

Puerto

Es el 47391. Los rangos 7000, 8000 y 5000 están llenos de servidores de desarrollo, así que tarde o temprano chocan; cuando chocan, el señalamiento viaja en silencio al que se levantó antes. Por eso, si no se puede abrir la puerta, se antepone ese dato a todas las herramientas. Se puede mover con AIWH_PORT, y entonces /picker.js se sirve con el puerto en el que escucha incrustado.

Añadirlo al cliente

En ~/.claude.json o en la configuración del cliente MCP que uses:

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

Para cambiar el puerto, usa "env": { "AIWH_PORT": "47391" }.

Cargar la extensión (solo la primera vez)

1. Abre chrome://extensions en Chrome.

2. Activa el Modo de desarrollador, arriba a la derecha.

3. Haz clic en Cargar extensión descomprimida → elige la carpeta extension/ de este repositorio.

La opción --load-extension en la línea de comandos está bloqueada en Chrome reciente (137+). Los tres pasos anteriores son el único camino, y solo hay que hacerlos una vez. Edge la extensión y las mismas opciones en el mismo lugar.

Si quieres usarlo como bookmarklet, pregúntale a la IA por «how_to_start» y te la da, es para navegadores donde no se puede cargar la extensión.

Cómo usarla

1. Ve a la pantalla que quiere arreglar (da igual si es producción o lo local).

2. Pulsa el botón de la herramienta o Alt+Shift+P: aparece ON en la insignia.

3. Úsala con naturalidad — la herramienta no molesta. La app funciona como siempre.

4. En el lugar que quieras arreglar, haz Alt+clic → escribe en el campo de la pantalla lo que se quiere restaurar y pulsa Enter (puedes dejarlo vacío).

5. La IA espera con wait_for_pick y lo recibe igual.

Si dejas que siempre encendida, desde entonces miráis la misma ventana. Si le dices «mira esta pantalla», la IA la lee; si le dices «haz clic aquí», hace clic. La IA también puede responder «¿te refieres a esto?» en lugar de escribir, señalándolo con page_point.

Alt+P activa «selección continua» (para señalar varias cosas seguidas), Esc la apaga, y volver a pulsar el botón también la apaga.

Herramientas

Persona → IA:

IA → la ventana que está viendo la persona:

Para saber antes de usar

La IA mueve la ventana real en la que la persona tiene iniciada sesión. Si se pulsan las opciones realmente se guardan, se modifican y se abren los datos de verdad. No se puede deshacer. Eso es tan incómodo como el valor que tiene.

Hay tres vallas:

• Solo en la pestaña encendida. Antes de encenderla no se toca ninguna página. Al apagar con Esc o con el botón, la herramienta se desconecta en ese momento. El ON de la insignia es señal de que en ese momento está conectada.

• Solo deja escuchar a 127.0.0.1. No hay forma de que nadie desde fuera pueda mover esa ventana.

• Si hay ambigüedad, no se pulsa. En una pantalla con tres «Guardar», no se elige la primera a escondidas: se devuelve la lista y que se confirme con nth. Volver a preguntar cuesta un mensaje de ida y vuelta; elegir mal no tiene vuelta atrás.

Los permisos de host_permissions son amplios porque sirven para mantener el hilo cuando la pestaña activa cambia de página. activeTab desaparece al navegar a otra pantalla; con la herramienta encendida y un solo clic en un enlace, la conexión se rompe. Por eso ampliar permisos hace que la lista de pestañas encendidas sea la única valla, así que más vale apagarla cuando no la estás usando.

Reglas — pasar de clase a archivo

En presets/*.json se guarda por proyecto el mapa «prefijo de clase → ruta de archivo». La selección se hace por URL y de forma automática con match.

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

No hace falta ninguna regla: el elemento, el selector, la envoltura, el recorte y el ancho de la ventana salen igual; la regla es solo un extra.

Esta forma dura más que la información de fuente de React (_debugSource). Esa desaparece en React 19 y, en los builds de producción, incluso los nombres de componentes se comprimen. Las clases CSS se quedan aunque pase el build.

Lo que no se incluye

• Captura de pantalla. Con texto, tamaño y recorte, casi nunca hace falta imagen; además, una imagen carga la conversación.

• Integración en la aplicación. Habría que instalarla de nuevo en cada proyecto, y se evolucionará en el despliegue.

• Envoltorio de Electron. Al principio se hizo así, pero deja clásica el vaivén de copiar y pegar al humano. Si tieneMCP, la IA lo recibe directamente.

• Acceso remoto. Solo se escucha en 127.0.0.1. No hay razón para aceptar señales desde el navegador de alguien.