GUI2MCP

브라우저 전용 레거시 소프트웨어를 AI가 호출할 수 있는 도구로 바꾸세요.

27초 데모 시청 (MP4)

Canva에서 GUI2MCP 피치 덱 보기

레거시 GUI -> GUI2MCP -> 생성된 MCP 서버 -> Codex가 네이티브 API처럼 사용

문제

기업들은 여전히 사용 가능한 API가 없는 내부 및 레거시 소프트웨어에 의존합니다. 사람은 브라우저를 통해 레코드를 검색하고, 고객을 생성하고, 인보이스를 제출할 수 있지만, AI 에이전트는 매 실행마다 전체 인터페이스를 추론하지 않고서는 이러한 기능에 접근할 수 없습니다.

벤더 소프트웨어를 재구축하는 것은 비용이 많이 듭니다. 일회성 자동화 스크립트를 작성하고 유지보수하는 것은 확장성이 없습니다.

핵심 통찰

GUI는 이미 소프트웨어가 할 수 있는 일에 대한 기계가 읽을 수 있는 설명입니다.

GUI2MCP는 해당 인터페이스를 관찰하고, 유용한 작업을 발견하며, 이를 타입이 지정된 MCP 도구로 컴파일하고, Playwright로 원래 GUI를 조작하여 모든 호출을 구현합니다.

포함된 API 없는 CRM의 경우, 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 고객을 검색한 다음, AI 통합 워크숍에 대한 JPY 120,000 인보이스를 생성하세요.

5. Codex가 search_customer를 호출한 다음 create_invoice를 호출합니다.

6. CRM 인보이스 등록부를 열고 원래 GUI를 통해 생성된 INV-0001을 보여줍니다.

데모는 의도적으로 별도의 출처를 사용합니다:

• GUI2MCP 제어 평면: http://127.0.0.1:4310

• 수정되지 않은 레거시 대상: http://127.0.0.1:4311/legacy

• http://127.0.0.1:4311/api/health는 404를 반환합니다

포트 4310의 JSON 엔드포인트는 레거시 애플리케이션이 아닌 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

• readOnlyHint 및 idempotentHint와 같은 MCP 안전 주석

• 이름 및 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가 포함되어 있는지 확인합니다.

프로토타입 범위

이 2시간 프로토타입은 임의 사이트 자동화가 아닌 설득력 있는 엔드투엔드 증명에 최적화되어 있습니다.

현재는 기존의 서버 렌더링 양식을 대상으로 합니다. 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

이렇게 하면 artifacts/에 영어 자막이 포함된 WebM 및 H.264 MP4 버전이 생성됩니다.

API는 더 이상 소프트웨어 벤더가 구축할 필요가 없습니다. AI는 이미 존재하는 GUI에서 기계 인터페이스를 도출할 수 있습니다.