how-to-install-chrome-mcp-for-gemini.md

Chrome devtools MCPインストール手順

生成AIを使った出馬表取得方法として、Chrome Devtools MCPを使ったやり方を説明した
本手順では、そのMCPをインストールするまでの手順の解説である

前提

以下のLLMツールを使用することを前提とする

gemini cli
Chrome

gemini cliでのインストール方法

0. nvmのインストール
- nvmとは？
- nvmのインストール方法
  - Windowsの場合
  - Linux/MacOSの場合
    - ✅ 方法①：公式インストールスクリプトを使う（推奨）
    - ✅ 方法②：macOS限定（Homebrewを使う）
1. node.js, npmのインストール
2. gemini cliのインストール
3. geminiの起動とログイン
- 3-1. gemini起動
- 3-2. ログイン
ゼロから作る競馬予想モデル・機械学習入門を公開しています

0. nvmのインストール

gemini cliを使うためには、node.jsとnpmが必要
Node.jsはJavaScriptをサーバーサイドで実行するためのランタイム環境で、npmはその環境で使うパッケージを管理するためのツール
なので、Node.jsはPythonインタプリタで、npmはPythonでいうpipに相当する

nvmとは？

nvmは、Node.jsのバージョンを簡単に切り替えられるツールで、プロジェクトごとに異なるNode.js（およびnpm）バージョンを使いたいときに便利
Pythonでいうpyenvに近い役割を果たす

OSSツールは頻繁にアップデートされるため、依存関係によって必要なバージョンが変わることがよくある
Node.jsやnpmも同様で、プロジェクトごとに異なるバージョンを使う必要が生じることがあるそのため、nvmを使ってNode.jsのバージョンを柔軟に切り替えられるようにしておくことは、将来的な開発や保守において非常に有用である

nvmのインストール方法

Windowsの場合

インストーラ入手
以下のサイトにアクセスして「nvm-setup.exe」を入手。2025年10月時点ではversion 1.2.2が最新なのでそれを入手

Releases · coreybutler/nvm-windows
A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows
github.com
インストーラ起動
特に設定を変える必要はないので、「Next」を盲目に連打(Emailの入手も不要)
以下の画面まで行けばOK
コマンドプロンプトを開き、以下のコマンドを実行

nvm --version

バージョン情報が表示されればOK
alt text

Linux/MacOSの場合

✅ 方法①：公式インストールスクリプトを使う（推奨）

ターミナルを開く
以下のコマンドを実行：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

インストール後、以下を .bashrc, .zshrc, または .profile に追加（必要に応じて）：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

設定を反映：

source ~/.bashrc   # または ~/.zshrc

nvmが使えるか確認：

nvm --version

✅ 方法②：macOS限定（Homebrewを使う）

Homebrewがインストールされていることを確認：

brew --version

nvmをインストール：

brew install nvm

.zshrc などに以下を追加：

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

設定を反映：

source ~/.zshrc

参考：Zennの手順解説、Qiitaの完全ガイド

1. node.js, npmのインストール

プロンプト/ターミナルを開いて以下を実行

nvm install 22.12.0
nvm use 22.12.0

以下になればOK
alt text

ここで一度プロンプト/ターミナルを閉じ、再度プロンプト/ターミナルを開き以下を実行

node -v
npm -v

以下になればOK
alt text

2. gemini cliのインストール

適当なプロジェクトフォルダまでコマンドプロンプト/ターミナルのカレントを移動
ここでは「E:\dev_um_ai\dev-um-ai\gemini_worker」とする
以下のコマンドを実行して、gemini cliをローカルにインストール

npm install @google/gemini-cli

以下の画面でインストールが始まり、
alt text

以下のフォルダ構成、以下の表示になっていればOK
alt text

3. geminiの起動とログイン

3-1. gemini起動

以下のコマンドでgeminiを起動

npx gemini

以下の表示になればOK
alt text

3-2. ログイン

認証方法選択
geminiを使うためには、①Googleアカウントでログイン、②Gemini API Keyの入力、③クラウド環境接続(法人向)のいずれかをする必要がある
今回はもっとも手軽なGoogleアカウントによるログインを行う
API Key使いたい、法人です！って人は、2番と3番を選択してEnterしましょう
それ以外の方は、①「Login with google」を選択してEnter
(デフォルトで①が選択されてる状態なのでなにも考えずにEnterでOK)
変なポップアップが出た場合は「許可」を選択
(Geminiを動かすNodeが権限上制限がある場合に表示されるものなので許可で問題なし)
ユーザ選択
ブラウザが立ち上がるのでログインするユーザを選択

以下の画面が表示されれば認証成功
コマンドプロンプト/ターミナルが実行可能になってることを確認
コマンドプロンプト/ターミナルに戻り、以下の入力可能状態になっていればOK
Geminiを試す
入力欄に何かを入力してEnterすると回答がくる
終了したい場合は「Ctrl+C」の連打か、コマンドプロンプト/ターミナルを閉じるでOK

Chrome devtools MCPのセットアップ

結論から言うと、geminiを使う場合はセットアップの必要なし

gemini_worker/.geminiフォルダ配下に「settings.json」ファイルがある。
ファイルの内容は以下

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx chrome-devtools-mcp@latest"
    }
  }
}

上記の設定をすることで、geminiを起動すれば自動的にChrome devtools MCPをローカルにインストールして起動してくれる

ゼロから作る競馬予想モデル・機械学習入門を公開しています

私はPythonを使った『ゼロから作る競馬予想モデル・機械学習入門』を公開しています。

競馬予想AIを分析するWEBアプリの作成、LightGBMを使った１着馬の分類モデル、オッズを使った回収率重視のLightGBMモデル、最近では深層学習を使った競馬予想AIの開発方法も解説したJupyter Notebookを公開しています。
ぜひ、今回を機にPythonで作る競馬予想AI開発にチャレンジしてみませんか？

公開場所はBookersになります。以下リンク先です。実際の動かし方は、Bookersを参照してください。