GUI2MCP

Convierte software heredado que solo funciona en el navegador en herramientas que la IA puede llamar.

Mira la demo de 27 segundos (MP4)

Consulta la presentación de GUI2MCP en Canva

GUI heredada -> GUI2MCP -> servidor MCP generado -> Codex lo usa como una API nativa

El problema

Las empresas siguen dependiendo de software interno y heredado que no tiene una API utilizable. Los humanos pueden buscar registros, crear clientes y enviar facturas a través de un navegador, pero los agentes de IA no pueden acceder a esas capacidades sin razonar sobre toda la interfaz en cada ejecución.

Reconstruir el software del proveedor es caro. Escribir y mantener scripts de automatización puntuales no escala.

La idea clave

La GUI ya es una descripción legible por máquina de lo que el software puede hacer.

GUI2MCP observa esa interfaz, descubre acciones útiles, las compila en herramientas MCP tipadas e implementa cada llamada operando la GUI original con Playwright.

Para el CRM sin API incluido, GUI2MCP genera:

search_customer(customer_name)
create_customer(name, email, company)
create_invoice(customer, amount_jpy, description)

Codex ya no necesita buscar menús, inspeccionar el DOM ni decidir qué botón pulsar. Llama a una única herramienta de nivel de dominio:

{
  "name": "create_invoice",
  "arguments": {
    "customer": "Aiko Tanaka",
    "amount_jpy": 120000,
    "description": "AI integration workshop"
  }
}

GUI2MCP abre la pantalla real de factura, rellena los campos, envía el formulario, verifica el resultado visible y devuelve INV-0001 con una captura de pantalla.

¿Por qué no llamar a Playwright directamente?

Playwright es el actuador. GUI2MCP es el compilador de interfaces.

Para una tarea puntual, usar Playwright directamente es suficiente. GUI2MCP está pensado para operaciones recurrentes que deben convertirse en reutilizables, revisables y disponibles para todos los clientes MCP.

Cómo funciona

flowchart LR
    A[Legacy web GUI<br/>No JSON API] -->|Observe DOM and forms| B[GUI Inspector]
    B -->|Compile labels, fields, actions| C[generated/tools.json]
    C --> D[Generic STDIO<br/>MCP server]
    D -->|tools/list and tools/call| E[Codex]
    E -->|Typed business action| D
    D -->|Replay through Playwright| A
    A -->|Visible result + evidence| D

1. Observar: Playwright recorre un conjunto acotado de páginas del mismo origen.

2. Comprender: Se extraen títulos, etiquetas, campos obligatorios, tipos de entrada, opciones y acciones de envío.

3. Compilar: Las acciones de la GUI se convierten en nombres MCP, descripciones, JSON Schema y anotaciones de seguridad.

4. Ejecutar: El entorno de ejecución MCP genérico carga la especificación generada y reproduce las llamadas a través de la GUI.

5. Verificar: Las alertas visibles y las tablas de resultados se devuelven como salida estructurada, junto con una captura de pantalla.

El entorno de ejecución MCP generado no contiene controladores específicos del CRM. Su comportamiento proviene de generated/tools.json.

Demo de 90 segundos para el jurado

1. Abre el CRM heredado y señala que solo expone páginas de navegador.

2. Abre GUI2MCP Studio y haz clic en Discover tools.

3. Muestra las tres herramientas generadas y sus parámetros tipados.

4. Pregunta a Codex:

   Busca el cliente Acme y crea una factura de 120 000 JPY para un taller de integración de IA.

5. Codex llama a search_customer y después a create_invoice.

6. Abre el registro de facturas del CRM y muestra INV-0001 creado a través de la GUI original.

La demo usa deliberadamente orígenes separados:

• Plano de control de GUI2MCP: http://127.0.0.1:4310

• Destino heredado sin modificar: http://127.0.0.1:4311/legacy

• http://127.0.0.1:4311/api/health devuelve 404

Los endpoints JSON del puerto 4310 pertenecen a GUI2MCP Studio, no a la aplicación heredada.

Ejecución local

Requisitos previos: Node.js 20+ y pnpm.

corepack pnpm install
corepack pnpm exec playwright install chromium
corepack pnpm dev

Abre:

• GUI2MCP Studio: http://127.0.0.1:4310

• CRM heredado: http://127.0.0.1:4311/legacy

En Studio, haz clic en Discover tools, selecciona cualquier tarjeta de herramienta generada, proporciona argumentos y elige Run via Playwright.

El Studio admite inglés y japonés desde el control EN / JP en la esquina superior derecha.

Conectar Codex

Primero genera la especificación de herramientas en Studio. Mantén el Studio y el destino heredado en ejecución y, a continuación, compila y registra el servidor STDIO:

corepack pnpm build
codex mcp add gui2mcp -- node "C:\absolute\path\to\GUI2MCP\dist\src\mcp.js"
codex mcp list

Reinicia Codex y pregúntale:

Search for the Acme customer, then create a JPY 120,000 invoice
for an AI integration workshop.

La configuración a nivel de proyecto también está disponible en .codex/config.toml.example.

Flujo de trabajo con CLI

Con los servidores de demo en ejecución:

corepack pnpm discover -- --url http://127.0.0.1:4311/legacy
corepack pnpm mcp

Variables de entorno útiles:

• GUI2MCP_SPEC: carga otra especificación de herramientas generada.

• GUI2MCP_HEADFUL=1: muestra el navegador mientras se ejecuta una herramienta MCP.

• PORT: cambia el puerto de GUI2MCP Studio.

• LEGACY_PORT: cambia el puerto del destino de la demo.

Aspectos técnicos destacados

• tools/list MCP dinámico generado al arrancar el servidor

• JSON Schema inferido de los controles reales del formulario

• Anotaciones de seguridad MCP como readOnlyHint e idempotentHint

• Resolución de campos priorizando la etiqueta, con respaldo por nombre e ID

• Extracción estructurada de tablas visibles y alertas de éxito

• Capturas de pantalla como evidencia de cada llamada a herramienta completada

• Navegador de respaldo entre Chromium, Edge y Chrome incluidos

• Interfaz de Studio en inglés y japonés

• No se requiere clave de API de modelo para la detección y reproducción deterministas

Verificación

El repositorio incluye comprobaciones unitarias y de extremo a extremo del MCP:

corepack pnpm check
corepack pnpm test
corepack pnpm build
node dist/tests/mcp-smoke.js

La prueba de humo lanza el servidor MCP STDIO generado, ejecuta tools/list, llama a search_customer y verifica que el resultado contiene Acme Industries.

Alcance del prototipo

Este prototipo de dos horas está optimizado para una prueba convincente de extremo a extremo, no para la automatización de sitios arbitrarios.

Actualmente está orientado a formularios convencionales renderizados en el servidor. CAPTCHA, SPA complejas, flujos con iframes, autenticación arbitraria y autocuración de selectores quedan deliberadamente fuera del alcance.

El siguiente paso del producto es Teach Workflow:

Una persona demuestra una operación multipágina una sola vez; GUI2MCP convierte esa demostración, sus parámetros y su condición de éxito en una herramienta MCP gobernada.

Eso lleva el producto del descubrimiento de formularios a la compilación duradera de flujos de trabajo empresariales.

Mapa del repositorio

src/discovery.ts       GUI inspection and tool compilation
src/executor.ts        Playwright-based generated tool runtime
src/mcp.ts             Generic STDIO MCP server
src/legacy-crm.ts      Separate-origin, API-less demo target
public/                GUI2MCP Studio
generated/tools.json   Generated machine interface
tests/                 Unit and MCP smoke tests
Plan.md                Japanese implementation plan and demo script

Regrabar la demo

corepack pnpm record:demo

Esto genera versiones WebM y H.264 MP4 con subtítulos en inglés en artifacts/.

Ya no es necesario que el proveedor del software construya una API. La IA puede derivar una interfaz de máquina a partir de la GUI que ya existe.