星期日, 8月 17, 2025

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


今天來測試 Browser MCP with Gemini CLI

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


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


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


星期三, 8月 06, 2025

Veo 3 on Vertex AI Media Studio 小記

Veo 3 on Vertex AI Media Studio 小記



Veo 3 已經在 7 月底 GA, 

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


參考官方文件


點選 "在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


星期六, 7月 19, 2025

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 小記


重啟執行 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