AIアシスタントと外部データソースを接続するためのオープンプロトコルであるMCP（Model Context Protocol）。Anthropic社が提供する生成AI「Claude」に搭載されたClaude MCPの登場により、AIとチャット形式で会話をしながらWeb検索したり、ローカルフォルダを操作したりできることから注目を集めています。
先日Googleでは、ローカル環境で自然言語による対話やファイル操作、外部ツール連携などを実現する「Gemini CLI」。ローカルのGoogle ChromeブラウザとAI（LLM：大規模言語モデル）をつなぐ「Chrome MCP」の提供を開始しました。
そこで今回は、Gemini CLIでChrome MCPを使ってブラウザを操作してみました。本記事ではGemini CLIとChrome MCPの連携方法から使い方まで、実際の操作画面を用いて解説します。
Chrome MCPとは
Chrome MCP（Model Context Protocol for Chrome）は、ローカルのGoogle ChromeブラウザとAI（LLM：大規模言語モデル）をつなぐためのプロトコルです。MCPに対応したツールを使うことで、AIがWebブラウザを直接操作できるのが特徴です。
たとえばGemini CLIやOpen Interpreterといったツールでは、MCPを通じて次のような操作が可能です。
- 特定のWebページを開く
- 指定したボタンをクリックする
- ページ内のデータを取得して要約する
- 検索結果から条件に合うリンクだけを抽出して保存する
ユーザーが「◯◯の商品レビューを調べて一覧にして」と指示すれば、Gemini CLIがChrome上で検索を実行し、レビュー情報を自動で抽出・整理してくれます。
このようにChrome MCPは、AIに「見て」「探して」「動かして」という一連のブラウザ操作を任せるための土台となる技術です。
【Gemini CLI×Chrome MCP】でブラウザをチャットにて操作できる
Gemini CLIはGoogleが提供するコマンドラインツールで、自然言語による対話やファイル操作、外部ツール連携などを実現する開発者向けインターフェースです。
ローカル環境から大規模言語モデル（Gemini）にアクセスし、通常のチャット形式だけでなくコード補完など実践的なAI活用を支援します。またGemini CLIはMCP（Model Context Protocol）との連携も可能です。
Gemini CLIとChrome MCPを連携することで、自然言語による指示だけでGoogle Chromeを自動操作できるようになります。
たとえば「Googleを開いて東京の天気を調べて」といった自然な指示だけでブラウザが自動的に起動し、検索やクリック、入力などを実行します。
複雑なスクリプトを用意することなく、チャットベースでブラウザ操作を半自動化できるため、開発者や研究者だけでなく業務の効率化にも活用が期待されています。
Gemini CLI×Chrome MCPでブラウザを操作する方法
Gemini CLIとChrome MCPでブラウザを操作する際に必要な利用環境は以下の通りです。
- Node.jsのバージョン「18.19.0」および「pnpm/npm」
- Chrome/Chromiumブラウザ
- Gemini CLIのインストール
Gemini CLIをまだ利用したことがない方は、事前に以下の記事を参考にインストールしてください。
Chrome MCPの利用環境を整える
はじめに以下のURLから最新のChrome拡張機能をダウンロードします。
https://github.com/hangwin/mcp-chrome/releases
GitHubより
表示内容にあるzipフォルダをクリックするとダウンロードできます。
次にChrome MCPをインストールします。ターミナルを立ち上げて、以下のコマンドを実行してください。
npm install -g mcp-chrome-bridge
GitHubより
上記画面のように表示されていればインストール完了です。続いて、mcp-chrome-bridgeの実行ファイルがどこにあるのか調べます。以下のコマンドを実行してください。
npm list -g mcp-chrome-bridge
上記のようにおおよその位置が表示されます。
次にデスクトップからフォルダを開き、検索欄へ「mcp-server-stdio.js」と入力して具体的なパスを調べます。
「mcp-server-stdio.js」はMCPでChromeを操作するために「中継サーバー」なので、Gemini CLI設定にこのファイルのパスを指定する必要があるのです。
Gemini CLIにMCP設定を追加する
続いて、Gemini CLIでChrome MCPへアクセスできるようMCP設定を追加します。まず以下のパスを参考に「.gemini」フォルダへアクセスします。
C:\Users\<あなたのユーザー名>\.gemini\
GitHubより
「.gemini」フォルダ内で「config.json」ファイルを作成し、以下のコードを入力します。
{
"mcpServers": {
"chrome-mcp": {
"command": "npx",
"args": [
"node",
"C:/Users/ユーザー名/AppData/Roaming/npm/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
]
}
}
}「"node",」に続くパスは、先ほど取得した「mcp-chrome-bridge」の実行ファイルのパスを指定します。
続いて「settings.json」ファイルを以下の内容に書き換えます。
{
"theme": "Xcode",
"selectedAuthType": "oauth-personal",
"mcpServers": {
"chrome-mcp": {
"command": "npx",
"args": [
"node",
"C:/Users/ユーザー名/AppData/Roaming/npm/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
]
}
}
}これでMCP設定完了です。
Chrome MCP Serverの拡張機能を追加する
先ほどダウンロードしたChrome MCPの拡張機能を追加します。まずは以下のURLへアクセスしてください。
Chrome拡張機能より
表示画面の右上にある「デベロッパーモード」のスイッチをクリックして「オン」にします。そして左上にある「パッケージ化されていない拡張機能を取り込む」をクリックし、先ほどダウンロードしたChrome MCP Serverの拡張機能フォルダを指定してください。
Chrome拡張機能より
すると上記のように拡張機能が表示されます。これで準備が整いました。
Gemini CLIでChrome MCPを使って検索してみよう
準備が整ったので早速使っていきましょう。Gemini CLIを実行したい特定ファイルに移動して「gemini」コマンドを実行します。
続いてチャットの入力欄に「/mcp」と入力・実行してください。
上記はMCPサーバー名「chrome-mcp」が正しく起動しており、23個のツールが利用可能という意味です。無事MCPサーバーが使えることを確認したら、チャット欄にブラウザ操作したい内容を入力します。
今回は「Googleを開いて「東京 天気」と調べてください。」と入力・実行してみます。その結果が以下の通りです。
実行過程でユーザーに許可を求める画面が表示されます。都度その内容を確認したい場合は「Yes, allow once」を選択。もしMCPの処理を実行する限り全て実行するよう設定したい場合は「Yes, always allow tool ~」を選択してください。
上手くいけば上記のようにチャットの内容通りにブラウザを操作できるはずです。
Gemini CLIとChrome MCPの通信うまくいかないときの対処法
Gemini CLIでChrome MCPを利用する際、Chrome拡張との通信が一瞬失敗したり「Waiting for user confirmation...」のまま固まることがあります。
そんなときはMCPサーバーを「別ウィンドウ」で起動し、通信状態を安定させる方法が有効です。 Gemini CLIとは別のターミナルを開き、以下のコマンドを実行してください。
node "%APPDATA%\npm\node_modules\mcp-chrome-bridge\dist\mcp\mcp-server-stdio.js"これによりGemini CLIとの接続が安定し、チャットからのChrome操作コマンドがリアルタイムで正しく実行されるようになります。
