Cách Sử Dụng API Cloud Cho Trình Duyệt

Hướng dẫn này sẽ đưa bạn qua mọi thứ bạn cần biết để khai thác sức mạnh của tự động hóa trình duyệt được hỗ trợ bởi AI. Cho dù bạn đang tìm cách tự động hóa trích xuất dữ liệu, kiểm thử ứng dụng web của mình hay tạo các công cụ giám sát phức tạp, hướng dẫn này sẽ cung cấp cho bạn kiến thức và ví dụ để bắt đầu.

💡

Bạn muốn một công cụ Kiểm thử API tuyệt vời tạo ra 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 cho Đội ngũ 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 nhu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!

button

Browser Use Cloud là gì?

Browser Use Cloud là một nền tảng mạnh mẽ cho phép bạn tạo và quản lý các tác nhân tự động hóa trình duyệt thông minh theo chương trình. Hãy nghĩ về nó như việc có một đội ngũ trợ lý ảo có thể duyệt web, tương tác với các trang web và thực hiện các tác vụ phức tạp thay mặt bạn.

Cốt lõi của nền tảng là khái niệm "tác vụ" (task). Tác vụ là một tập hợp các hướng dẫn bạn cung cấp cho một tác nhân bằng ngôn ngữ tự nhiên. Ví dụ, bạn có thể giao cho một tác nhân một tác vụ như: "Truy cập hacker-news.com, tìm 5 bài viết hàng đầu và lưu tiêu đề cùng URL của chúng vào một tệp." Tác nhân sau đó sẽ sử dụng mô hình ngôn ngữ lớn (LLM) để hiểu và thực thi các hướng dẫn này trong môi trường trình duyệt thực tế.

Một trong những tính năng thú vị nhất của Browser Use Cloud là vòng phản hồi thời gian thực. Mỗi tác vụ bạn tạo đều đi kèm với một live_url. URL này cung cấp bản xem trước trực tiếp, tương tác về những gì tác nhân đang thực hiện. Bạn có thể xem tác nhân duyệt web trong thời gian thực và thậm chí giành quyền kiểm soát nếu cần. Điều này làm cho việc gỡ lỗi và giám sát trở nên cực kỳ trực quan.

Lấy Khóa API Của Bạn

Trước khi bạn có thể bắt đầu tạo tác nhân, bạn sẽ cần một khóa API. Khóa API xác thực các yêu cầu của bạn và liên kết chúng với tài khoản của bạn.

<Lưu ý> Để lấy khóa API của bạn, bạn cần có gói đăng ký Browser Use Cloud đang hoạt động. Bạn có thể quản lý gói đăng ký và lấy khóa API của mình từ trang thanh toán: cloud.browser-use.com/billing. </Lưu ý>

Sau khi có khóa API, hãy đảm bảo giữ nó an toàn. Hãy coi nó như mật khẩu và không bao giờ để lộ nó trong mã phía máy khách (client-side) hoặc đưa vào hệ thống kiểm soát phiên bản. Tốt nhất là lưu trữ nó trong một biến môi trường an toàn.

export BROWSER_USE_API_KEY="your_api_key_here"

Hiểu về Mô hình Giá

API của Browser Use Cloud có mô hình giá đơn giản, trả tiền theo mức sử dụng. Điều này đảm bảo rằng bạn chỉ thanh toán cho những gì bạn dùng, giúp tiết kiệm chi phí cho cả các dự án nhỏ và lớn. Giá được cấu thành từ hai phần chính:

Chi phí Khởi tạo Tác vụ: Một khoản phí cố định $0.01 được tính cho mỗi tác vụ bạn bắt đầu. Khoản này bao gồm chi phí khởi động môi trường trình duyệt cho tác nhân của bạn.
Chi phí Bước Tác vụ: Đây là chi phí cho mỗi hành động hoặc "bước" mà tác nhân thực hiện. Chi phí mỗi bước phụ thuộc vào LLM bạn chọn để cung cấp năng lượng cho tác nhân của mình.

Giá Bước LLM

Các LLM khác nhau có khả năng và mức giá khác nhau. Bạn có thể chọn mô hình phù hợp nhất với nhu cầu về hiệu suất và chi phí của mình. Dưới đây là bảng phân tích chi phí mỗi bước cho từng mô hình có sẵn:

Mô hình	Chi phí mỗi Bước
GPT-4o	$0.03
GPT-4.1	$0.03
Claude 3.7 Sonnet (2025-02-19)	$0.03
GPT-4o mini	$0.01
GPT-4.1 mini	$0.01
Gemini 2.0 Flash	$0.01
Gemini 2.0 Flash Lite	$0.01
Llama 4 Maverick	$0.01

Ví dụ Tính toán Chi phí

Hãy tưởng tượng bạn muốn tự động hóa một tác vụ liên quan đến việc đăng nhập vào một trang web, điều hướng đến một trang cụ thể và trích xuất một số dữ liệu. Bạn ước tính việc này sẽ mất khoảng 15 bước. Nếu bạn chọn sử dụng mô hình GPT-4o mạnh mẽ, tổng chi phí sẽ được tính như sau:

Khởi tạo Tác vụ: $0.01
Các Bước Tác vụ: 15 bước × $0.03/bước = $0.45
Tổng Chi phí: $0.01 + $0.45 = $0.46

Mô hình giá minh bạch này cho phép bạn dự đoán và kiểm soát chi phí của mình một cách hiệu quả.

Tạo Tác nhân Đầu tiên Của Bạn: Ví dụ "Hello, World!"

Bây giờ là phần thú vị! Hãy tạo tác nhân tự động hóa trình duyệt đầu tiên của bạn. Chúng ta sẽ bắt đầu với một tác vụ rất đơn giản: truy cập Google và tìm kiếm "Browser Use".

Chúng ta sẽ sử dụng curl để thực hiện yêu cầu POST tới điểm cuối (endpoint) /api/v1/run-task. Đây là điểm cuối chính để tạo tác vụ mới.

curl -X POST <https://api.browser-use.com/api/v1/run-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task": "Go to google.com and search for Browser Use"
  }'

Hãy phân tích lệnh này:

curl -X POST ...: Chúng ta đang gửi một yêu cầu HTTP POST đến URL được chỉ định.
H "Authorization: Bearer $BROWSER_USE_API_KEY": Đây là tiêu đề xác thực. Nó bao gồm khóa API của bạn. Chúng ta đang sử dụng biến môi trường đã thiết lập trước đó.
H "Content-Type: application/json": Tiêu đề này cho API biết rằng chúng ta đang gửi dữ liệu ở định dạng JSON.
d '{ "task": "..." }': Đây là phần thân của yêu cầu. Trường task chứa các hướng dẫn bằng ngôn ngữ tự nhiên cho tác nhân của chúng ta.

Hiểu về Phản hồi API

Khi bạn gửi yêu cầu này, API sẽ phản hồi bằng một đối tượng JSON chứa thông tin về tác vụ vừa được tạo. Dưới đây là ví dụ về phản hồi đó:

{
  "task_id": "ts_2a9b4e7c-1d0f-4g8h-9i1j-k2l3m4n5o6p7",
  "status": "running",
  "live_url": "<https://previews.browser-use.com/ts_2a9b4e7c-1d0f-4g8h-9i1j-k2l3m4n5o6p7>"
}

task_id: Đây là mã định danh duy nhất cho tác vụ của bạn. Bạn sẽ sử dụng mã này để quản lý tác vụ sau này (ví dụ: tạm dừng, tiếp tục hoặc dừng).
status: Điều này cho biết trạng thái hiện tại của tác vụ. Ban đầu nó sẽ là running (đang chạy).
live_url: Đây là URL cho bản xem trước trực tiếp. Sao chép và dán URL này vào trình duyệt của bạn để xem tác nhân của bạn hoạt động!

Xem trước Trực tiếp Tương tác

live_url là một trong những tính năng mạnh mẽ nhất của Browser Use Cloud. Nó không chỉ là một luồng video chỉ xem; nó là một phiên làm việc hoàn toàn tương tác.

Bạn có thể nhúng live_url trực tiếp vào các ứng dụng của riêng mình bằng cách sử dụng iframe. Điều này cho phép bạn xây dựng các bảng điều khiển và công cụ giám sát tùy chỉnh bao gồm chế độ xem thời gian thực về các tác nhân của bạn.

Dưới đây là đoạn mã HTML đơn giản để nhúng bản xem trước trực tiếp:

<!DOCTYPE html>
<html>
<head>
  <title>Agent Live Preview</title>
  <style>
    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>
  <iframe src="YOUR_LIVE_URL_HERE"></iframe>
</body>
</html>

Thay thế YOUR_LIVE_URL_HERE bằng live_url từ phản hồi API. Khi bạn mở tệp HTML này trong trình duyệt, bạn sẽ thấy màn hình của tác nhân. Bạn có thể nhấp, gõ và cuộn giống như đang duyệt web trên máy tính của mình. Điều này cực kỳ hữu ích cho:

Gỡ lỗi: Nếu một tác nhân bị kẹt, bạn có thể ngay lập tức thấy lý do và những gì đang hiển thị trên màn hình của nó.
Can thiệp Thủ công: Nếu một tác vụ yêu cầu một bước khó tự động hóa (như giải CAPTCHA phức tạp), bạn có thể giành quyền kiểm soát, hoàn thành bước đó thủ công, và sau đó để tác nhân tiếp tục công việc của nó.
Trình diễn: Đây là một cách tuyệt vời để cho các bên liên quan thấy tự động hóa của bạn đang làm gì.

Quản lý Vòng đời Tác vụ

Khi một tác vụ đang chạy, bạn có toàn quyền kiểm soát vòng đời của nó. Bạn có thể tạm dừng, tiếp tục và dừng các tác vụ bằng API. Bạn sẽ cần task_id cho tất cả các thao tác quản lý.

Tạm dừng và Tiếp tục Tác vụ

Có nhiều lý do khiến bạn muốn tạm dừng một tác vụ. Có thể bạn cần kiểm tra trang web thủ công, hoặc có lẽ bạn muốn đợi một sự kiện bên ngoài xảy ra trước khi tiếp tục.

Để tạm dừng một tác vụ, gửi yêu cầu POST đến điểm cuối /api/v1/pause-task:

curl -X POST <https://api.browser-use.com/api/v1/pause-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

Tác nhân sẽ hoàn thành bước hiện tại của nó và sau đó chuyển sang trạng thái paused (đã tạm dừng).

Để tiếp tục tác vụ, gửi yêu cầu POST đến điểm cuối /api/v1/resume-task:

curl -X POST <https://api.browser-use.com/api/v1/resume-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

Tác nhân sẽ tiếp tục ngay tại điểm nó đã dừng lại.

Dừng Tác vụ

Nếu bạn muốn chấm dứt một tác vụ vĩnh viễn, bạn có thể sử dụng điểm cuối /api/v1/stop-task. Điều này hữu ích nếu tác vụ đã hoàn thành, gặp lỗi hoặc không còn cần thiết nữa.

curl -X POST <https://api.browser-use.com/api/v1/stop-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task_id": "YOUR_TASK_ID_HERE"
  }'

<Lưu ý> Một khi tác vụ đã dừng, nó không thể được tiếp tục. Môi trường trình duyệt bị hủy và tất cả các tài nguyên liên quan được dọn dẹp. </Lưu ý>

Tạo Tác vụ Nâng cao

Ví dụ "Hello, World!" chỉ là bước khởi đầu. Điểm cuối run-task hỗ trợ nhiều hơn là chỉ một chuỗi task đơn giản. Bạn có thể tùy chỉnh hành vi của tác nhân bằng cách cung cấp thêm các tham số.

Chọn một LLM

Như chúng ta đã thấy trong phần giá, bạn có thể chọn từ nhiều LLM khác nhau để cung cấp năng lượng cho tác nhân của mình. Bạn có thể chỉ định mô hình trong yêu cầu run-task bằng cách sử dụng tham số model.

Ví dụ, để sử dụng mô hình Claude 3.7 Sonnet, bạn sẽ thực hiện yêu cầu sau:

curl -X POST <https://api.browser-use.com/api/v1/run-task> \\\\
  -H "Authorization: Bearer $BROWSER_USE_API_KEY" \\\\
  -H "Content-Type: application/json" \\\\
  -d '{
    "task": "Go to reddit.com/r/programming and find the top post of the day.",
    "model": "claude-3.7-sonnet-20250219"
  }'

Nếu bạn không chỉ định mô hình, API sẽ sử dụng mô hình mặc định, thường là một tùy chọn hiệu quả về chi phí và hiệu suất như GPT-4o mini.

Xây dựng Client Của Riêng Bạn

Mặc dù curl rất tốt cho các kiểm thử đơn giản, bạn có thể sẽ muốn tích hợp API của Browser Use Cloud vào các ứng dụng của mình bằng cách sử dụng một thư viện client phù hợp. Cách tốt nhất để làm điều này là sử dụng đặc tả OpenAPI của chúng tôi để tạo ra một client an toàn kiểu (type-safe).

Đặc tả OpenAPI là một cách chuẩn hóa để mô tả các API REST. Bạn có thể tìm thấy đặc tả của chúng tôi tại đây: http://api.browser-use.com/openapi.json.

Tạo Client Python

Đối với các nhà phát triển Python, chúng tôi khuyên dùng openapi-python-client. Nó tạo ra một client hiện đại, ưu tiên bất đồng bộ (async-first) với đầy đủ gợi ý kiểu (type hints).

Đầu tiên, cài đặt công cụ tạo client:

# We recommend using pipx to keep your global environment clean
pipx install openapi-python-client --include-deps

Bây giờ, tạo client:

openapi-python-client generate --url <http://api.browser-use.com/openapi.json>

Thao tác này sẽ tạo một thư mục mới chứa gói client Python của bạn. Bạn có thể cài đặt nó bằng cách sử dụng pip:

pip install .

Bây giờ bạn có thể sử dụng client trong mã Python của mình:

import asyncio
from browser_use_api import Client
from browser_use_api.models import RunTaskRequest

async def main():
    client = Client(base_url="<https://api.browser-use.com/api/v1>")
    request = RunTaskRequest(task="Go to ycombinator.com and list the top 3 companies.")

    response = await client.run_task.api_v1_run_task_post(
        client=client,
        json_body=request,
        headers={"Authorization": f"Bearer {YOUR_API_KEY}"}
    )

    if response:
        print(f"Task created with ID: {response.task_id}")
        print(f"Live URL: {response.live_url}")

if __name__ == "__main__":
    asyncio.run(main())

Tạo Client TypeScript/JavaScript

Đối với các dự án frontend hoặc Node.js, openapi-typescript là một công cụ tuyệt vời để tạo các định nghĩa kiểu TypeScript từ đặc tả OpenAPI.

Đầu tiên, cài đặt công cụ tạo client như một dependency phát triển:

npm install -D openapi-typescript

Sau đó, chạy công cụ tạo client:

npx openapi-typescript <http://api.browser-use.com/openapi.json> -o src/browser-use-api.ts

Thao tác này sẽ tạo một tệp duy nhất, src/browser-use-api.ts, chứa tất cả các định nghĩa kiểu cho API. Sau đó, bạn có thể sử dụng các kiểu này với client HTTP ưa thích của mình, như fetch hoặc axios, để thực hiện các yêu cầu an toàn kiểu.

Dưới đây là ví dụ sử dụng fetch trong một dự án TypeScript:

import { paths } from './src/browser-use-api';

const API_URL = "<https://api.browser-use.com/api/v1>";

type RunTaskRequest = paths["/run-task"]["post"]["requestBody"]["content"]["application/json"];
type RunTaskResponse = paths["/run-task"]["post"]["responses"]["200"]["content"]["application/json"];

async function createTask(task: string, apiKey: string): Promise<RunTaskResponse> {
  const body: RunTaskRequest = { task };

  const response = await fetch(`${API_URL}/run-task`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`,
    },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    throw new Error(`API request failed with status ${response.status}`);
  }

  return response.json() as Promise<RunTaskResponse>;
}

async function run() {
  const apiKey = process.env.BROWSER_USE_API_KEY;
  if (!apiKey) {
    throw new Error("API key not found in environment variables.");
  }

  try {
    const result = await createTask("Find the current weather in New York City.", apiKey);
    console.log("Task created:", result);
  } catch (error) {
    console.error("Failed to create task:", error);
  }
}

run();

💡

button