MCP Safari Server

🚀 MCP Safari Server

このModel Context Protocol (MCP)サーバーは、macOS上のSafariブラウザをプログラムで制御することができます。ClaudeのようなAIアシスタントを用いたウェブ自動化、テスト、デバッグに最適です。

🚀 クイックスタート

Safari MCP Serverは、AIアシスタントが標準化されたプロトコルを通じてSafariブラウザと対話できるようにします。ナビゲーション、要素の操作、JavaScriptの実行、ページの監視などのツールを提供し、以下の用途に最適です。

• 🤖 AI支援によるウェブ開発とデバッグ
• 🧪 自動化テストと品質保証
• 📊 ウェブスクレイピングとデータ抽出
• 🔍 リアルタイムエラー監視
• 📸 ビジュアル回帰テスト

✨ 主な機能

• ナビゲート: SafariでURLを開く
• JavaScriptの実行: 現在のページコンテキストでJSコードを実行する
• ページ情報の取得: 現在のURLとページタイトルを取得する
• スクリーンショットの撮影: 現在のSafariウィンドウをキャプチャする
• コンソールログ: console.log、console.error、console.warnメッセージをキャプチャして取得する
• ページナビゲーション: ブラウザの履歴を更新、戻る、または進む
• 自動エラー監視: JavaScriptエラーを監視し、Claude Codeに即座に送信して修正する
• 要素のクリック: CSSセレクタを使用してページ要素をクリックする
• テキストの入力: フォームや入力フィールドにテキストを入力する
• スクロール: 特定の要素または位置にスクロールする
• オプションの選択: ドロップダウンメニューからオプションを選択する
• 要素のテキストの取得: ページ要素からテキストコンテンツを抽出する
• 要素の待機: 要素が表示されるまで待機する

📦 インストール

1. 依存関係をインストールします。

cd mcp-safari-server
npm install

2. サーバーをビルドします。

npm run build

📚 ドキュメント

設定

このサーバーをClaudeの設定ファイル（.mcp.jsonまたはclaude-code-config.json）に追加します。

{
  "mcpServers": {
    "safari": {
      "command": "node",
      "args": ["/path/to/mcp-safari-server/dist/index.js"],
      "env": {}
    }
  }
}

または開発用には以下のように設定します。

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-safari-server/src/index.ts"],
      "env": {}
    }
  }
}

使用方法

設定が完了すると、Claudeは以下のツールを使用することができます。

基本的な使用法

Use the safari navigate tool to open https://example.com

高度な使用法

Use the safari execute_script tool to run: document.querySelector('h1').textContent

ページ情報の取得

現在のページに関する情報を取得します。

Use the safari get_page_info tool to see the current URL and title

スクリーンショットの撮影

現在のSafariウィンドウのスクリーンショットを撮ります。

Use the safari take_screenshot tool to capture the current page

コンソールログの取得

ページのコンソールログを取得します。

Use the safari get_console_logs tool to see any console messages

ページの更新

現在のページを更新します。

Use the safari refresh_page tool

ブラウザ履歴の移動

ブラウザの履歴を移動します。

Use the safari go_back tool to go to the previous page

エラー監視の開始

JavaScriptエラーの監視を開始し、自動的にClaude Codeに送信します。

Use the safari start_error_monitoring tool

オプション:

• interval: チェック間隔（ミリ秒）（デフォルト: 2000）
• autoSendToClaude: エラーを自動的にClaude Codeに送信する（デフォルト: true）

エラー監視の停止

エラー監視を停止します。

Use the safari stop_error_monitoring tool

要素のクリック

ページ内の要素をクリックします。

Use the safari click_element tool with selector "#submit-button"
Use the safari click_element tool with selector "a.nav-link" and waitForNavigation true

テキストの入力

入力フィールドにテキストを入力します。

Use the safari type_text tool with selector "#email" and text "user@example.com"
Use the safari type_text tool with selector "#password" and text "mypassword" and clearFirst false

スクロール

要素または位置にスクロールします。

Use the safari scroll_to tool with selector "#footer"
Use the safari scroll_to tool with y 500 and behavior "smooth"

オプションの選択

ドロップダウンからオプションを選択します。

Use the safari select_option tool with selector "#country" and value "US"
Use the safari select_option tool with selector "#size" and text "Large"
Use the safari select_option tool with selector "#priority" and index 2

要素のテキストの取得

要素のテキストコンテンツを取得します。

Use the safari get_element_text tool with selector "h1"
Use the safari get_element_text tool with selector ".error-message"

要素の待機

要素が表示されるまで待機します。

Use the safari wait_for_element tool with selector "#loading-complete"
Use the safari wait_for_element tool with selector ".modal" and timeout 5000

🔧 技術詳細

エラー監視機能

Safari MCPサーバーは、ウェブアプリケーション内のJavaScriptエラーを自動的に監視し、Claude Codeに即座に送信して修正することができます。これにより、以下のような強力な開発ワークフローが可能になります。

1. ウェブアプリを開発する
2. Safari MCPがJavaScriptエラーを監視する
3. エラーが発生すると、自動的にClaude Codeに通知される
4. Claudeがエラーを分析し、修正を提案または実装する

エラー監視の仕組み

エラー監視を開始すると、サーバーは以下のことを行います。

1. SafariページにJavaScriptを注入して、以下をキャプチャします。

   • 未処理のエラー（window.onerror）
   • 未処理のPromise拒否
   • console.error呼び出し

2. 指定された間隔（デフォルト: 2秒ごと）で新しいエラーをチェックします。

3. エラーが見つかり、Claude Codeがアクティブな場合、以下を含む通知を送信します。

   • エラーの種類とメッセージ
   • ファイルの場所と行/列番号
   • スタックトレース
   • 現在のページURL
   • タイムスタンプ

4. Claude Codeが通知を受け取り、エラーを修正するように促すことができます。

ワークフローの例

1. 開発サーバーを起動する
2. navigateツールを使用してSafariでアプリに移動する
3. start_error_monitoringでエラー監視を開始する
4. アプリと対話すると、JavaScriptエラーがキャプチャされる
5. Claude Codeがエラーに関する通知を受け取り、修正を支援する
6. 作業が終了したら、stop_error_monitoringで監視を停止する

📄 ライセンス

必要条件

• macOS（AppleScriptを使用してSafariを制御する）
• Safariブラウザ
• Node.js 16+

⚠️ 重要提示

このサーバーはAppleScriptコマンドを実行してSafariを制御します。信頼できる環境でのみ使用し、実行するJavaScriptコードに注意してください。

トラブルシューティング

1. Safari自動化の許可: システム環境設定 > セキュリティとプライバシー > プライバシー > 自動化で、ターミナル/IDEにSafariを制御する許可を与える必要がある場合があります。
2. スクリプト実行エラー: Safariがインストールされており、セキュリティソフトウェアによってブロックされていないことを確認してください。
3. コンソールログのキャプチャ: コンソールログのキャプチャ機能は、ページにスクリプトを注入します。厳格なコンテンツセキュリティポリシーが設定されたページでは、これがブロックされる場合があります。