Arc Lite

フロントエンド開発に最適化された Arc Browser 制御用の軽量 MCP サーバーです。 AppleScript と JavaScript インジェクションを組み合わせ、必要十分な 30 ツールに絞ったコンパクトな構成を提供します。

対応環境: macOS 専用（AppleScript を使用）

特徴

• 軽量: フル版（76ツール）からフロントエンド開発に必須の機能のみを厳選した 30 ツール構成
• 依存最小: @modelcontextprotocol/sdk のみ
• DOM操作対応: クリック、入力、フォーム送信、ドラッグなどの実操作をサポート
• デバッグ機能: コンソール / ネットワーク監視、スクリーンショット取得

機能一覧（30個）

タブ操作（5個）

ツール	説明
arc_open_url	URL を開く（新規タブ / 現在のタブ）
arc_list_tabs	すべてのタブを一覧表示
arc_switch_tab	タブを切り替える
arc_close_tab	タブを閉じる
arc_reload_tab	タブをリロード

ナビゲーション（1個）

ツール	説明
arc_go_back	履歴を戻る

DOM操作（8個）

ツール	説明
arc_click	要素をクリック
arc_hover	要素にホバー
arc_fill	入力欄に値を入力
arc_fill_form	フォーム一括入力
arc_press_key	キー入力を送信
arc_drag	ドラッグ操作
arc_upload_file	ファイルアップロード
arc_wait_for	要素の出現を待機

JavaScript・ページ情報（6個）

ツール	説明
arc_execute_javascript	任意の JavaScript を実行
arc_get_page_content	ページのテキストを取得
arc_get_page_html	ページの HTML を取得
arc_get_page_info	ページ詳細情報（URL、ビューポート、UserAgent）
arc_get_meta_tags	メタタグ情報（SEO 確認用）
arc_get_page_forms	フォーム情報を取得

スクリーンショット（1個）

ツール	説明
arc_take_screenshot	スクリーンショットを取得（macOS の screencapture を使用）

コンソール監視（3個）

ツール	説明
arc_start_console_capture	コンソールログのキャプチャを開始
arc_get_console_logs	キャプチャしたログを取得
arc_stop_console_capture	コンソールキャプチャを停止

ネットワーク監視（3個）

ツール	説明
arc_start_network_monitor	ネットワークリクエスト（fetch/XHR）の監視を開始
arc_get_network_requests	監視中のリクエスト一覧を取得
arc_stop_network_monitor	ネットワーク監視を停止

ダイアログ・ストレージ・Cookie（3個）

ツール	説明
arc_handle_dialog	ダイアログ（alert / confirm / prompt）を処理
arc_get_storage_info	localStorage / sessionStorage の情報を取得
arc_get_cookies	Cookie 一覧を取得

セットアップ

1. クローンと依存関係のインストール

git clone https://github.com/yzanbo/arc-lite-mcp.git
cd arc-lite-mcp
npm install

2. Claude Code 設定

~/.claude.json の mcpServers に以下を追加します:

{
  "mcpServers": {
    "arc-lite": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/絶対パス/arc-lite-mcp/server/index.js"
      ]
    }
  }
}

/絶対パス/ は git clone した実際の場所に置き換えてください。

3. 権限設定

初回実行時に macOS の権限プロンプトが表示されます:

1. システム設定 > プライバシーとセキュリティ > オートメーション を開く
2. Claude（もしくは利用クライアント）を探す
3. Arc を有効にする

使用例

基本操作

arc_open_url で https://example.com を開いて
arc_list_tabs でタブ一覧を表示して
arc_switch_tab で 2 番目のタブに切り替えて

フォーム入力・ボタン操作

arc_fill で "#email" に "[email protected]" を入力して
arc_fill で "#password" に "secret" を入力して
arc_click で "button[type=submit]" をクリックして
arc_wait_for で ".dashboard" の表示を待って

コンソール・ネットワーク監視（フロントエンドデバッグ）

arc_start_console_capture でコンソール監視を開始して
arc_start_network_monitor でネットワーク監視を開始して

（アプリを操作）

arc_get_console_logs で error レベルのログを取得して
arc_get_network_requests で API リクエストを確認して

ページ情報・SEO 確認

arc_get_page_info でページ詳細を取得して
arc_get_meta_tags でメタタグを確認して
arc_get_page_forms でフォーム構造を取得して

スクリーンショット

arc_take_screenshot でスクリーンショットを撮って
→ ドラッグで範囲を選択するとキャプチャされる

トラブルシューティング

権限エラーが発生する

• システム設定でオートメーション権限を確認
• 利用クライアント（Claude Code 等）を再起動

Arc が見つからない

• Arc Browser が起動していることを確認
• /Applications/Arc.app にインストールされていることを確認

JavaScript 実行が失敗する

• CSP（Content Security Policy）制限のあるページでは動作しない場合があります

Network / Console 監視が機能しない

• 監視はページリロード後にリセットされます
• 監視開始後のリクエスト / ログのみがキャプチャされます

ライセンス

MIT