Safari MCP

更新: Safari 27 と Safari Technology Preview 247 で、Safari MCP サーバーを導入しています。これは Web 開発者向けの Model Context Protocol サーバーで、Web 開発とデバッグのワークフローをより速く、より強力にします。エージェントがコーディングプロセスにますます不可欠になっていることを私たちは認識しており、Safari MCP サーバーは、エージェントを Safari ブラウザウィンドウに接続することで、コードがブラウザで実際にどのようにレンダリングされるかをエージェントが把握できるようにします。

MCP 互換のクライアントはすべて Safari MCP サーバーに接続できます。エージェントを Safari ブラウザウィンドウに接続することで、エージェントはユーザーが体験する内容をエミュレートし、DOM へのアクセス、ネットワークリクエスト、スクリーンショット、コンソール出力など、より自律的にデバッグするために必要な情報を得ることができます。

これによりデバッグプロセスが高速化され、ターミナル内で作業を続けられるため、ウィンドウを行き来してプロンプトを入力し、コードをデバッグするという手間が減ります。

ユースケース

Web 向けに開発しているなら、デバッグの儀式をご存知でしょう。通常は次のような流れです。

ブラウザでサイトに何か問題があることに気づきます。コンソールを開いて原因を探します。スタイルタブをクリックします。何が壊れているかを確認します。コードに戻って修正します。あるいはスクリーンショットを撮り、問題をエージェントに詳しく伝え、修正してもらいます。うまくいけばバグは修正され、次に進めます。

しかし、修正されない場合は、再び同じワークフローを繰り返します — ブラウザ。プロンプト。エージェント。

そして、バグを完全に潰すまで、何度も何度も繰り返します。

使用するブラウザやツールに関係なく、デバッグワークフローは1つの修正のために多くのクリック、ツール、ウィンドウの切り替えを必要としますが、そうである必要はありません。開発ワークフローで既にエージェントを使用しているなら、Safari MCP サーバーによりデバッグがより速く、より効率的になります。

Safari MCP サーバーにより、エージェントはより多くのデバッグとトラブルシューティングを自律的に行えます。以下はその支援例のほんの一部です。

Safari での Web 開発。 次回 Safari で開発する際は、アップグレードされたワークフローの恩恵を受けられます。エージェントは既にコードを支援していますが、コードが Safari で実際にどのようにレンダリングされるかを確認することで、さらに多くのことを行えるようになります。

Safari との互換性向上。 1つのブラウザだけでテストすると、別のブラウザでの潜在的なバグを見逃し、それらのユーザーに劣った体験を提供することになります。Safari MCP サーバーを使用すると、エージェントが Safari でサイトを開き、計算済みスタイルを検査し、レイアウトを確認し、ウィンドウを切り替えることなく期待値と比較できます。

パフォーマンスの分析。 サイトのどの部分が速度を低下させているかを確認します。Safari MCP サーバーにより、エージェントはページ上の JavaScript を評価して、ナビゲーションタイミングやリソース読み込み時間などのパフォーマンスメトリクスを表面化できるため、サイトを遅くしている原因を特定し、適切な修正に取り組めます。

アクセシビリティの確認。 Safari MCP サーバーにより、エージェントはラベルの欠落、不適切な ARIA 属性、コントラスト不足などの一般的なアクセシビリティ問題を確認できるため、ユーザーに影響を与える問題を発見できます。

ユーザー状態の検証。 ページが正常に動作し、期待どおりに表示されていることを確認します。エージェントはフォームの状態を確認し、セレクタを使用して要素をクエリし、特定のインタラクションを確認し、チェックアウトフローのさまざまな状態を表示するなどができます。これらの手動チェックに費やす時間を減らし、エージェントに任せることができます。

これらはユースケースのほんの一部です。どのように実装するにせよ、Safari MCP サーバーはエージェントがより多くのことを支援し、Web 開発でしばしば必要とされる行き来を減らすのに役立ちます。より簡単なワークフローは、より多くのバグ修正、より満足度の高いユーザー、そしてより良い製品につながります。

ツール

利用可能なツールとその機能は以下のとおりです。

ツール	説明
browser_console_messages	現在または指定されたタブのバッファリングされたコンソールログを返す
browser_dialogs	ブラウザダイアログを一覧表示し、応答する（JS プロンプトの受け入れ、却下、テキスト入力）
close_tab	ハンドルでブラウザタブを閉じる
create_tab	新しいブラウザタブを作成し、オプションで URL を読み込む
evaluate_javascript	ページ内で JavaScript コードを実行し、結果を返す
get_network_request	記録された単一のネットワークリクエストの詳細を取得する（ヘッダー、本文、タイミング）
get_page_content	ページのテキストコンテンツをさまざまな形式（markdown、HTML、JSON など）で抽出する
list_network_requests	現在のタブのネットワークリクエストの概要（URL、メソッド、ステータス、タイミング）を一覧表示する
list_tabs	開いているすべてのブラウザタブをハンドルと URL とともに一覧表示する
navigate_to_url	URL に移動し、読み込まれたページのコンテンツを返す
page_info	現在のページの情報を取得する：URL、タイトル、読み込み状態
page_interactions	DOM インタラクションを順に実行する：クリック、入力、スクロール、ホバー、キープレスなど
screenshot	現在のページのスクリーンショットを PNG としてキャプチャする
set_emulated_media	レスポンシブデザインテスト用に CSS メディアタイプ（例：「print」）をエミュレートする
set_viewport_size	ブラウザのビューポートサイズを CSS ピクセルで設定する
switch_tab	ハンドルで別のブラウザタブに切り替える
wait_for_navigation	現在のページの読み込みが完了するまで待機し、最終 URL とタイトルを返す

Safari MCP サーバーを使用すれば、ブラウザで体験していることをエージェントに詳しく説明する完璧なプロンプトを書く必要はもうありません。エージェントに自分で調べる能力を与えることができます。

はじめ方

Safari 27

まず、Safari 27 をインストールする必要があります。インストール後、Web 開発者向け機能とリモート自動化を有効にしてください。Web 開発者向け機能を有効にするには、Safari > 設定 > 詳細 > 「Web 開発者向け機能を表示」チェックボックスをオンにします。次に、Safari > 設定 > 開発 > 「リモート自動化と外部エージェントを許可」にチェックを入れます。

Claude を使用している場合は、ターミナルで次のコマンドを使用できます。

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

Codex を使用している場合は、ターミナルで次のコマンドを使用できます。

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

他のエージェントの場合は、mcp.json または config.json ファイルに以下を記述できます。

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

Safari Technology Preview

まず、Safari Technology Preview をインストールする必要があります。インストール後、Safari 設定 > 詳細 > 「Web 開発者向け機能を表示」を有効にしてください。次に、Safari 設定 > 開発 > 「リモート自動化と外部エージェントを有効にする」に進みます。

Claude を使用している場合は、ターミナルで次のコマンドを使用できます。

claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

Codex を使用している場合は、ターミナルで次のコマンドを使用できます。

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

他のエージェントの場合は、mcp.json または config.json に以下を記述できます。

"safari-mcp-stp": {
  "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
  "args": ["--mcp"] 
}

上記のコードではサーバー名が safari-mcp-stp ですが、safari のように任意の名前に変更できることに注意してください。Safari MCP サーバーをインストールしたら、次のようなプロンプトを試してみてください。

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

各エージェントの動作は少しずつ異なりますが、Safari MCP サーバーを明示的に使用するように指示する必要はありません — エージェントが自動的に判断します。上記のようなシンプルなプロンプトで MCP を開始するのに十分です。

Safari MCP サーバーを使用したエージェントとの会話は次のようになります。

あなた：バグレポートが来たんだけど — Safari のフライトページで何かが壊れているらしい。何が起きているか調べてくれる？

エージェント：もちろん、見てみますね。

エージェント：Safari のフライトページで2つの明確なバグを見つけました。両方修正しましょうか？

あなた：はい。他に Safari ユーザーに問題を引き起こしそうなものはある？

エージェント：はい、さらに2つ指摘すべきことがあります。結果表示のアニメーションが静かに壊れていて、API サーバーの起動ログが間違っています。両方とも対応しましょうか？

開始するには最初のリクエストだけで十分で、Safari MCP サーバーの助けを借りて、エージェントがそこから先を進めてくれます。

Safari MCP サーバーは完全にローカルマシン上で実行され、独自のネットワーク呼び出しは行いません。また、Safari 内の個人情報（AutoFill やその他のブラウザアクティビティなど）にアクセスすることもありません。ページコンテンツ、スクリーンショット、コンソールログをキャプチャする場合、そのデータは Apple ではなく、実行中のエージェントに直接送信されます。そこからデータがどうなるかは、使用しているエージェントとモデルによって異なります。ブラウザへのアクセスを許可するエージェントと同様に、信頼できるものだけを使用してください。

これを構築した理由

Web 向けの開発方法は、AI を使うものも使わないものも含めて多数あります。AI がワークフローの一部であるなら、このツールがさらに生産性を高めるのに役立つと考えています。そうでない場合でも、それで構いません。

このリソースを作成することで、エージェントがブラウザでの見え方や動作を理解するのを支援し、Safari でのテストとデバッグをこれまで以上に簡単にすることを目指しています。

試してみた場合や、MCP サーバーを初めて使用する場合は、ぜひご意見をお聞かせください。

オンラインで見つけてください：Saron Yitbarek は Bluesky、Jen Simmons は Bluesky / Mastodon、Jon Davis は Bluesky / Mastodon。問題が発生した場合は、WebKit バグレポート を提出してください。問題を報告することは本当に違いを生みます。