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はアクチュエーターです。GU I2MCPはイ ンターフェース・コ ンパイラーです。

一過性のタスクなら、直接の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. レガシーCRMを開き、ブ ラウザ・ペー ジしか公開していないことを指摘します。

2. GU I2MCP Stu dioを開き、ツールを発見をク リッ クします。

3. 生成された3つのツールと、その型付きパラメー タを表示します。

4. Codexに尋ねます：

   Acme顧客を検索し、AI統合ワー クシ ョッ プ向けにJPY 120,000の請求書を作成して。

5. Codexがsarch_custmerを呼び、続いてcreat_invoceを呼びます。

6. CRMの請求書台帳を開き、元のGU Iを通じて作成されたINV-0001を表示します。

デモは意図的に異なるオ リジンを 使用しています：

• GUI 2MC P制御プレー ン: htp://127.0.0.1:4310

• 未変更のレガシー対像: htp://127.0.0.1:4311/leacy

• htp://127.0.0.1:4311/ap/healtは404を返します

ポート4310のJSONエンドポイ ントは、レガシー・アプ リケー ションではなく、GU I2MCP Stu dioのものです。

ローカルで実行

前提条件： Node.js 20+ と pnpm。

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

開く：

• GU I2MCP Stu dio: htp://127.0.0.1:4310

• レガシーCRM: htp://127.0.0.1:4311/legacy

Stu dioでツールを発見をクリックし、生成された任意のツールカードを選択し、引数を指定して、Playwrightで実行を選びます。

Stu dioは右上隅のEN / JPコントロールから英語と日本語に対応しています。

Codexを接続

まずStu dioでツール仕様を生成します。Stu dioとレガシーターゲットを起動したまま、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

これにより、英語字幕付きのWebMとH.264 MP4バージョンがartifacts/に生成されます。

APIはもはやソフトウェアベンダーが構築する必要はありません。AIは、すでに存在するGUIから機械インターフェースを導出できるのです。