AIに実際のブラウザを制御させる — 使い捨てのブラウザではない

ほとんどのブラウザ MCP サーバは別々のブラウザインスタンスを起動します。真っ新な状態、クッキーなし、認証なし。ログインの背後で何かを自動化したいですか？毎回再認証します。実際のセッション状態をテストしたいですか？残念ながら、できません。

AI がすでに開いているブラウザをそのまま使えたらどうなる？

それが Dramaturg + @playwright-repl/mcp が実現することです。AI は実際の Chrome のタブを制御します — あなたのクッキー、セッション、localStorage — すべてそのまま保たれます。

仕組み

Claude (or any MCP client)
  ↕ MCP (stdio)
playwright-repl MCP server
  ↕ WebSocket
Dramaturg Chrome extension
  ↕ CDP / chrome.debugger
Your real Chrome tabs

主な違いは：Playwright はブラウザの内部で実行されることで、外部ではありません。拡張機能は playwright-crx を使用して、Chrome のサービスワーカー内で Playwright API の全機能を直接実行します。Node.js のリレーも、別個のブラウザプロセスもありません。

つまり、

• 再認証不要 — Gmail、Notion、社内ツール — すでにログイン済み
• expect() アサーション — 他のブラウザ MCP サーバーがサポートしていないもの
• すべてが見える — AI が実際のタブでリアルタイムに作業します

ただ2つのツール

Playwright の公式 MCP サーバーは約70種のツールを公開しますが、@playwright-repl/mcp はわずか2つを公開します：

• run_command — 単一のコマンドを実行する（キーワードまたは JavaScript）
• run_script — 複数行のスクリプトを実行

AI はそれらをどう扱うかを判断します。コマンドの見本は次のとおりです：

1
キーワード構文 (.pw)

snapshot                    → accessibility tree
goto https://example.com    → navigate
click "Sign in"             → click by text
fill "Email" "user@test.com"  → fill a form field
verify-text "Welcome"       → assert text is visible

Playwright API (JavaScript)

await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Welcome')).toBeVisible();

どちらも同じ run_command ツールを通じて動作します。拡張機能はフォーマットを自動検出します。

実際に検証する AI エージェント

The MCP package includes four agents that go beyond "generate and hope":

Planner — URL とゴールを渡すと、スナップショットを取り、ページ構造をマッピングし、見つけた正確なラベルとテキストを含む、ステップバイステップのワークフロープランを作成します。

Generator — 計画を取り、それを動作するスクリプトへと変換します。キーワードは working（動作すること）です。実際のブラウザで全コマンドを実行し、スクリプトを組み立て、run_script で全部を実行し、通過するまで繰り返します。

Healer — 壊れたスクリプトを渡します。誤ったセレクタ、ページ構造の変更、タイミングの問題。スクリプトを実行し、スナップショットで失敗を診断し、修正して再実行します。全行が通るまで繰り返します。

Converter — .pw キーワード構文と JavaScript Playwright API の間を翻訳します。自然な出力を作成します — 適切なロケータ戦略、抽出した変数、連結したメソッド。

すべてのエージェントは出力前にスクリプトを実行する必要があります。"これが機能するはず" という主張はなく、通過するか、エージェントが修正を続けます。

設定

1. インストール

npm install -g @playwright-repl/mcp

Chrome Web Store — Dramaturg をインストールします。

2. Claude Desktop の設定

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "playwright-repl": {
      "command": "playwright-repl-mcp"
    }
  }
}

Claude Code の場合：

claude mcp add playwright-repl playwright-repl-mcp

3. AI エージェントのインストール（任意）

mkdir -p .claude/agents
cp node_modules/@playwright-repl/mcp/agents/* .claude/agents/

4. 以上です

拡張機能は自動的に接続します。サイドパネルは不要です。Chrome が実行されていることを確認してください。

例 prompts

Go to https://demo.playwright.dev/todomvc に移動し、3 つの Todo を追加、1 つを完了させ、Active フィルタが残りの2つだけ表示されていることを検証します。

@playwright-repl-planner は https://demo.playwright.dev/todomvc を探索して Todo の追加と完了をテストする計画を立てます

@playwright-repl-generator は 3 つの Todo を追加し、1 つを完了させ、Active フィルタを検証する .pw スクリプトを作成します

@playwright-repl-healer このスクリプトは 5 行目で失敗しています — サイトの更新後にセレクタが変更されました: [paste script]

@playwright-repl-converter この .pw スクリプトを JavaScript に変換します: [paste script]

人間 + AI、並んで

拡張機能は AI の橋渡し役だけではありません — AI と一緒に使えるフル REPL です：

• コマンドの実行をリアルタイムで監視 — AI が作業している最中に
• 手動で介入 — 状態を確認するには snapshot を入力するか、別のページへ移動
• 自分の操作を記録する — Record をクリックし、ページと対話して .pw コマンドや JS コードを取得
• タブを切り替える — ツールバーのドロップダウンで、AI とあなたのコマンドの両方を任意の開いているタブへリダイレクトできます

他のブラウザ MCP サーバーとの比較

使ってみる

> snapshot
> click "Sign in"
> fill "Email" "user@test.com"
> verify-text "Dashboard"

あなたのブラウザ。あなたのセッション。自分の作業を検証する AI。

• Chrome Web Store — Dramaturg
• GitHub — playwright-repl
• npm — @playwright-repl/mcp