GUI2MCP

Превратите устаревшее программное обеспечение, работающее только в браузере, в инструменты, которые может вызывать ИИ.

Смотрите 27-секундное демо (MP4)

Смотрите презентацию GUI2MCP на Canva

Устаревший GUI -> GUI2MCP -> сгенерированный MCP-сервер -> Codex использует его как нативный API

Проблема

Компании по-прежнему зависят от внутреннего и устаревшего программного обеспечения, у которого нет пригодного для использования API. Люди могут искать записи, создавать клиентов и отправлять счета через браузер, но ИИ-агенты не могут получить доступ к этим возможностям, не анализируя весь интерфейс при каждом запуске.

Переписывание ПО вендора обходится дорого. Написание и поддержка разовых скриптов автоматизации не масштабируется.

Ключевая идея

GUI уже является машиночитаемым описанием того, что умеет программное обеспечение.

GUI2MCP наблюдает за этим интерфейсом, обнаруживает полезные действия, компилирует их в типизированные MCP-инструменты и реализует каждый вызов, управляя исходным GUI с помощью Playwright.

Для включённой в комплект CRM без API GUI2MCP генерирует:

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

Codex больше не нужно искать меню, изучать DOM или решать, какую кнопку нажать. Он вызывает один инструмент уровня домена:

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

GUI2MCP открывает настоящий экран счетов, заполняет поля, отправляет форму, проверяет видимый результат и возвращает INV-0001 вместе со скриншотом.

Почему не вызывать Playwright напрямую?

Playwright — это исполнительный механизм. GUI2MCP — это компилятор интерфейса.

Для разовой задачи достаточно прямого использования Playwright. GUI2MCP предназначен для повторяющихся операций, которые должны стать переиспользуемыми, проверяемыми и доступными любому MCP-клиенту.

Как это работает

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. Наблюдение: Playwright обходит ограниченный набор страниц того же источника.

2. Понимание: извлекаются заголовки, метки, обязательные поля, типы ввода, параметры и действия отправки.

3. Компиляция: действия GUI превращаются в имена MCP, описания, JSON Schema и аннотации безопасности.

4. Выполнение: универсальная MCP-среда выполнения загружает сгенерированную спецификацию и воспроизводит вызовы через GUI.

5. Проверка: видимые уведомления и таблицы результатов возвращаются в виде структурированного вывода со скриншотом.

Сгенерированная MCP-среда выполнения не содержит обработчиков, специфичных для CRM. Её поведение определяется файлом generated/tools.json.

Демо для судей за 90 секунд

1. Откройте Legacy CRM и обратите внимание, что она предоставляет только браузерные страницы.

2. Откройте GUI2MCP Studio и нажмите Discover tools.

3. Покажите три сгенерированных инструмента и их типизированные параметры.

4. Спросите Codex:

   Найди клиента Acme, затем создай счёт на 120 000 JPY за воркшоп по интеграции ИИ.

5. Codex вызывает search_customer, а затем create_invoice.

6. Откройте реестр счетов CRM и покажите INV-0001, созданный через исходный GUI.

В демо намеренно используются разные источники:

• Плоскость управления GUI2MCP: http://127.0.0.1:4310

• Неизменённая устаревшая система: http://127.0.0.1:4311/legacy

• http://127.0.0.1:4311/api/health возвращает 404

JSON-эндпоинты на порту 4310 принадлежат GUI2MCP Studio, а не устаревшему приложению.

Запуск локально

Предварительные требования: Node.js 20+ и pnpm.

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

Откройте:

• GUI2MCP Studio: http://127.0.0.1:4310

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

В Studio нажмите Discover tools, выберите любую карточку сгенерированного инструмента, укажите аргументы и выберите Run via Playwright.

Studio поддерживает английский и японский языки с помощью переключателя EN / JP в правом верхнем углу.

Подключение Codex

Сначала сгенерируйте спецификацию инструментов в Studio. Оставьте Studio и устаревшую систему запущенными, затем соберите и зарегистрируйте STDIO-сервер:

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

Перезапустите Codex и спросите:

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

Конфигурация в рамках проекта также доступна в .codex/config.toml.example.

Работа с CLI

При запущенных демо-серверах:

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

Полезные переменные окружения:

• GUI2MCP_SPEC: загрузить другую сгенерированную спецификацию инструментов.

• GUI2MCP_HEADFUL=1: показывать браузер во время выполнения MCP-инструмента.

• PORT: изменить порт GUI2MCP Studio.

• LEGACY_PORT: изменить порт демонстрационной системы.

Технические особенности

• Динамический MCP tools/list, генерируемый при запуске сервера

• JSON Schema, выводимая из реальных элементов форм

• Аннотации безопасности MCP, такие как readOnlyHint и idempotentHint

• Разрешение полей в первую очередь по меткам с запасными вариантами по name и ID

• Структурированное извлечение видимых таблиц и уведомлений об успехе

• Скриншоты-доказательства для каждого завершённого вызова инструмента

• Запасные варианты браузера: встроенный Chromium, Edge и Chrome

• Интерфейс Studio на английском и японском языках

• Для детерминированного обнаружения и воспроизведения не требуется API-ключ модели

Проверка

Репозиторий включает модульные и сквозные MCP-проверки:

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

Смоук-тест запускает сгенерированный STDIO MCP-сервер, выполняет tools/list, вызывает search_customer и проверяет, что результат содержит Acme Industries.

Объём прототипа

Этот двухчасовой прототип оптимизирован для убедительного сквозного доказательства, а не для автоматизации произвольных сайтов.

В настоящее время он нацелен на обычные формы с серверным рендерингом. CAPTCHA, сложные SPA, рабочие процессы в iframe, произвольная аутентификация и самовосстановление селекторов намеренно выходят за рамки.

Следующий шаг продукта — Teach Workflow:

Человек один раз демонстрирует многостраничную операцию; GUI2MCP превращает эту демонстрацию, её параметры и условие успеха в управляемый MCP-инструмент.

Это переводит продукт от обнаружения форм к компиляции долговечных бизнес-процессов.

Карта репозитория

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

Перезапись демо

corepack pnpm record:demo

Это создаёт версии WebM и H.264 MP4 с английскими субтитрами в artifacts/.

API больше не обязательно создавать вендору ПО. ИИ может вывести машинный интерфейс из уже существующего GUI.