GUI2MCP

Verwandle browserbasierte Legacy-Software in Werkzeuge, die KI aufrufen kann.

Sehen Sie sich die 27-Sekunden-Demo an (MP4)

GUI2MCP-Pitch-Deck auf Canva ansehen

Legacy-GUI -> GUI2MCP -> generierter MCP-Server -> Codex nutzt es wie eine native API

Das Problem

Unternehmen sind weiterhin auf interne und Legacy-Software angewiesen, die keine nutzbare API hat. Menschen können über einen Browser Datensätze durchsuchen, Kunden anlegen und Rechnungen einreichen, aber KI-Agenten können auf diese Funktionen nicht zugreifen, ohne bei jedem Lauf die gesamte Oberfläche zu durchdenken.

Die Neuentwicklung der Herstellersoftware ist teuer. Das Schreiben und Pflegen einmaliger Automatisierungsskripte skaliert nicht.

Die Erkenntnis

Die GUI ist bereits eine maschinenlesbare Beschreibung dessen, was die Software kann.

GUI2MCP beobachtet diese Oberfläche, entdeckt nützliche Aktionen, kompiliert sie zu typisierten MCP-Tools und führt jeden Aufruf aus, indem es die ursprüngliche GUI mit Playwright bedient.

Für das enthaltene CRM ohne API generiert GUI2MCP:

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

Codex muss nicht mehr Menüs finden, das DOM inspizieren oder entscheiden, welcher Button gedrückt werden soll. Es ruft ein einziges Tool auf Domänenebene auf:

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

GUI2MCP öffnet den echten Rechnungsbildschirm, füllt die Felder aus, sendet das Formular ab, verifiziert das sichtbare Ergebnis und gibt INV-0001 mit einem Screenshot zurück.

Warum nicht Playwright direkt aufrufen?

Playwright ist der Aktuator. GUI2MCP ist der Schnittstellen-Compiler.

Für eine einmalige Aufgabe reicht direktes Playwright aus. GUI2MCP ist für wiederkehrende Vorgänge gedacht, die wiederverwendbar, überprüfbar und für jeden MCP-Client verfügbar werden sollen.

So funktioniert es

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. Beobachten: Playwright crawlt eine begrenzte Menge von Seiten mit gleicher Herkunft.

2. Verstehen: Überschriften, Beschriftungen, Pflichtfelder, Eingabetypen, Optionen und Absendeaktionen werden extrahiert.

3. Kompilieren: GUI-Aktionen werden zu MCP-Namen, Beschreibungen, JSON-Schema und Sicherheitsanmerkungen.

4. Ausführen: Die generische MCP-Laufzeitumgebung lädt die generierte Spezifikation und spielt Aufrufe über die GUI ab.

5. Verifizieren: Sichtbare Warnungen und Ergebnistabellen werden als strukturierte Ausgabe mit einem Screenshot zurückgegeben.

Die generierte MCP-Laufzeitumgebung enthält keine CRM-spezifischen Handler. Ihr Verhalten stammt aus generated/tools.json.

90-Sekunden-Jury-Demo

1. Öffnen Sie das Legacy-CRM und weisen Sie darauf hin, dass es nur Browserseiten bereitstellt.

2. Öffnen Sie GUI2MCP Studio und klicken Sie auf Discover tools.

3. Zeigen Sie die drei generierten Tools und ihre typisierten Parameter.

4. Fragen Sie Codex:

   Suchen Sie den Acme-Kunden und erstellen Sie dann eine Rechnung über 120.000 JPY für einen KI-Integrationsworkshop.

5. Codex ruft search_customer und anschließend create_invoice auf.

6. Öffnen Sie das Rechnungsregister des CRM und zeigen Sie INV-0001, das über die ursprüngliche GUI erstellt wurde.

Die Demo verwendet bewusst getrennte Ursprünge:

• GUI2MCP-Steuerungsebene: http://127.0.0.1:4310

• Unverändertes Legacy-Ziel: http://127.0.0.1:4311/legacy

• http://127.0.0.1:4311/api/health gibt 404 zurück

Die JSON-Endpunkte auf Port 4310 gehören zu GUI2MCP Studio, nicht zur Legacy-Anwendung.

Lokal ausführen

Voraussetzungen: Node.js 20+ und pnpm.

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

Öffnen Sie:

• GUI2MCP Studio: http://127.0.0.1:4310

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

Klicken Sie im Studio auf Discover tools, wählen Sie eine beliebige generierte Tool-Karte aus, geben Sie Argumente an und wählen Sie Run via Playwright.

Das Studio unterstützt Englisch und Japanisch über das EN / JP-Steuerelement in der oberen rechten Ecke.

Codex verbinden

Generieren Sie zuerst die Tool-Spezifikation im Studio. Lassen Sie das Studio und das Legacy-Ziel laufen, erstellen Sie dann den STDIO-Server und registrieren Sie ihn:

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

Starten Sie Codex neu und fragen Sie:

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

Eine projektspezifische Konfiguration ist auch in .codex/config.toml.example verfügbar.

CLI-Workflow

Wenn die Demo-Server laufen:

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

Nützliche Umgebungsvariablen:

• GUI2MCP_SPEC: Eine andere generierte Tool-Spezifikation laden.

• GUI2MCP_HEADFUL=1: Den Browser anzeigen, während ein MCP-Tool ausgeführt wird.

• PORT: Den Port des GUI2MCP Studio ändern.

• LEGACY_PORT: Den Port des Demo-Ziels ändern.

Technische Highlights

• Dynamisches MCP tools/list, das beim Serverstart generiert wird

• JSON-Schema, das aus echten Formularsteuerelementen abgeleitet wird

• MCP-Sicherheitsanmerkungen wie readOnlyHint und idempotentHint

• Beschriftungsbasierte Feldauflösung mit Name- und ID-Fallbacks

• Strukturierte Extraktion sichtbarer Tabellen und Erfolgsmeldungen

• Beweis-Screenshots für jeden abgeschlossenen Tool-Aufruf

• Browser-Fallback über gebündeltes Chromium, Edge und Chrome

• Englisch/Japanische Studio-Oberfläche

• Kein Modell-API-Schlüssel erforderlich für deterministische Erkennung und Wiedergabe

Verifizierung

Das Repository enthält Unit- und End-to-End-MCP-Prüfungen:

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

Der Smoke-Test startet den generierten STDIO-MCP-Server, führt tools/list aus, ruft search_customer auf und verifiziert, dass das Ergebnis Acme Industries enthält.

Prototyp-Umfang

Dieser Zwei-Stunden-Prototyp optimiert auf einen überzeugenden End-to-End-Beweis, nicht auf Automatisierung beliebiger Websites.

Er zielt derzeit auf konventionelle servergerenderte Formulare. CAPTCHA, komplexe SPAs, iframe-Workflows, beliebige Authentifizierung und Selector-Self-Healing sind bewusst ausgeschlossen.

Der nächste Produktschritt ist Teach Workflow:

Ein Mensch demonstriert einen mehrseitigen Vorgang einmal; GUI2MCP verwandelt diese Demonstration, ihre Parameter und ihre Erfolgsbedingung in ein verwaltetes MCP-Tool.

Das bringt das Produkt von der Formularerkennung zur dauerhaften Kompilierung von Geschäftsworkflows.

Repository-Karte

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

Demo neu aufnehmen

corepack pnpm record:demo

Dies erzeugt englisch untertitelte WebM- und H.264-MP4-Versionen in artifacts/.

Eine API muss nicht mehr vom Softwarehersteller gebaut werden. KI kann eine maschinelle Schnittstelle aus der bereits vorhandenen GUI ableiten.