MCPサーバー

定義

Model Context Protocol（MCP）は、AIエージェントをツールやデータにつなぐためのオープンな標準です。MCPサーバーは、ページの移動、クリック、ページの読み取り、データベースへの問い合わせなど、自分にできることを一覧にして示す小さなプログラムで、エージェントは必要に応じてそのツールを呼び出します。サーバーはエージェントの設定に登録し、通常は起動コマンドと引数の形で書きます。

Chrome DevTools MCPは、Chromeのインスタンスをツールとして提供するサーバーです。これによって、ターミナルで動くエージェントがブラウザエージェントになります。

出典： Model Context Protocol: What is MCP? · Model Context Protocol specification: Tools

具体例

たとえば、名古屋の開発者がCodexを使っているとします。彼はその設定にMCPサーバーの項目を1つ追加します。npxでchrome-devtools-mcpを--autoConnect付きで起動する設定です。エージェントが起動すると、サーバーはページを開く、クリックする、フィールドに入力する、スクリーンショットを撮るといったツールを一覧にし、エージェントは作業しながらそれらを呼び出します。BROWSER-SETUP.mdの汎用的な設定を下に載せています。Codexのページでは、同じ引数をCodex独自の形式で示しています。

サーバーのプロセスが動いていることは、まだ証明ではありません。彼はエージェントに公開ページを開かせ、自分のChromeでタブが動くのを見届けます。そこで初めて、最初のディレクトリのフォームに取りかかります。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect", "--no-usage-statistics", "--no-performance-crux"]
    }
  }
}

ディレクトリへのローンチで重要な理由

ブラウザ用のMCPサーバーがなければ、コーディングエージェントはファイルを読み書きすることしかできず、ディレクトリのフォームを埋めることはできません。サーバーは信頼の境界でもあります。接続したブラウザを操作するので、どのChromeにつなぐか、どう起動するかによって、エージェントがどこまで届くかが決まります。

LaunchRepoでの扱い

リポジトリには、chrome-devtools-mcp用の汎用的なMCPサーバーの設定が記載されています。既存のChrome 144以降には--autoConnectを、ローカルポート上の専用プロファイルには--browserUrlを使います。この設定をどこに書くかはエージェントによって異なります。Claude Code、Codex、Cursorと、ほかの6つのエージェントにはそれぞれ独自の設定場所があり、このサイトの各ページで説明しています。npxにはNodeとnpmが必要で、セットアップ後はテスト済みのパッケージバージョンに固定するべきです。サーバーのプロセスが動いているだけでは、表示中のタブが実際に動くまで何の証明にもなりません。

さらに詳しく

コーディングエージェントをChromeに接続する →

サーバーの設定をどこに書くか、Chromeに接続する2つの方法、そしてエージェントが本当にあなたのブラウザを操作していることを証明するテストを説明しています。

関連用語

Chrome DevTools Protocol

Chromium系ブラウザのリモート操作用インターフェース。ローカルのデバッグポートを通じて、プログラムがタブを調べて操作できます。

AIコーディングエージェント

プロジェクト内でファイルを読み書きし、コマンドを実行し、ツールを呼び出すモデル駆動のアシスタント。Claude Code、Codex、Cursorがその例です。

ブラウザエージェント

ウェブブラウザを操作するエージェント。ページを移動し、読み、フォームを埋め、クリックします。単独の製品の場合も、ブラウザツールを備えたコーディングエージェントの場合もあります。

すべての用語 →