Hướng Dẫn Sử Dụng MCP Server Điều Khiển Trình Duyệt Chrome (Với Browserbase MCP Server)

Bạn đã bao giờ ước AI của mình có thể lướt web giống như bạn chưa? Hãy sẵn sàng vì hôm nay chúng ta sẽ đi sâu vào thế giới của Browserbase MCP Server—một công cụ thay đổi cuộc chơi cho phép các mô hình AI như Claude, GPT và Gemini điều khiển trình duyệt web. Hãy tưởng tượng AI của bạn tự động điều hướng các trang web, nhấp vào nút, điền biểu mẫu và thậm chí chụp ảnh màn hình. Nghe có vẻ tương lai? Điều đó đang xảy ra ngay bây giờ, và việc thiết lập nó dễ dàng hơn bạn nghĩ, đặc biệt là với Browserbase MCP Server.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn về Browserbase MCP Server là gì, tại sao nó là công cụ không thể thiếu cho các quy trình làm việc dựa trên AI, và cách thiết lập cũng như chạy nó để điều khiển trình duyệt Chrome. Dù bạn là nhà phát triển, nhà khoa học dữ liệu, hay chỉ là một người tò mò về AI, hướng dẫn từng bước này sẽ khiến bạn cảm thấy như một chuyên gia. Hãy bắt đầu!

💡

Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Nhóm Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn, và thay thế Postman với mức giá phải chăng hơn nhiều!

button

Browserbase MCP Server là gì?

Browserbase MCP Server là một công cụ mã nguồn mở sử dụng Giao thức Ngữ cảnh Mô hình (MCP) để kết nối các mô hình ngôn ngữ lớn (LLM) với trình duyệt web. Hãy coi nó như một cầu nối cho phép AI tương tác với các trang web trong thời gian thực. Với máy chủ này, AI của bạn có thể:

Điều hướng đến bất kỳ URL nào
Nhấp vào nút và điền biểu mẫu
Trích xuất dữ liệu từ các trang web
Chụp ảnh màn hình
Chạy JavaScript trên các trang web
Xử lý nhiều phiên trình duyệt cùng lúc

Nó giống như việc trao cho AI của bạn một đôi tay để duyệt web. Và phần tốt nhất là gì? Nó hoạt động với các mô hình AI phổ biến như GPT của OpenAI, Claude của Anthropic và Gemini của Google.

Tại sao nên sử dụng Browserbase MCP Server?

Trước khi chúng ta đi sâu vào cách thực hiện, hãy cùng nói về lý do tại sao Browserbase MCP Server lại là một công cụ thay đổi cuộc chơi:

Tự động hóa trên nền tảng đám mây: Chạy các tác vụ trình duyệt trên đám mây, không gặp rắc rối khi thiết lập cục bộ.
Hỗ trợ đa mô hình: Hoạt động với nhiều mô hình AI khác nhau, vì vậy bạn có thể chọn mô hình yêu thích của mình.
Phiên song song: Xử lý nhiều tác vụ trình duyệt cùng lúc để đạt hiệu quả.
Khả năng thị giác: Chụp ảnh màn hình và phân tích trực quan các trang web.
Tích hợp dễ dàng: Kết nối liền mạch với các ứng dụng khách AI như Claude Desktop hoặc Cursor.

Dù bạn đang xây dựng một ứng dụng hỗ trợ AI, tự động hóa quy trình làm việc hay chỉ đơn giản là thử nghiệm, Browserbase MCP Server giúp tiết kiệm thời gian và mở ra những khả năng mới.

Cách cài đặt và thiết lập Browserbase MCP Server

Có ba cách để bắt đầu: sử dụng máy chủ từ xa được lưu trữ, chạy bằng npm hoặc chạy cục bộ. Tôi sẽ trình bày cả ba cách để bạn có thể chọn cách phù hợp nhất với mình.

Điều kiện tiên quyết

Trước khi bạn đi sâu vào việc sử dụng Browserbase MCP Server để điều khiển trình duyệt Chrome bằng AI, hãy đảm bảo bạn có những điều sau:

Một ứng dụng khách AI tương thích MCP: Cài đặt một ứng dụng khách như Claude Desktop hoặc Cursor hỗ trợ Giao thức Ngữ cảnh Mô hình (MCP).
Khóa API Browserbase: Lấy khóa này từ Browserbase để kết nối AI của bạn với tự động hóa trình duyệt.

Để thiết lập cục bộ (Tùy chọn)

Nếu bạn định chạy máy chủ cục bộ, bạn cũng sẽ cần:

Git: Để sao chép kho lưu trữ từ GitHub.
pnpm: Cài đặt trình quản lý gói này từ pnpm.io để xử lý các phụ thuộc.
Node.js: Tải xuống từ nodejs.org để chạy máy chủ.
Khóa API mô hình AI: Lấy một khóa cho mô hình bạn đã chọn, ví dụ: Gemini.

Tùy chọn 1: Sử dụng Máy chủ từ xa được lưu trữ của BrowserBase MCP Server (Dễ nhất)

Nếu bạn muốn bỏ qua rắc rối thiết lập, tùy chọn được lưu trữ là lựa chọn tốt nhất. Đây là cách thực hiện:

Truy cập Smithery: Truy cập smithery.ai để lấy khóa API và URL MCP từ xa của bạn.

Cấu hình ứng dụng khách AI của bạn: Thêm URL được cung cấp vào cài đặt MCP của ứng dụng khách AI của bạn. Ví dụ, trong Claude Desktop, bạn sẽ thêm dòng này vào tệp claude_desktop_config.json của mình:

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

Hoặc, nếu bạn đang sử dụng CLI mcp-remote:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

Khởi động lại ứng dụng khách của bạn: Đóng và mở lại ứng dụng khách AI của bạn để áp dụng các thay đổi.

Vậy là xong! AI của bạn giờ đây có thể điều khiển trình duyệt Chrome thông qua Browserbase MCP Server.

Tù chọn 2: Chạy BrowserBase MCP Server trên NPM (Được khuyến nghị)

Đây là cách tiếp cận được khuyến nghị vì khả năng tương thích của nó với hầu hết các ứng dụng khách MCP. Hãy truy cập tệp JSON Cấu hình MCP của bạn và dán cấu hình Máy chủ Browserbase:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

Tùy chọn 3: Cài đặt và chạy BrowserBase MCP Server cục bộ (Để kiểm soát hoàn toàn)

Bạn muốn tùy chỉnh sâu hơn? Chạy máy chủ cục bộ sẽ mang lại cho bạn sự linh hoạt hơn. Đây là cách thực hiện:

Sao chép kho lưu trữ:

Mở terminal của bạn và chạy:

git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase

Cài đặt các phụ thuộc:

Đảm bảo bạn đã cài đặt pnpm. Sau đó chạy:

pnpm install && pnpm build

Khởi động Máy chủ:

Bạn có thể chạy máy chủ bằng STDIO hoặc truyền tải HTTP.
Đối với STDIO (quy trình cục bộ):
Thêm dòng này vào cấu hình ứng dụng khách MCP của bạn:

{
  "mcpServers": {
    "browserbase": {
      "command": "node",
      "args": ["path/to/mcp-server-browserbase/cli.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_api_key",
        "BROWSERBASE_PROJECT_ID": "your_project_id",
        "GEMINI_API_KEY": "your_gemini_key"
      }
    }
  }
}

Đối với truyền tải HTTP:
Khởi động máy chủ bằng cách:

node cli.js --port 3000

Cấu hình ứng dụng khách của bạn để kết nối với http://localhost:3000.

Thêm Khóa API: Thay thế các phần giữ chỗ trong cấu hình bằng khóa API Browserbase và mô hình thực tế của bạn.

Khởi động lại ứng dụng khách của bạn: Giống như trước đây, khởi động lại ứng dụng khách AI của bạn để bật máy chủ.

Tùy chỉnh Máy chủ

Browserbase MCP Server cung cấp các cờ để điều chỉnh hành vi của nó. Dưới đây là một vài cờ hữu ích:

--proxies: Bật proxy Browserbase để bảo mật tốt hơn.
--advancedStealth: Sử dụng chế độ tàng hình để tránh bị phát hiện (yêu cầu Gói Scale).
--browserWidth và --browserHeight: Đặt kích thước cửa sổ trình duyệt.
--modelName: Chọn một mô hình AI khác cho Stagehand.

Bạn có thể thêm các cờ này vào mảng args trong cấu hình MCP của mình. Ví dụ:

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

Cách sử dụng Browserbase MCP Server để điều khiển Chrome

Giờ đây, máy chủ của bạn đã được thiết lập, hãy bắt đầu sử dụng nó! Dưới đây là cách sử dụng Browserbase MCP Server để điều khiển trình duyệt Chrome.

Bước 1: Kết nối ứng dụng khách AI của bạn

Đảm bảo ứng dụng khách AI của bạn (như Claude Desktop hoặc Cursor) được kết nối với Browserbase MCP Server bằng một trong ba phương pháp trên.

Bước 2: Đưa ra lệnh

Trong ứng dụng khách AI của bạn, giờ đây bạn có thể đưa ra các lệnh ngôn ngữ tự nhiên để điều khiển trình duyệt. Dưới đây là một số ví dụ:

Điều hướng đến một URL:

https://example.com

Nhấp vào một nút:

"Nhấp vào nút 'Đăng ký'"

Điền vào một biểu mẫu:

user@example.com

Chụp ảnh màn hình:

"Chụp ảnh màn hình trang chủ"

Trích xuất dữ liệu:

"Trích xuất tất cả tiêu đề sản phẩm từ trang này"

AI sẽ dịch các lời nhắc này thành các hành động trình duyệt bằng cách sử dụng Browserbase MCP Server.

Bước 3: Xem kết quả

Tùy thuộc vào lệnh, AI sẽ trả về các kết quả như:

Xác nhận hành động (ví dụ: "Đã điều hướng đến https://example.com")
Dữ liệu được trích xuất (ví dụ: danh sách tiêu đề sản phẩm)
Ảnh chụp màn hình (đã lưu hoặc hiển thị, tùy thuộc vào thiết lập của bạn)

Ví dụ, nếu bạn yêu cầu chụp ảnh màn hình, AI có thể phản hồi với:

"Ảnh chụp màn hình đã được chụp và lưu dưới dạng 'homepage.png'"

Kiểm thử Browserbase MCP Server

Hãy cùng kiểm thử nó với một ví dụ thực tế. Giả sử bạn muốn tự động hóa một tìm kiếm trên một trang web.

Mở ứng dụng khách AI của bạn: Đối với ví dụ này, hãy sử dụng Claude Desktop.
Đưa ra một lệnh:

https://google.com

3. Quan sát Trình duyệt: Nếu bạn đang chạy cục bộ với truyền tải HTTP, bạn có thể thấy trình duyệt mở và thực hiện các hành động.

4. Kiểm tra Phản hồi: Claude sẽ xác nhận các hành động và có thể trích xuất tiêu đề hoặc nội dung trang.

Bài kiểm tra đơn giản này cho thấy cách Browserbase MCP Server cho phép AI điều khiển Chrome để thực hiện các tác vụ web.

Mẹo khắc phục sự cố

Máy chủ không khởi động? Đảm bảo bạn có khóa API chính xác và pnpm build đã hoàn thành thành công.
Ứng dụng khách không kết nối? Kiểm tra lại cấu hình MCP và khởi động lại ứng dụng khách AI của bạn.
Hành động không hoạt động? Xác minh cấu trúc của trang web; một số trang có thể yêu cầu chế độ tàng hình nâng cao hoặc proxy.
Sự cố về mô hình? Đảm bảo khóa API mô hình của bạn hợp lệ và mô hình hỗ trợ các khả năng cần thiết.

Kết luận

Và đó là tất cả! Bạn đã học cách sử dụng Browserbase MCP Server để điều khiển trình duyệt Chrome bằng AI. Dù bạn chọn cách lưu trữ để đơn giản, npm hay thiết lập cục bộ để kiểm soát, giờ đây bạn đã được trang bị để tự động hóa các tác vụ web như một chuyên gia. Browserbase MCP Server là một công cụ mạnh mẽ kết nối AI và tự động hóa web, mở ra vô số khả năng đổi mới.

Sẵn sàng khám phá thêm? Hãy thử tự động hóa các tác vụ web hàng ngày của bạn hoặc tích hợp nó vào dự án AI tiếp theo của bạn.

💡

button