1. Mục tiêu

Bài viết hướng dẫn từng bước cách thiết lập và sử dụng Browser MCP, một công cụ giúp mô hình ngôn ngữ lớn (LLM) như ChatGPT hoặc Copilot tương tác trực tiếp với trình duyệt web thông qua các thao tác như truy cập trang web, điền form, click nút, trích xuất dữ liệu...

Cụ thể, sau bài viết này, bạn sẽ:

 

2. Chuẩn bị

- Phần mềm Visual Code (hoặc Cursor, Claude Desktop, Windsurf)

- Browser Edge (Hoặc Chrome)

- Github Copilot (bản Free cũng được)

- Cài đặt npm trên máy tính (sẽ sử dụng lệnh npx)

3. Cài đặt Browser MCP

3.1. Cấu hình VSCode

- Tạo một folder (workspace) mới, chuyển vào folder này. 

- Mở 'View > Command Palette', sau đó nhập (hoặc chọn) 'MCP: Add Server ... '

- Ở cửa sổ 'Choose the type of MCP server to add', chọn 'Command (stdio) Run a local command ... '

- Nhập lệnh sau vào cửa sổ 'Command to run...': 

npx @browsermcp/mcp@latest

- Đặt 'Server ID' tùy chọn. Ở cửa sổ 'Choose where to save the configuration', chọn 'Workspace Settings' (Có hiệu lực trong folder / workspace hiện tại)

- Tệp tin .vscode/mcp.json sẽ được tạo ra ở trong folder hiện tại. Vậy là đã cài đặt xong Browser MCP tích hợp với phần mềm Visual Studio. 

3.2. Cài đặt Extension Browser MCP vào trình duyệt. 

- Link cài đặt: https://browsermcp.io/install 

- Pin extension để dễ theo dõi và sử dụng

Pin the Browser MCP extension

- Mở Extension Browser MCP bằng cách click vào biểu tượng trên thanh công cụ. Sau đó, chọn nút 'Connect'. 

Connect to the MCP server

 

3.3. Cấu hình Copilot trên VSCode sử dụng BrowserMCP

- Mở giao diện chat của Copilot trên Visual Studio Code. Tìm đến tùy chỉnh như hình dưới và chọn chế độ 'Agent'.

- Sau đó, mở tệp tin .vscode/mcp.json, bạn sẽ tìm thấy nút tắt 'Start' như hình dưới đây. Chọn 'Start' để Browser MCP bắt đầu chạy server. Nếu chạy thành công và không có lỗi, sẽ có kí hiệu 12 (hoặc nhiều hơn) Tools (biểu tượng công cụ) hiển thị ở giao diện Chat của Copilot

- Vậy là đã hoàn thành các bước để cấu hình sử dụng Browser MCP trên phần mềm Visual Studio Code. 

4. Sử dụng Browser MCP để tương tác với website 

- Sử dụng giao diện chat của Copilot, thử gửi yêu cầu cơ bản như sau: 

Go to google.com and search for "Browser MCP"

- Browser MCP sẽ lần lượt sử dụng các Tool đã được định nghĩa sẵn bao gồm: browser_navigate (Truy cập trang web), browser_type (Nhập dữ liệu + Nhấn phím Enter)

- Thử một số truy vấn phức tạp hơn một chút nhé: 

Truy cập trang web https://ailab.siu.edu.vn sau đó, truy cập chuyên mục Blog kỹ thuật và trả về 5 bài viết mới nhất. 

- Tương tự lần trước, ChatGPT sử dụng Browser MCP - truy cập các tool như browser_navigate, browser_click,... để tự động xác định đâu là vị trí của chuyên mục Blog Kỹ thuật, rồi tự động trích xuất thông tin trên trang web. 

- Ngoài ra, mình cũng đã thử nghiệm nhập văn bản, nhập dữ liệu từ một tệp excel vào Chatbot của trang web SIU AI Lab cũng rất hiệu quả. 

5. Nhận xét và tiềm năng của Browser MCP

Browser MCP là một công cụ mới mẻ nhưng đầy tiềm năng, cho phép một mô hình ngôn ngữ lớn (LLM) như ChatGPT, Claude, hay Copilot có thể tự thao tác trực tiếp trên trình duyệt như một người dùng thật.

✅ Ưu điểm nổi bật:

🚀 Tiềm năng ứng dụng:

1. Thu thập dữ liệu (Web scraping):

2. Tự động kiểm thử phần mềm (Software Testing):

3. Tạo trợ lý web thông minh: