Browser MCP with Gemini CLI 小記

 

Browser MCP with Gemini CLI 小記

OS: macOS 14.3

gemini-cli: 0.1.21

在 x 上面看到國外朋友發的文章, 使用 Browser MCP 加上 Gemini CLI 進行 Web UI Test

• 原文 https://medium.com/google-cloud/creating-an-automated-ui-test-of-your-web-app-in-seconds-with-gemini-cli-and-browsermcp-09cf4afb8940

今天來測試 Browser MCP with Gemini CLI

由於 Gemini CLI 更版速度很快, 建議先確認目前 Gemini CLI 是否是最新版本

Gemini CLI 升級或是 MCP 設定的資訊, 可以參考之前的文章

• https://sakananote2.blogspot.com/2025/07/gemini-cli-with-mcp.html

Browser MCP

• 官網 https://docs.browsermcp.io/welcome

• 官網介紹 With Browser MCP, you can use MCP to automate your browser so that AI applications can navigate the web, fill out forms, and more.

這次的實作我是在專案目錄內建立 .gemini/settings.json

內容如下

{

  "mcpServers": {

    "browsermcp": {

      "command": "npx",

      "args": ["@browsermcp/mcp@latest"]

    }

  }

}

• 這邊使用的方式為 npx, 故機器上面要安裝 node.js  (不過 Gemini CLI 也是 node.js 安裝, 應該不會碰到相依性問題)

使用 gemini 指令啟動 Gemin CLI

• 這個時候可以觀察到有顯示 1 MCP server

可以使用 /mcp 觀察相關功能

Browser MCP 使用 Chrome 瀏覽器, 藉由 Extension 來控制瀏覽器, 這樣真的方面很多應用

所以接下來就來安裝 Browser MCP 的 Chrome Extension, 

網址如下 https://browsermcp.io/install 

點選 Add to Chrome 加入到 Chrome

接下來會出現 歡迎訊息

點選 Get Started - 會引導到官方網站, 可以參考更多訊息

接下來開啟一個 Chrome 視窗或是分頁

點選 Browser MCP 擴充功能

點選 連接

這個時候瀏覽器就會顯示 Browser MP 已開始為這個瀏覽器偵錯

接下來我們回到 Gemini CLI

嘗試對他下指令

請幫我開啟 gdg taipei 網頁

• 這個時候 Gemini CLI 會進行搜尋來確認 gdg taipei 網頁

• Browser 會要求存取權限來開啟網頁

Chrome 瀏覽器這邊已經開啟網頁

Gemini CLI 這邊會顯示相關訊息

接下來可以進行相關詢問, 例如 請他列出 8 月份之前已經舉辦的活動

要求存取 COSCUP 活動資訊

• 這邊還可以觀察到瀏覽器上面還有游標進行點擊動作

詢問 browser mcp 功能

✦ 好的，沒有問題。

  「Browser MCP」是我用來操作網頁的一套工具，它讓我能夠像真人一樣與網站互動。主要支援以下幾種類型的功能：

   1. 瀏覽與導航 (Navigation):

       * 開啟網頁: 我可以根據您提供的網址（URL）開啟任何網站。

       * 上一頁/下一頁: 我可以在瀏覽紀錄中後退或前進。

   2. 頁面互動 (Interaction):

       * 點擊: 我可以點擊頁面上的任何元素，例如按鈕、連結、圖片等。

       * 輸入文字: 我可以在文字輸入框（如搜尋框、表單欄位）中打字。

       * 選取選項: 我可以從下拉式選單中選擇一個或多個項目。

       * 滑鼠懸停: 我可以將滑鼠游標移動到某個元素上，以觸發彈出式選單或提示。

   3. 資訊獲取 (Information Gathering):

       * 畫面快照/截圖: 我可以擷取目前網頁的畫面，讓我「看見」頁面上的內容，就像您剛剛要求我做的那樣。

       * 讀取頁面內容: 我可以分析頁面的結構和文字，以理解其佈局和資訊。

       * 取得開發者資訊: 我可以獲取瀏覽器主控台的紀錄，這在解決網頁問題時很有用。

  簡單來說，透過這些工具，我可以幫您完成大部分在瀏覽器中手動操作才能完成的任務，例如搜尋資訊、填寫表單、在網

  站上導航等等。

真是方便的工具, 如果不使用 Browser MCP 直接把連線斷開就可以

感覺又離 AI 前進一步

~ enjoy it

References

• https://medium.com/google-cloud/creating-an-automated-ui-test-of-your-web-app-in-seconds-with-gemini-cli-and-browsermcp-09cf4afb8940 

• https://sakananote2.blogspot.com/2025/07/gemini-cli-with-mcp.html

• https://docs.browsermcp.io/welcome

Veo 3 on Vertex AI Media Studio 小記

Veo 3 on Vertex AI Media Studio 小記

Veo 3 已經在 7 月底 GA, 

故今天來測試 Veo 3 在 Vertex AI Media Studio 操作

參考官方文件

• https://cloud.google.com/vertex-ai/generative-ai/docs/video/overview?hl=zh-tw

點選 "在Vertex AI Media Studio 中使用 Veo"

• 這個時候會被帶入到 GCP Project 然後切換到 Vertex AI Studio

• 此時請注意畫面上方的 Project 是否是要使用的專案

如果尚未啟用 API 會出現提示

可以點選 同意並繼續 啟用 Vertex AI API 以及 Cloud Storage

在畫面中間會看到四個圖示

分別是

• 提交文字提示來產生圖片

• 以不同語音 (包括您的聲音) 合成語音

• 提交文字提示來生成 30 秒的音樂

• Submit a text prompt to generate videos Or upload an image for more actions. (提交文字來產生影片)

我們來測試使用文字提示生成影片

右方相關設定, 這邊決定使用哪個模型 / 影片長度 / 解析度 以及其他的選項

輸入提示來產生影片, 例如 "虎斑貓在貓走道上悠閒漫步"

可以挑選喜歡的影片進行下載, 或是重新建立

另外要注意的是

預設是不會建立 GCS 輸出目錄

但是如果建立也指定輸出目錄

每次建立的影片會自動全部儲存到該 GCS Bucket

如果不需要影片記得刪除, 以免浪費錢 :) 

另外也有一種可愛的用法就是上傳圖片來建立動作

感覺離 AI 又更進一步

~ enjoy it

References

• https://cloud.google.com/vertex-ai/generative-ai/docs/video/overview?hl=zh-tw

Gemini CLI with MCP 小記

Gemini CLI with MCP 小記

OS: macOS 14.3

gemini-cli 0.1.12

今天要來實作 Gemini CLI 使用 MCP

首先 可以參考 Gemini cli 官方文件 裡面有提到 MCP 相關設定

• https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md

• You can configure MCP servers at the global level in the ~/.gemini/settings.json file or in your project's root directory, create or open the .gemini/settings.json file. Within the file, add the mcpServers configuration block. 所以相關的設定檔會放在 settings.json 內, 就看是要放在家目錄的全域設定檔, 還是在該專案目錄套用

如果 gemini cli 還沒安裝 MCP

在執行 /mcp 指令的時候, 會被提示去參考官方文件

這次的實作我是在專案目錄內建立 .gemini/settings.json

內容如下

{

  "mcpServers": {

    "google-maps": {

      "command": "npx",

      "args": [

        "-y",

        "@modelcontextprotocol/server-google-maps"

      ],

      "env": {

        "GOOGLE_MAPS_API_KEY": "<YOUR_API_KEY>"

      }

    }

  }

}

• 將啟用的 Google Maps API Key 替代上方的 <YOUR_API_KEY>

可參考之前的筆記 - vscode insiders with google-map mcp 小記

• https://sakananote2.blogspot.com/2025/03/vscode-insiders-with-google-map-mcp.html

• 這個是去呼叫 Google Map

重啟執行 Gemini CLI

就可以在介面中看到相關資訊與使用 MCP

 

一樣, 在執行功能的時候, 會要求允許相關執行權限

最後輸出結果參考

✦ 好的，我找到了一些松山車站附近評價很高的餐廳：

   * Balle Balle Indian Restaurant & Bar 巴雷巴雷 印度餐廳 (評分: 4.9)

   * 犟餐酒館 (評分: 4.8)

   * À POINT STEAK & BAR (評分: 4.7)

   * JK STUDIO 法式餐酒館 (台北信義店) (評分: 4.7)

   * Cochon (評分: 4.7)

   * Modern Toilet Theme Restaurant (評分: 4.7)

   * MUSA Bistro《芭花家餐酒館》 (評分: 4.7)

   * de nuit (評分: 4.7)

   * Top One Pot Xinyi Restaurant (評分: 4.7)

   * Restaurant Page 頁小館 (評分: 4.6)

   * Mayur Indian Kitchen Restaurant (MIK-2) (評分: 4.6)

   * Tutto Fresco翡冷翠義式餐廳 (評分: 4.6)

   * 1001 Nights Kitchen Taipei (評分: 4.5)

   * Pikul Xinyi Xiangshan Branch (評分: 4.5)

   * The Tavernist (評分: 4.5)

   * Le Beaujour 芃卓-高訂宴會服務 (評分: 4.5)

   * 85TD (評分: 4.4)

   * 30 thirty (評分: 4.4)

   * LAY BACK (評分: 4.4)

   * The Ukai Taipei (評分: 4.3)

  如果您想了解其中任何一家餐廳的更多資訊（例如地址、電話號碼或營業時間），請告訴我。

==== 同場加映 gemini cli 升級 ====

Gemini CLI 最近改版的速度很快, 記錄一下 升級方式

觀察目前 gemini cli 最新版本

% npm  view  @google/gemini-cli version

0.1.12

觀察目前安裝的 gemini cli 版本 (全域)

% npm list -g @google/gemini-cli

/opt/homebrew/lib

└── @google/gemini-cli@0.1.9

• 目前為 0.1.9

將 gemini cli 升級到最新版本

% npm  install -g  @google/gemini-cli@latest

=====================

感覺又邁進一步

~ enjoy it

References

• https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md

• https://sakananote2.blogspot.com/2025/03/vscode-insiders-with-google-map-mcp.html