Browse Together MCP

Browse Together MCP

MCP サーバーを備えた Playwright ブラウザプロキシ

デスクトップ上で動作する Playwright ブラウザと MCP サーバーです。ヘッドフルブラウザ（人が操作できるブラウザ）と、HTTP API または MCP サーバー経由でブラウザを操作するための MCP サーバーを起動できます。

このプロジェクトは、ブラウザーの自動化と共同ブラウジングのために、相互に補完する 2 つのサービスを提供します。

• HTTP 経由で永続的な Playwright ブラウザーのインスタンスを操作する ブラウザープロキシサービス。通常どおり、利用するサービスにログインできます。
• FastMCP フレームワークを通じて、ブラウザーの機能を MCP クライアント（Claude Desktop など）に公開する MCP サーバー。提供された認証済みセッション内で動作できるため、認証済みユーザーとして MCP コマンドをより強力で便利に利用できます。

どちらのサービスも Deno と TypeScript で構築されており、シームレスに連携します。

機能

• 複数のブラウザーに対応：Chromium（デフォルト）または Firefox で実行できます。
• 永続的なブラウザーセッション：サービスの実行中は、1 つのブラウザーインスタンスが動作し続けます。
• 名前付きタブ：一意の ID を使って、1 つのブラウザーセッション内の複数のページ（タブ）を操作できます。
• HTTP API：シンプルな JSON コマンドを HTTP 経由で送信して、ブラウザーを操作できます。
• MCP 連携：Cline、Windsurf、Claude Desktop、その他の MCP クライアントを通じてブラウザーを利用できます。
• 型安全性：受信するコマンドを堅牢に検証するために Zod を使用します。
• API トークンを使用して、ブラウザープロキシサービスの（HTTP）エンドポイントを保護できます。

注：現在は Mac OS に対応していますが、少し変更すれば他のプラットフォームにも拡張できます。

これは Computer Use / Operator ですか？

いいえ、現時点では違います。これは通常の人間が操作するブラウザーのように動作する（ヘッドフル）ウェブブラウザーですが、HTTP API または MCP クライアント経由でセッションを操作することもできます。スクリーンショットの取得やドキュメントのダウンロードなどはできますが、Computer Use / Operator サービスではありません。

MCP ベースのブラウザーセッションのリモート操作機能と考えてください。コーディング中にドキュメントをダウンロードしたり、その他の作業を行ったりできます。

コアコンポーネント

• ブラウザーサービス：

  • browser.ts：ブラウザープロキシサービスの主要な実装
  • types.ts：Zod を使用したコマンド構造と型の定義

• MCP サーバー：

  • mcp.ts：ブラウザーサービスに接続する FastMCP の実装

使い方

開発者向けクイックスタート

0. 前提条件をインストールする： Playwright のブラウザーパッケージをインストールします（npx がインストール済みであることを前提とします）。

   # Install all browsers
   npx playwright install
   
   # Or install specific browsers
   npx playwright install chromium
   npx playwright install firefox
   

   Deno をインストールします。

   curl -fsSL https://deno.land/install.sh | sh
   

   詳細は Deno Installation を参照してください。

1. ブラウザーサービスを起動する：

   deno task browser
   

   これにより、ブラウザープロキシが http://localhost:8888（または環境で指定されたポート）で起動します。

2. MCP クライアントを設定する：

   {
       "mcpServers": {
    	   "browse-together": {
    		   "command": "deno",
    		   "args": ["run", "-A", "/Users/duane/Projects/browse-together-mcp/mcp.ts"]
         },
     }
   }
   

   テスト用に MCP サーバーを直接起動することもできます。

   deno task mcp
   

ブラウザーの選択

BROWSER_TYPE 環境変数を設定するか、--browser-type フラグを使用して、利用するブラウザーを選択できます。

# Use Firefox via environment variable
BROWSER_TYPE=firefox deno task browser

# Or via CLI flag
deno task browser --browser-type firefox

方法 1：HTTP API 経由で操作する

アクションを記述した JSON ボディを付けて、/api/browser/:pageId に POST リクエストを送信します。

例：URL に移動する

curl -X POST http://localhost:8888/api/browser/myTab \
  -H "Content-Type: application/json" \
  -d '{"action":"goto","url":"https://example.com"}'

例：要素をクリックする

curl -X POST http://localhost:8888/api/browser/myTab \
  -H "Content-Type: application/json" \
  -d '{"action":"click","selector":"#submit-button"}'

詳細は 002-browser.md の API リファレンス を参照してください。

方法 2：MCP クライアントで使用する

1. claude_desktop_config.json を編集して、MCP クライアント（Cline、Windsurf、Claude Desktop など）で MCP サーバーを設定します。

{
  "mcpServers": {
    "browse-together": {
      "command": "/path/to/deno", 
      "args": [
        "run",
        "--allow-read",
        "--allow-net",
        "--allow-env",
        "--allow-sys",
        "/path/to/browse-together-mcp/mcp.ts"
      ],
      "env": {
        "PORT": "8888" 
      }
    }
  }
}

2. 次のようなコマンドを使用して、クライアントで MCP ツールを利用します。

Let's browse to jsr.io together.

利用可能な MCP ツール

MCP サーバーは、次のツールをクライアントに公開します。

• goto：URL に移動する
• click：要素をクリックする
• fill：フォームフィールドに入力する
• content：ページの HTML コンテンツを取得する
• fetch：ブラウザーのコンテキストで fetch リクエストを実行する
• listPages：アクティブなブラウザーページをすべて一覧表示する
• closePage：指定したページを閉じる

ドキュメント

このプロジェクトは、段階的な計画を記述した一連のドキュメントをもとに、バイブコーディングで作成されました。

• 初期設計の決定事項（注：プロジェクト構成の説明は古くなっている可能性があります）
• ブラウザープロキシサービスの概要（マルチセッション — 過去の設計）
• シングルセッションアーキテクチャへのリファクタリング
• 型安全性の計画（Zod）
• ページの耐障害性に関する計画
• 使用ライブラリ
• テスト戦略
• 設定
• セキュリティに関する考慮事項
• Deno のベストプラクティス
• MCP サーバー実装計画
• FastMCP のリファクタリング

一部の手順は古くなっているか、もはや該当しない可能性がありますが、参考資料として、またプロジェクトの構築方法を知る手がかりとして掲載しています。

ユタ州サンディの地域バイブコーディンググループについて詳しくは、vibe-coders.orgもご覧ください。

開発

• ブラウザープロキシの実行： deno task browser
• MCP サーバーの実行： deno task mcp
• コードのフォーマット： deno fmt
• 依存関係の確認： deno check --all browser.ts mcp.ts types.ts

アーキテクチャ

+----------------+      +--------------+      +------------------+
|                |      |              |      |                  |
| Cline/LLM      | ---- | MCP Server   | ---- | Browser Service  |
| (MCP Client)   |      | (mcp.ts)     | HTTP | (browser.ts)     |
|                |      |              |      |                  |
+----------------+      +--------------+      +------------------+
                               |                       |
                          FastMCP API            Playwright API
                               |                       |
                           STDIO/SSE            Chromium Browser

システムは次のように動作します。

1. ブラウザーサービス（browser.ts）が、Playwright を使用して永続的な Chromium ブラウザーインスタンスを管理します。
2. MCP サーバー（mcp.ts）が、FastMCP を使用して標準的な MCP インターフェースを提供します。
3. MCP サーバーは、HTTP 経由でブラウザーサービスにコマンドを転送します。
4. Claude Desktop などのMCP クライアントは、シンプルなツール呼び出しを通じてブラウザーのすべての機能を利用できます。