Gemini CLI、BrowserMCP、Playwright を使用して UI テストを自動化する

1. はじめに

ウェブアプリケーションのテストは面倒な作業になることがあります。従来の UI テストは、脆弱性との戦いのように感じられることがよくあります。複雑なスクリプトの作成、脆弱な CSS セレクタや XPath セレクタの管理、シンプルなユーザーフローの検証のために複雑な手順を踏む必要が生じます。

しかし、テストする内容を自然言語でエージェントに伝えるだけで、エージェントがそれを実行してくれるとしたらどうでしょうか？

この Codelab では、Gemini CLI と BrowserMCP などのマルチモーダルツールを使用する方法について説明します。自然言語を使用して自動 UI テストを作成して実行する方法について説明します。この Codelab では、UI テストのフレームワークとツールに関する予備知識は必要ありません。

ラボの内容

Model Context Protocol（MCP）の概要とその重要性。
BrowserMCP を使用して AI エージェントがウェブブラウザを制御する方法。
Gemini CLI から自動 UI テストを実行する方法。
エージェントのスキルとそのメリットについて理解する。
スキルを使用して Playwright を使用するようにエージェントをトレーニングする。
Google Chrome DevTools MCP とスキルを組み合わせて活用します。
Antigravity Browser Subagent の概要。
ブラウザ制御のその他のユースケース。

演習内容

開発環境をセットアップします。
テストが必要なデモアプリケーションを確認します。
Gemini CLI を使用して、BrowserMCP 経由でアプリケーションを操作します。
エージェントスキルを使用して、Playwright の使用方法をエージェントに教えます。

2. 前提条件

すばらしい機能を紹介する前に、必要なものがすべて揃っていることを確認しましょう。

この Codelab では、Gemini CLI、MCP ツール、エージェントスキル、React デモアプリケーションを使用します。

ツール

このラボは、次のものが揃っていることを前提としています。

Chrome ブラウザ
Node.js
Gemini CLI
Git

Gemini CLI を使用するには、Google で認証する必要があります。この方法はいくつかありますが、「Google でログイン」オプションを使用することをおすすめします。このオプションには、Gemini の使用量に対する無料割り当てが大幅に用意されており、Google Cloud プロジェクトは必要ありません。この Codelab に沿ってこのオプションを使用する場合、費用は発生しません。（Gemini API キーがすでにある場合は、代わりにそれを使用してもかまいません）。

この手順は、Linux（または WSL）または macOS 環境で作業していることを前提としています。Windows を使用している場合は、WSL を使用して手順に沿って操作できます。

（次のことに注意してください。

BrowserMCP は Google Cloud Shell から動作しません

（同じマシンで実行されているローカルブラウザにのみ接続するため）。

開発環境をセットアップする

GitHub にデモリポジトリを作成しました。これには、UI テストに使用できるサンプルアプリケーションが含まれています。ローカルターミナルから次のコマンドを実行して、クローンを作成します。

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

デモアプリを起動するための環境を簡単に設定できるように、Makefile が用意されています。これを実行して環境を初期化しましょう。

make install

# Or if you don't have make
npm install --prefix demo-app

3. デモアプリケーション

本日テストするアプリは、セキュリティテレメトリーを管理するための未来的なダークテーマのダッシュボードである The Dazbo Omni-Dash です。（はい、バイブコーディングされています）。

このアプリが推奨される理由

これは、次のような現実的なテストサーフェスを提供するために構築されています。

モック認証: 特定の認証情報を必要とするログインフロー。
動的コンテンツ: リアルタイムデータをシミュレートするテレメトリーカードとセキュリティログ。
インタラクティブな状態: ユーザーの操作に応じて変化するナビゲーションメニューとフォーム入力。
最新のテクノロジー: React と Vite で構築され、高速でレスポンシブなエクスペリエンスを実現します。

アプリを起動する

アプリケーションを開始するには、次のコマンドを実行します。

make dev

# Or if you don't have make
npm run dev --prefix demo-app

開発用サーバーはすぐに起動し、アプリは http://localhost:5173 で利用できるようになります。

リンクをクリックするだけで、ブラウザでアプリケーションを開くことができます。このプロセスはターミナルで実行したままにしておきます。以降のターミナルコマンドは、別のターミナルセッションで実行します。

4. UI テストの課題

従来の UI テストは、正しく行うのが非常に難しく、保守もさらに困難です。一般的な課題は次のとおりです。

テストの「不安定さ」: タイミングの問題、競合状態、アセットの読み込みの遅延が原因で、1 分後に合格したテストが次の 1 分後に不合格になる。
脆弱なセレクタ: 特定の DOM 構造（div > div > button など）に依存しているため、UI のわずかな変更で壊れてしまい、スクリプトのメンテナンスが頻繁に必要になる。
学習曲線が高い: 基本的なクリックを自動化するだけで、デベロッパーが複雑なドメイン固有の言語とフレームワーク固有の癖（Cypress、Selenium、Playwright）を習得する必要がある。
環境のパリティ: 再現が難しいアプリケーションの状態と、テストデータのクリーンアップのオーバーヘッドに苦労しています。

実装ではなく意図に焦点を当てたテスト方法が必要です。

5. MCP の活用

Model Context Protocol（MCP）は、AI モデルとエージェントが外部のツール、API、データとやり取りできるようにするオープンスタンダードです。モデルとエージェントがアクセスできるツールを見つけて実行できるようにするユニバーサルアダプタのようなものです。

従来、大規模言語モデル（LLM）を外部データやツールと統合するには、デベロッパーが新しいデータソースごとにカスタムのハードコードされた API 接続を記述する必要がありました。これにより、新しいモデルやツールが追加されるたびにメンテナンスの負担が増大する「M x N」統合問題が発生していました。Model Context Protocol（MCP）は、これらの機能をオーケストレートするための特定のコードを記述する必要をなくすことで、この問題を解決します。複雑な実行ワークフローを明示的にコーディングする代わりに、LLM を使用してユーザーの自然言語リクエストを解釈し、使用するツールを動的に推論できます。

ユーザーが自然言語コマンド（「localhost:5173 に移動し、admin としてログインして、送信ボタンをクリックして」など）を発行すると、LLM は利用可能な機能を見つけ、特定のツールを呼び出すための構造化されたリクエストを生成します。MCP クライアントはトランスレータとして機能し、このリクエストを指定された MCP サーバーに転送します。MCP サーバーはアクションを実行するか、データを取得してコンテキストをモデルに返します。これにより、デベロッパーが特定の実行パスをハードコードしなくても、AI が自律的に動作できるようになります。

MCP は、AI アプリケーションの「USB-C」とよく言われるユニバーサル標準を作成するため、大規模な既製の再利用性を実現します。デベロッパーは MCP サーバーを一度構築するだけで、MCP 互換の AI ホストはすぐに接続できるため、M x N 統合の問題を解消できます。プラットフォームごとにカスタム API ブリッジを構築する必要がなくなり、GitHub、Slack、データベースなどの一般的なサービス向けに事前構築されたオープンソースの MCP サーバーのエコシステムを活用して、エージェントワークフローに直接接続できるようになりました。このモジュール式のプラグアンドプレイアーキテクチャにより、後で LLM プロバイダを切り替えたり、ツールをアップグレードしたりしても、コア統合インフラストラクチャは完全に変更されません。

6. BrowserMCP による自動化

BrowserMCP とは

これが本日使用する最初のツールです。BrowserMCP は、ウェブブラウザを操作するために必要な「目」と「手」を AI エージェントに提供する MCP サーバーです。簡単に言うと、ブラウザに対する人間の操作を模倣します。オープンソースであり、GitHub リポジトリはこちらで確認できます。BrowserMCP のメインドキュメントはこちらをご覧ください。

主な機能は次のとおりです。

URL に移動できます。
DOM を検査できます。
ボタンをクリックしたり、フォームにテキストを入力したりできます。
ドラッグ＆ドロップできます。
ブラウザコンソールログを読み取ることができます。
高速: 自動化はローカルマシンで行われます。

ブラウザ MCP のインストール

BrowserMCP を使用するには、次の 2 つの操作を行う必要があります。

BrowserMCP 拡張機能を Chrome（または Chromium ベースのブラウザ）にインストールします。
エージェントの MCP サーバーを構成します。

拡張機能をインストールするには、こちらの手順に沿って操作してください。この処理には数秒しかかかりません。インストールが完了したら、拡張機能の [接続] をクリックして、現在のタブをエージェントが制御できるようにします。（現在のタブは、デモアプリケーションが実行されているタブにしてください）。

次に、実際の BrowserMCP サーバーをクライアントに追加する必要があります。Gemini CLI では、これは非常に簡単です。拡張機能をインストールするだけです。

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

BrowserMCP を使用したテスト

ここからがマジックです。まず、新しいターミナルセッションで Gemini CLI を起動します（gemini を実行します）。（デモアプリケーションは最初のターミナルセッションで実行されていることを思い出してください）。Gemini CLI 内で /mcp を実行して、正しくインストールされていることを確認します。次のようなツールの一覧が表示されます。

デモアプリをまだ起動していない場合は、ここで起動します。

make dev

Chrome ブラウザでアプリを開き、そのタブで BrowserMCP 拡張機能を接続する必要があります。run コマンドのリンクにアクセスします。次に、BrowserMCP 拡張機能のアイコンをクリックし、[Connect] をクリックします。

これで、Gemini CLI を使用してテストを実行できます。次のプロンプトをコピーして Gemini CLI に貼り付けます。

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Gemini CLI は、まずデモアプリケーションが指定されたポートで実行されていることを確認します。次に、ツールが実行する予定のアクションを確認するよう求めるメッセージが表示されます。

このセッションで Gemini CLI がすべての BrowserMCP ツールを実行できるようにします。ブラウザに戻ると、自動化された操作が実行されます。

上記のプロンプトに関する注意点は次のとおりです。

まず、アプリケーションがすでにログインしている場合は、エージェントにログアウトを指示します。「Exit Gateway」などの特定のテキストをクリックするようエージェントに指示する必要はありません。クリックする場所を判断できるほどスマートです。
ログインしてメインページをレンダリングした後、エージェントはテレメトリー情報をキャプチャします。この場合も、特定のタイルを探すことや特定の単語を照合することをエージェントに指示する必要はありません。そのため、このページに表示される情報を後で拡張または変更しても、このプロンプトは引き続き機能し、出力は引き続きマークダウンテーブルにキャプチャされます。

便利ですよね。

BrowserMCP はこれで完了です。ブラウザで Disconnect します。

7. スキルと Playwright を使用した自動化

BrowserMCP の制限事項

BrowserMCP は優れていますが、いくつかの制限があります。次に例を示します。

BrowserMCP 拡張機能が接続された既存のブラウザセッションが必要です。（新しいセッションは生成されません）。
Chromium 以外のブラウザはサポートされていません。
MCP サーバーが実行されているのと同じマシンで、別のブラウザプロセスを実行する必要があります。
ローカルファイルシステムを操作することはできません。たとえば、スクリーンショットの証拠となるローカルファイルを作成したり、ダウンロード可能な PDF などのウェブアプリケーションからファイルをダウンロードして保存したりすることはできません。
非決定的です。ユーザーが実行するように指示したアクションを実行しようとしますが、予期しないポップアップなどのローカル状態によってインタラクションが中断される可能性があります。
「ヘッドレス」オペレーションはサポートされていません。つまり、実際のブラウザウィンドウなしで CI/CD パイプラインで実行することはできません。

Playwright

Playwright は、より洗練されたツールです。これは、確立されたオープンソースのブラウザ自動化およびテストフレームワークです。BrowserMCP ではできない多くの操作（上記の箇条書きのすべてを含む）を行うことができます。

複雑で信頼性が高く、繰り返し可能なテストシナリオの実行に適しています。長時間実行されるセッションの処理や、複数の独立したセッションの並行実行に特に適しています。

ただし、このような追加機能には、学習曲線が急になるというデメリットがあります。

スキル

幸いなことに、Playwright の使い方を直接学ぶ必要はありません。代わりに、エージェントスキルを使用できます。

では、エージェントスキルとは具体的にどのようなものなのでしょうか。これは、AI エージェントが特定の処理を行う必要があるときに渡すことができる、ドメインの専門知識を厳密にパッケージ化したバンドルと考えてください。特定のタスクに合わせて調整された手順、ベストプラクティス、場合によってはヘルパースクリプトが含まれています。

ここで、プログレッシブディスクロージャーという非常に巧妙な手法が登場します。考えられるすべての API ドキュメントとテストフレームワークのルールを LLM の初期システムプロンプトに詰め込むと、コンテキストウィンドウが消費され、トークンが大量に消費されます。エージェントは、実際に必要なときにのみスキルを読み取ります。ベースラインのコンテキストを簡潔に保ち、詳細な「方法」をジャストインタイムで取得します。はい。スキルには、特定の MCP サーバーを活用してジョブを完了する方法の手順を組み込むことができます。

映画「マトリックス」のシーンを思い出してください。エージェントが問題を見て、Playwright を知る必要があることに気づき、スキルをダウンロードすると、突然「カンフーを知っている」と言います。Boom. 即座に専門家。

スキルについて詳しくは、以下をご覧ください。

Playwright にスキルが最適な理由

ここでスキルを使用するのは良い選択です。Playwright は非常に強力ですが、構文が難しい場合があります。エージェントに Playwright スキルを付与することで、LLM が古い構文を幻覚したり、脆弱なセレクタを記述したりする心配がなくなります。Playwright を正しく使用する方法をまとめた、信頼できるハンドブックを提供しています。

Playwright CLI とその関連スキルを使用します。

この方法では、Playwright CLI をローカルにインストールし、エージェントがそれを利用するために必要な知識を提供します。誤解を避けるため、Playwright MCP サーバーはインストールしていません。

インストール中

まず、オープンソースの Microsoft Playwright CLI をインストールしましょう。まだ行っていない場合は、/quit`` と入力して Gemini CLI を終了します。次に、ターミナルで次の操作を行います。

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

スキルを追加しましょう。このコマンドを実行すると、GitHub から Gemini スキルフォルダにスキルサブフォルダが直接ダウンロードされます。

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

これでテストできるようになりました。

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

これにより、指定した URL でブラウザセッションが起動します。

また、Gemini が「ヘッド付き」モード（UI が表示されるモード）で Playwright を使用できるようにしたいと考えています。しかし、スキルは Gemini にその方法を伝えていません。そこで、Core セクションの ~/.gemini/skills/playwright-cli/SKILL.md に次の行を追加しました。

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Playwright を使用したテスト

以前と同様に、アプリケーションを起動する必要があります（まだ実行されていない場合）。最初のターミナルセッションで次の操作を行います。

make dev

次に、別のターミナルセッションで、エージェントが使用するツールを混同しないように、BrowserMCP を一時的に無効にします。Gemini CLI を再起動して、次のコマンドを実行します。

/mcp disable browsermcp

次に、Gemini に Playwright を使用してアプリケーションに移動するよう指示します。ただし、BrowserMCP とは異なり、最初にブラウザを起動する必要はありません。Playwright はローカルプロセスでそれを実行します。

Gemini CLI に次のプロンプトを入力します。

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

（Gemini CLI は、ツールを実行する前に常に権限を求めます）。

この違いは何ですか？

ブラウザを最初に起動する必要はありませんでした。
ブラウザ拡張機能を起動して接続する必要はありませんでした。
エージェントにログオフを指示する必要はありません。テストは「クリーン」なセッションからインスタンス化されます。
スクリーンショットを撮ってローカルファイルとして保存できます。

しばらくすると、output フォルダに dashboard.png ファイルが表示されます。

Gemini CLI でツール呼び出しが実行されますが、ブラウザ UI は表示されません。これは、Playwright がデフォルトで「ヘッドレスモード」で実行されるためです。

ただし、この修正されたプロンプトで再実行すると、UI も表示されます。

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Gemini CLI の出力は次のようになります。

いかがでしたか？

8. Chrome DevTools MCP もあります

Chrome DevTools は、ウェブ開発とデバッグを目的として Chrome ブラウザに組み込まれているウェブデベロッパーツールセットです。この問題は以前から発生しています。Chrome で [その他のツール] -> [デベロッパーツール] を開いたときに操作できるコンソールです。

しかし、現在は独自の MCP サーバーを備えています。これは、昨年 Gemini CLI からのブラウザ自動化を検討したときには存在しませんでした。しかし、現在では、ブラウザに何もインストールせず、ローカル CLI をインストールしなくても、BrowserMCP でできることのすべてと、Playwright でできることのほとんどを実行できます。

さあ、やってみましょう。

現時点では、Google Cloud Shell で動作することを確認しています。このパートでは、Google Cloud コンソールで Google Cloud Shell を使用します。

コンソールを開き、Cloud Shell セッションを開きます。次の操作を行います。

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

次に、Chrome 実行可能ファイルを Cloud Shell にインストールする必要があります。

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

最後の手順として、Chrome DevTools MCP サーバーに Chrome 実行可能ファイルがある場所を伝える必要があります。これを行うには、MCP サーバー構成で executable-path オプションを設定して headless にします。これを行うには、ファイル ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json を編集します。

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

これで、これで準備完了です。Cloud Shell から gemini を起動し、以前と同様に /mcp list コマンドを使用して MCP サーバーが実行されていることを確認します。

最後に、プロンプトを使用してテストします。

少し違う方法でやってみましょう。今回は、Gemini CLI にデモアプリケーションを実際に起動して接続するように指示します。

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

通常どおり、MCP サーバーの実行を許可するよう求められます。また、スキルを有効にしようとしていることもわかります。この拡張機能には、MCP サーバーと、MCP サーバーの最適な使用方法をエージェントに指示するスキルが含まれています。すばらしいですね！

数秒後、Gemini CLI は結果をテーブルに表示し、スクリーンショットを保存します。Cloud Shell からスクリーンショットをダウンロードして、問題がないことを確認します。

9. Antigravity Out of the Box で実現できます。

Google Antigravity には、Playwright CLI と同様の機能を提供する Browser Subagent が含まれています。Antigravity の Gemini に URL をインタラクティブにスピンアップするよう相談すると、このサブエージェントが自動的にスピンアップされます。

このサブエージェントは、ユーザーのハイレベルな目標（「ログインフォームが機能するかどうかを確認する」など）を受け取り、スクリーンショットと DOM を介してページレイアウトを視覚的に分析し、クリックとキーストロークを自分で判断します。これは、人間と同じようにウェブをナビゲートする視覚的なマルチモーダル AI です。そして何より便利なのは、実行したすべての操作を自動的に動画で録画し、スクリーンショットを撮って、ローカルワークスペースに視覚的な証拠として保存します。Antigravity は、この視覚的な証拠を「アーティファクト」と呼んでいます。

WSL ユーザー向けの注: Antigravity でブラウザエージェントを動作させるのは少し面倒です。 動作させることはできましたが、この環境ではサブエージェントの動作が不安定で信頼性が低いことがわかりました。これが、私が Playwright CLI を気に入っている理由の一つです。

10. ブラウザ自動化のその他のユースケース

ブラウザの自動化は、金曜日の午後のデプロイ前にログインボタンが機能することを確認するだけではありません。LLM をブラウザに直接接続できることに気づくと、自社開発のエージェントプロジェクトの新しい世界が開かれます。

独自の AI エージェントを構築する場合は、BrowserMCP や Playwright CLI などのツールを使用して、次のような方法で重い処理を行うことができます。

パーソナルリサーチアシスタント: 特定の URL をエージェントに指定してトピックの調査を依頼する場合を考えてみましょう。ただし、そのサイトではログインと複雑なメニューの操作が必要です。来週に壊れるカスタムウェブスクレイパーを作成する代わりに、エージェントにログインしてデータに移動し、データを要約するように指示します。
「Swivel-Chair」インテグレーター: API がない旧式のイントラネットシステムは、どの企業にもあります。システム A からデータを手動でコピーして、システム B のフォームに貼り付けるような作業です。ブラウザ自動化を備えたエージェントは、レガシーシステムの画面を読み取り、新しいシステムのフォームに入力するユニバーサルグルーとして機能します。
自動トリアージと修復: 午前 3 時にモニタリングシステムから P1 アラートが届きましたか？エージェントは、特定のダッシュボードの URL を自動的に開き、グラフやログを読み取り（マルチモーダルビジョン機能を使用）、概要を Slack チャンネルに直接投稿できます。これにより、インシデント発生時に貴重な時間を節約できます。

このアプローチの利点は、利用可能な API に制限されなくなることです。人間がブラウザでできることは、エージェントもできます。

11. まとめ

おめでとうございます！AI エージェントに実行してほしいことを平易な英語で伝えるだけで、自動化された堅牢な UI テストを構築して実行できました。脆弱な CSS セレクタや複雑な設定スクリプトは不要です。

学習した内容は以下のとおりです。

UI テストは苦痛を伴うものではありません。脆弱な DOM 実装ではなく、テストの意図に焦点を当てることで、メンテナンスのオーバーヘッドを大幅に削減できます。
Model Context Protocol（MCP）により、エージェントはツール、データ、環境にユニバーサルなプラグアンドプレイアクセスが可能になります。
BrowserMCP は、エージェント機能をローカルの既存の Chrome セッションに導入するための優れたツールです。
スキルと Playwright CLI により、反復可能で決定論的な自動化テストを新たなレベルで実現できます。これらはすべて、プログレッシブディスクロージャーによって実現されます。
Antigravity のブラウザサブエージェントは、自律型のマルチモーダルナビゲーションとアーティファクトの記録をすぐに利用できるようにすることで、さらに一歩進んでいます。

さあ、退屈な作業を自動化しましょう。

Useful Links

本日取り上げたツールとコンセプトについて詳しく知りたい場合は、以下のリソースをご覧ください。

Repo Code

agentic-ui-testing GitHub リポジトリ - この Codelab が役に立った場合は、リポジトリにスターを追加してください。

コアツールとフレームワーク

BrowserMCP GitHub リポジトリ
BrowserMCP のドキュメント
BrowserMCP Gemini CLI 拡張機能 - この Codelab が役に立った場合は、リポジトリにスターを追加してください。
Playwright
Google AI Studio
Chrome DevTools
Chrome DevTools MCP

エージェントのコンセプトとスキル

その他