วิธีใช้ Browser ผ่าน Cloud API

บทช่วยสอนนี้จะแนะนำคุณเกี่ยวกับทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อควบคุมพลังของการทำงานอัตโนมัติของเบราว์เซอร์ที่ขับเคลื่อนด้วย AI ไม่ว่าคุณกำลังมองหาการทำให้การดึงข้อมูลเป็นไปโดยอัตโนมัติ ทดสอบเว็บแอปพลิเคชันของคุณ หรือสร้างเครื่องมือตรวจสอบที่ซับซ้อน คู่มือนี้จะให้ความรู้และตัวอย่างเพื่อเริ่มต้นใช้งาน

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้าง เอกสารประกอบ API ที่สวยงาม หรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรที่ทีมพัฒนาของคุณสามารถทำงานร่วมกันได้อย่างมี ประสิทธิภาพสูงสุด หรือไม่?

Apidog ตอบสนองทุกความต้องการของคุณ และ แทนที่ Postman ในราคาที่ย่อมเยากว่ามาก!

ปุ่ม

Browser Use Cloud คืออะไร?

Browser Use Cloud เป็นแพลตฟอร์มที่ทรงพลังที่ช่วยให้คุณสร้างและจัดการเอเจนต์การทำงานอัตโนมัติของเบราว์เซอร์อัจฉริยะผ่านโปรแกรม คิดว่ามันเหมือนกับการมีผู้ช่วยเสมือนจำนวนมากที่สามารถท่องเว็บ โต้ตอบกับเว็บไซต์ และทำงานที่ซับซ้อนแทนคุณได้

หัวใจหลักของแพลตฟอร์มคือแนวคิดของ "งาน" (task) งานคือชุดคำสั่งที่คุณให้แก่เอเจนต์ในภาษาธรรมชาติ ตัวอย่างเช่น คุณสามารถให้เอเจนต์ทำงานเช่น "ไปที่ hacker-news.com ค้นหาบทความยอดนิยม 5 อันดับแรก และบันทึกชื่อและ URL ของบทความเหล่านั้นลงในไฟล์" จากนั้นเอเจนต์จะใช้ Large Language Model (LLM) เพื่อทำความเข้าใจและดำเนินการตามคำสั่งเหล่านี้ในสภาพแวดล้อมเบราว์เซอร์จริง

หนึ่งในคุณสมบัติที่น่าตื่นเต้นที่สุดของ Browser Use Cloud คือวงจรการตอบรับแบบเรียลไทม์ ทุกงานที่คุณสร้างจะมาพร้อมกับ live_url URL นี้จะแสดงตัวอย่างแบบสดและโต้ตอบได้ว่าเอเจนต์กำลังทำอะไรอยู่ คุณสามารถดูเอเจนต์ท่องเว็บแบบเรียลไทม์ และแม้กระทั่งเข้าควบคุมหากจำเป็น ซึ่งทำให้การดีบักและการตรวจสอบเป็นไปอย่างง่ายดายอย่างไม่น่าเชื่อ

การรับคีย์ API ของคุณ

ก่อนที่คุณจะเริ่มสร้างเอเจนต์ได้ คุณจะต้องมีคีย์ API คีย์ API ใช้ในการยืนยันตัวตนคำขอของคุณและเชื่อมโยงกับบัญชีของคุณ

<Note> ในการรับคีย์ API ของคุณ คุณจะต้องมีการสมัครสมาชิก Browser Use Cloud ที่ใช้งานอยู่ คุณสามารถจัดการการสมัครสมาชิกและรับคีย์ API ของคุณได้จากหน้าการเรียกเก็บเงิน: cloud.browser-use.com/billing </Note>

เมื่อคุณมีคีย์ API แล้ว ตรวจสอบให้แน่ใจว่าเก็บรักษาไว้อย่างปลอดภัย ปฏิบัติต่อมันเหมือนรหัสผ่าน และอย่าเปิดเผยในโค้ดฝั่งไคลเอ็นต์หรือคอมมิตลงในระบบควบคุมเวอร์ชัน วิธีที่ดีที่สุดคือจัดเก็บไว้ในตัวแปรสภาพแวดล้อมที่ปลอดภัย

export BROWSER_USE_API_KEY="your_api_key_here"

ทำความเข้าใจโมเดลราคา

API ของ Browser Use Cloud มีโมเดลราคาแบบจ่ายตามการใช้งานที่เรียบง่าย ซึ่งทำให้มั่นใจว่าคุณจะจ่ายเฉพาะสิ่งที่คุณใช้ ทำให้คุ้มค่าสำหรับทั้งโครงการขนาดเล็กและขนาดใหญ่ ราคาประกอบด้วยสองส่วนหลัก:

ค่าเริ่มต้นงาน (Task Initialization Cost): มีค่าธรรมเนียมคงที่ $0.01 สำหรับทุกงานที่คุณเริ่ม ซึ่งครอบคลุมค่าใช้จ่ายในการเตรียมสภาพแวดล้อมเบราว์เซอร์สำหรับเอเจนต์ของคุณ
ค่าขั้นตอนงาน (Task Step Cost): นี่คือค่าใช้จ่ายสำหรับแต่ละการกระทำหรือ "ขั้นตอน" ที่เอเจนต์ดำเนินการ ค่าใช้จ่ายต่อขั้นตอนขึ้นอยู่กับ LLM ที่คุณเลือกใช้ขับเคลื่อนเอเจนต์ของคุณ

ราคาต่อขั้นตอนของ LLM

LLM ที่แตกต่างกันมีความสามารถและราคาที่แตกต่างกัน คุณสามารถเลือกรุ่นที่เหมาะสมที่สุดสำหรับความต้องการด้านประสิทธิภาพและค่าใช้จ่ายของคุณ นี่คือรายละเอียดค่าใช้จ่ายต่อขั้นตอนสำหรับแต่ละรุ่นที่มี:

รุ่น (Model)	ค่าใช้จ่ายต่อขั้นตอน (Cost per Step)
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

ตัวอย่างการคำนวณค่าใช้จ่าย

สมมติว่าคุณต้องการทำให้งานเข้าสู่ระบบเว็บไซต์ นำทางไปยังหน้าเฉพาะ และดึงข้อมูลบางอย่างเป็นไปโดยอัตโนมัติ คุณประมาณว่าจะใช้เวลาประมาณ 15 ขั้นตอน หากคุณเลือกรุ่น GPT-4o ที่ทรงพลัง ค่าใช้จ่ายทั้งหมดจะคำนวณดังนี้:

การเริ่มต้นงาน: $0.01
ขั้นตอนงาน: 15 ขั้นตอน × $0.03/ขั้นตอน = $0.45
ค่าใช้จ่ายทั้งหมด: $0.01 + $0.45 = $0.46

การกำหนดราคาที่โปร่งใสนี้ช่วยให้คุณสามารถคาดการณ์และควบคุมค่าใช้จ่ายได้อย่างมีประสิทธิภาพ

การสร้างเอเจนต์ตัวแรกของคุณ: ตัวอย่าง "Hello, World!"

มาถึงส่วนที่น่าตื่นเต้น! มาสร้างเอเจนต์การทำงานอัตโนมัติของเบราว์เซอร์ตัวแรกของคุณกัน เราจะเริ่มต้นด้วยงานที่ง่ายมาก: ไปที่ Google และค้นหาคำว่า "Browser Use"

เราจะใช้ curl เพื่อส่งคำขอ POST ไปยังปลายทาง /api/v1/run-task นี่คือปลายทางหลักสำหรับการสร้างงานใหม่

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"
  }'

มาทำความเข้าใจคำสั่งนี้กัน:

curl -X POST ...: เรากำลังส่งคำขอ HTTP POST ไปยัง URL ที่ระบุ
H "Authorization: Bearer $BROWSER_USE_API_KEY": นี่คือส่วนหัวการยืนยันตัวตน ซึ่งรวมคีย์ API ของคุณ เรากำลังใช้ตัวแปรสภาพแวดล้อมที่เราตั้งไว้ก่อนหน้านี้
H "Content-Type: application/json": ส่วนหัวนี้บอก API ว่าเรากำลังส่งข้อมูลในรูปแบบ JSON
d '{ "task": "..." }': นี่คือเนื้อหาของคำขอของเรา ฟิลด์ task มีคำแนะนำภาษาธรรมชาติสำหรับเอเจนต์ของเรา

ทำความเข้าใจการตอบสนองของ API

เมื่อคุณส่งคำขอนี้ API จะตอบสนองด้วยอ็อบเจกต์ JSON ที่มีข้อมูลเกี่ยวกับงานที่เพิ่งสร้างขึ้น นี่คือตัวอย่างการตอบสนองที่อาจมีลักษณะดังนี้:

{
  "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: นี่คือตัวระบุเฉพาะสำหรับงานของคุณ คุณจะใช้ ID นี้เพื่อจัดการงานในภายหลัง (เช่น หยุดชั่วคราว ดำเนินการต่อ หรือหยุดงาน)
status: นี่แสดงสถานะปัจจุบันของงาน โดยจะอยู่ในสถานะ running ในตอนแรก
live_url: นี่คือ URL สำหรับการแสดงตัวอย่างแบบสด คัดลอกและวาง URL นี้ลงในเบราว์เซอร์ของคุณเพื่อดูเอเจนต์ของคุณทำงาน!

การแสดงตัวอย่างแบบสดที่โต้ตอบได้

live_url เป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Browser Use Cloud ไม่ใช่แค่สตรีมวิดีโอแบบอ่านอย่างเดียว แต่เป็นเซสชันที่โต้ตอบได้อย่างสมบูรณ์

คุณสามารถฝัง live_url ลงในแอปพลิเคชันของคุณได้โดยตรงโดยใช้ iframe ซึ่งช่วยให้คุณสร้างแดชบอร์ดและเครื่องมือตรวจสอบที่กำหนดเองซึ่งรวมถึงมุมมองแบบเรียลไทม์ของเอเจนต์ของคุณ

นี่คือส่วนย่อย HTML ง่ายๆ เพื่อฝังการแสดงตัวอย่างแบบสด:

<!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>

แทนที่ YOUR_LIVE_URL_HERE ด้วย live_url จากการตอบสนองของ API เมื่อคุณเปิดไฟล์ HTML นี้ในเบราว์เซอร์ คุณจะเห็นหน้าจอของเอเจนต์ คุณสามารถคลิก พิมพ์ และเลื่อนได้เหมือนกับว่าคุณกำลังท่องเว็บด้วยคอมพิวเตอร์ของคุณเอง สิ่งนี้มีประโยชน์อย่างไม่น่าเชื่อสำหรับ:

การดีบัก: หากเอเจนต์ติดขัด คุณสามารถเห็นได้ทันทีว่าทำไมและมีอะไรอยู่บนหน้าจอ
การแทรกแซงด้วยตนเอง: หากงานต้องการขั้นตอนที่ยากต่อการทำให้เป็นอัตโนมัติ (เช่น การแก้ CAPTCHA ที่ซับซ้อน) คุณสามารถเข้าควบคุม ดำเนินการขั้นตอนนั้นด้วยตนเอง แล้วปล่อยให้เอเจนต์ทำงานต่อ
การสาธิต: เป็นวิธีที่ยอดเยี่ยมในการแสดงให้ผู้มีส่วนได้ส่วนเสียเห็นว่าระบบอัตโนมัติของคุณกำลังทำอะไร

การจัดการวงจรชีวิตของงาน

เมื่อมีงานกำลังทำงานอยู่ คุณสามารถควบคุมวงจรชีวิตของงานได้อย่างเต็มที่ คุณสามารถหยุดชั่วคราว ดำเนินการต่อ และหยุดงานโดยใช้ API คุณจะต้องใช้ task_id สำหรับการดำเนินการจัดการทั้งหมด

การหยุดชั่วคราวและการดำเนินการต่องาน

มีหลายเหตุผลที่คุณอาจต้องการหยุดงานชั่วคราว บางทีคุณอาจต้องตรวจสอบหน้าเว็บด้วยตนเอง หรือบางทีคุณอาจต้องการรอให้เหตุการณ์ภายนอกเกิดขึ้นก่อนที่จะดำเนินการต่อ

หากต้องการหยุดงานชั่วคราว ให้ส่งคำขอ POST ไปยังปลายทาง /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"
  }'

เอเจนต์จะเสร็จสิ้นขั้นตอนปัจจุบันและเข้าสู่สถานะ paused

หากต้องการดำเนินการต่องาน ให้ส่งคำขอ POST ไปยังปลายทาง /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"
  }'

เอเจนต์จะทำงานต่อจากจุดที่หยุดไว้

การหยุดงาน

หากคุณต้องการยกเลิกงานอย่างถาวร คุณสามารถใช้ปลายทาง /api/v1/stop-task สิ่งนี้มีประโยชน์หากงานเสร็จสมบูรณ์ ผิดพลาด หรือไม่จำเป็นอีกต่อไป

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"
  }'

<Note> เมื่อหยุดงานแล้ว จะไม่สามารถดำเนินการต่อได้ สภาพแวดล้อมเบราว์เซอร์จะถูกทำลาย และทรัพยากรที่เกี่ยวข้องทั้งหมดจะถูกล้าง </Note>

การสร้างงานขั้นสูง

ตัวอย่าง "Hello, World!" เป็นเพียงจุดเริ่มต้น ปลายทาง run-task รองรับมากกว่าแค่สตริง task ง่ายๆ คุณสามารถปรับแต่งพฤติกรรมของเอเจนต์ได้โดยการระบุพารามิเตอร์เพิ่มเติม

การเลือกรุ่น LLM

ดังที่เราเห็นในส่วนราคา คุณสามารถเลือกรุ่น LLM ที่แตกต่างกันหลายรุ่นเพื่อขับเคลื่อนเอเจนต์ของคุณ คุณสามารถระบุรุ่นได้ในคำขอ run-task โดยใช้พารามิเตอร์ model

ตัวอย่างเช่น หากต้องการใช้รุ่น Claude 3.7 Sonnet คุณจะต้องส่งคำขอต่อไปนี้:

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"
  }'

หากคุณไม่ระบุรุ่น API จะใช้รุ่นเริ่มต้น ซึ่งโดยทั่วไปเป็นตัวเลือกที่คุ้มค่าและมีประสิทธิภาพ เช่น GPT-4o mini

การสร้างไคลเอ็นต์ของคุณเอง

แม้ว่า curl จะยอดเยี่ยมสำหรับการทดสอบง่ายๆ แต่คุณอาจต้องการรวม API ของ Browser Use Cloud เข้ากับแอปพลิเคชันของคุณโดยใช้ไลบรารีไคลเอ็นต์ที่เหมาะสม วิธีที่ดีที่สุดคือการใช้ข้อกำหนด OpenAPI ของเราเพื่อสร้างไคลเอ็นต์ที่ปลอดภัยต่อชนิดข้อมูล (type-safe)

ข้อกำหนด OpenAPI เป็นวิธีมาตรฐานในการอธิบาย REST API คุณสามารถค้นหาข้อกำหนดของเราได้ที่นี่: http://api.browser-use.com/openapi.json

การสร้างไคลเอ็นต์ Python

สำหรับนักพัฒนา Python เราแนะนำ openapi-python-client มันสร้างไคลเอ็นต์ที่ทันสมัย เน้น async-first พร้อมคำแนะนำชนิดข้อมูล (type hints) ครบถ้วน

ขั้นแรก ติดตั้งเครื่องมือสร้าง:

# เราแนะนำให้ใช้ pipx เพื่อรักษาสภาพแวดล้อมส่วนกลางของคุณให้สะอาด
pipx install openapi-python-client --include-deps

ตอนนี้ สร้างไคลเอ็นต์:

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

สิ่งนี้จะสร้างไดเร็กทอรีใหม่ที่มีแพ็กเกจไคลเอ็นต์ Python ของคุณ คุณสามารถติดตั้งได้โดยใช้ pip:

pip install .

ตอนนี้คุณสามารถใช้ไคลเอ็นต์ในโค้ด Python ของคุณได้:

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())

การสร้างไคลเอ็นต์ TypeScript/JavaScript

สำหรับโครงการ frontend หรือ Node.js, openapi-typescript เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างคำจำกัดความชนิดข้อมูล (type definitions) ของ TypeScript จากข้อกำหนด OpenAPI

ขั้นแรก ติดตั้งตัวสร้างเป็น dev dependency:

npm install -D openapi-typescript

จากนั้น รันตัวสร้าง:

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

สิ่งนี้จะสร้างไฟล์เดียวคือ src/browser-use-api.ts ซึ่งมีคำจำกัดความชนิดข้อมูลทั้งหมดสำหรับ API จากนั้นคุณสามารถใช้ชนิดข้อมูลเหล่านี้กับไคลเอ็นต์ HTTP ที่คุณต้องการ เช่น fetch หรือ axios เพื่อส่งคำขอที่ปลอดภัยต่อชนิดข้อมูล

นี่คือตัวอย่างการใช้ fetch ในโครงการ 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();

💡

ปุ่ม