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
官網介紹 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