{"product_id":"browser-use-demo-claude-tự-dộng-hoa-trinh-duyệt","title":"Browser Use Demo — Claude tự động hóa trình duyệt","description":"\n\u003cp\u003eTrong khi Computer Use cho Claude toàn quyền kiểm soát desktop, \u003cstrong\u003eBrowser Use\u003c\/strong\u003e tập trung riêng vào việc tự động hóa trình duyệt — một use case phổ biến hơn, an toàn hơn, và hiệu quả hơn cho hầu hết bài toán web automation.\u003c\/p\u003e\n\n\u003cp\u003eVới Puppeteer hoặc Playwright, Claude có thể điều hướng website, điền form, click button, scrape dữ liệu, và thực hiện web research tự động — tất cả với độ chính xác cao nhờ hiểu ngữ nghĩa trang web.\u003c\/p\u003e\n\n\u003ch2\u003eTại sao Browser Use tốt hơn Computer Use cho web?\u003c\/h2\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n\u003cth\u003eTiêu chí\u003c\/th\u003e\n\u003cth\u003eComputer Use\u003c\/th\u003e\n\u003cth\u003eBrowser Use\u003c\/th\u003e\n\u003c\/tr\u003e\n  \u003c\/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n\u003ctd\u003eĐộ chính xác click\u003c\/td\u003e\n\u003ctd\u003eDựa vào tọa độ pixel\u003c\/td\u003e\n\u003ctd\u003eDựa vào CSS selector \/ XPath\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eResponsive layout\u003c\/td\u003e\n\u003ctd\u003eDễ bị sai khi layout thay đổi\u003c\/td\u003e\n\u003ctd\u003eLuôn đúng vì dựa vào DOM\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eExtract data\u003c\/td\u003e\n\u003ctd\u003eOCR từ screenshot\u003c\/td\u003e\n\u003ctd\u003eĐọc trực tiếp từ DOM\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eTốc độ\u003c\/td\u003e\n\u003ctd\u003eChậm (chờ render)\u003c\/td\u003e\n\u003ctd\u003eNhanh (truy cập DOM trực tiếp)\u003c\/td\u003e\n\u003c\/tr\u003e\n    \u003ctr\u003e\n\u003ctd\u003eSetup\u003c\/td\u003e\n\u003ctd\u003eCần X11, scrot, xdotool\u003c\/td\u003e\n\u003ctd\u003eChỉ cần npm install\u003c\/td\u003e\n\u003c\/tr\u003e\n  \u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003eSetup: Puppeteer với Node.js\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003enpm init -y\nnpm install puppeteer @anthropic-ai\/sdk\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003cp\u003eCấu trúc project:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003ebrowser-agent\/\n  index.js          -- Agent chính\n  browser-tools.js  -- Tool implementations\n  schemas.js        -- Tool schemas cho Claude\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eBrowser Tools — Triển khai các thao tác\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ browser-tools.js\nconst puppeteer = require('puppeteer');\n\nlet browser = null;\nlet page = null;\n\nasync function initBrowser() {\n  if (!browser) {\n    browser = await puppeteer.launch({\n      headless: \"new\",\n      args: ['--no-sandbox', '--disable-setuid-sandbox']\n    });\n    page = await browser.newPage();\n    await page.setViewport({ width: 1366, height: 768 });\n  }\n  return page;\n}\n\n\/\/ Tool 1: Dieu huong den URL\nasync function navigate(url) {\n  const p = await initBrowser();\n  await p.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });\n  const title = await p.title();\n  return JSON.stringify({ success: true, title, url: p.url() });\n}\n\n\/\/ Tool 2: Click element\nasync function click(selector) {\n  const p = await initBrowser();\n  try {\n    await p.waitForSelector(selector, { timeout: 5000 });\n    await p.click(selector);\n    return JSON.stringify({ success: true, clicked: selector });\n  } catch (e) {\n    return JSON.stringify({ success: false, error: e.message });\n  }\n}\n\n\/\/ Tool 3: Nhap text vao input\nasync function typeText(selector, text) {\n  const p = await initBrowser();\n  try {\n    await p.waitForSelector(selector, { timeout: 5000 });\n    await p.click(selector);\n    await p.keyboard.down('Control');\n    await p.keyboard.press('a');\n    await p.keyboard.up('Control');\n    await p.type(selector, text);\n    return JSON.stringify({ success: true, typed: text });\n  } catch (e) {\n    return JSON.stringify({ success: false, error: e.message });\n  }\n}\n\n\/\/ Tool 4: Extract text tu element\nasync function extractText(selector) {\n  const p = await initBrowser();\n  try {\n    await p.waitForSelector(selector, { timeout: 5000 });\n    const text = await p.$eval(selector, el =\u0026gt; el.innerText);\n    return JSON.stringify({ success: true, text: text.trim() });\n  } catch (e) {\n    return JSON.stringify({ success: false, error: e.message });\n  }\n}\n\n\/\/ Tool 5: Extract nhieu elements (cho scraping)\nasync function extractAll(selector, attribute) {\n  const p = await initBrowser();\n  try {\n    const items = await p.$$eval(selector, (els, attr) =\u0026gt; {\n      return els.map(el =\u0026gt; attr === 'text' ? el.innerText : el.getAttribute(attr));\n    }, attribute);\n    return JSON.stringify({ success: true, items, count: items.length });\n  } catch (e) {\n    return JSON.stringify({ success: false, error: e.message });\n  }\n}\n\n\/\/ Tool 6: Lay HTML cua trang hien tai (rut gon)\nasync function getPageContent() {\n  const p = await initBrowser();\n  const content = await p.content();\n  \/\/ Rut gon de tranh vuot context window\n  const trimmed = content.substring(0, 8000);\n  return JSON.stringify({ success: true, html: trimmed, url: p.url() });\n}\n\n\/\/ Tool 7: Scroll trang\nasync function scrollPage(direction, amount) {\n  const p = await initBrowser();\n  const pixels = (direction === 'down' ? 1 : -1) * (amount || 300);\n  await p.evaluate((px) =\u0026gt; window.scrollBy(0, px), pixels);\n  return JSON.stringify({ success: true, scrolled: pixels });\n}\n\n\/\/ Tool 8: Chup screenshot (cho debugging)\nasync function screenshot() {\n  const p = await initBrowser();\n  const buffer = await p.screenshot({ encoding: 'base64' });\n  return buffer; \/\/ tra ve base64 de embed vao message\n}\n\nmodule.exports = {\n  navigate, click, typeText, extractText,\n  extractAll, getPageContent, scrollPage, screenshot\n};\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTool Schemas cho Claude\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ schemas.js\nconst browserToolSchemas = [\n  {\n    name: \"navigate\",\n    description: \"Dieu huong trinh duyet den URL\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        url: { type: \"string\", description: \"URL day du, bat dau bang http:\/\/ hoac https:\/\/\" }\n      },\n      required: [\"url\"]\n    }\n  },\n  {\n    name: \"click\",\n    description: \"Click vao element theo CSS selector\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        selector: { type: \"string\", description: \"CSS selector, vi du: '#submit-btn', '.nav-link'\" }\n      },\n      required: [\"selector\"]\n    }\n  },\n  {\n    name: \"typeText\",\n    description: \"Nhap text vao input field\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        selector: { type: \"string\", description: \"CSS selector cua input\" },\n        text: { type: \"string\", description: \"Text can nhap\" }\n      },\n      required: [\"selector\", \"text\"]\n    }\n  },\n  {\n    name: \"extractText\",\n    description: \"Lay text tu mot element\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        selector: { type: \"string\", description: \"CSS selector\" }\n      },\n      required: [\"selector\"]\n    }\n  },\n  {\n    name: \"extractAll\",\n    description: \"Lay tat ca elements khop voi selector (cho scraping danh sach)\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        selector: { type: \"string\", description: \"CSS selector\" },\n        attribute: { type: \"string\", description: \"'text' de lay text, hoac ten attribute (href, src, ...)\" }\n      },\n      required: [\"selector\", \"attribute\"]\n    }\n  },\n  {\n    name: \"getPageContent\",\n    description: \"Lay HTML cua trang hien tai (rut gon 8000 ky tu)\",\n    input_schema: {\n      type: \"object\",\n      properties: {},\n      required: []\n    }\n  },\n  {\n    name: \"scrollPage\",\n    description: \"Scroll trang len hoac xuong\",\n    input_schema: {\n      type: \"object\",\n      properties: {\n        direction: { type: \"string\", enum: [\"up\", \"down\"] },\n        amount: { type: \"integer\", description: \"So pixel can scroll, mac dinh 300\" }\n      },\n      required: [\"direction\"]\n    }\n  }\n];\n\nmodule.exports = browserToolSchemas;\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eAgent chính\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ index.js\nconst Anthropic = require('@anthropic-ai\/sdk');\nconst tools = require('.\/browser-tools');\nconst schemas = require('.\/schemas');\n\nconst client = new Anthropic();\n\nconst SYSTEM_PROMPT = 'Ban la mot web automation agent chuyen nghiep.\nSu dung Puppeteer de tuong tac voi trang web.\nTruoc tien, lay HTML trang de hieu cau truc DOM.\nDung CSS selectors chinh xac khi click hoac extract.\nNeu selector khong hoat dong, thu selector khac.\nTra ve ket qua co cau truc, ro rang.';\n\nasync function runBrowserAgent(task) {\n  const messages = [\n    { role: \"user\", content: task }\n  ];\n\n  console.log(\"Task:\", task);\n  console.log(\"=\".repeat(60));\n\n  for (let i = 0; i \u0026lt; 30; i++) {\n    const response = await client.messages.create({\n      model: \"claude-sonnet-4-5\",\n      max_tokens: 4096,\n      system: SYSTEM_PROMPT,\n      tools: schemas,\n      messages\n    });\n\n    messages.push({ role: \"assistant\", content: response.content });\n\n    if (response.stop_reason === \"end_turn\") {\n      const text = response.content\n        .filter(b =\u0026gt; b.type === \"text\")\n        .map(b =\u0026gt; b.text)\n        .join(\"\n\");\n      console.log(\"\nKet qua:\", text);\n      return text;\n    }\n\n    const toolResults = [];\n    for (const block of response.content) {\n      if (block.type === \"tool_use\") {\n        console.log(\"  [\" + block.name + \"]\", JSON.stringify(block.input).substring(0, 80));\n\n        let result;\n        const fn = tools[block.name];\n        if (!fn) {\n          result = JSON.stringify({ error: \"Unknown tool: \" + block.name });\n        } else {\n          try {\n            const input = block.input;\n            if (block.name === \"navigate\") result = await fn(input.url);\n            else if (block.name === \"click\") result = await fn(input.selector);\n            else if (block.name === \"typeText\") result = await fn(input.selector, input.text);\n            else if (block.name === \"extractText\") result = await fn(input.selector);\n            else if (block.name === \"extractAll\") result = await fn(input.selector, input.attribute);\n            else if (block.name === \"getPageContent\") result = await fn();\n            else if (block.name === \"scrollPage\") result = await fn(input.direction, input.amount);\n            else result = JSON.stringify({ error: \"Unhandled tool\" });\n          } catch (e) {\n            result = JSON.stringify({ error: e.message });\n          }\n        }\n\n        console.log(\"  -\u0026gt;\", String(result).substring(0, 100));\n\n        toolResults.push({\n          type: \"tool_result\",\n          tool_use_id: block.id,\n          content: String(result)\n        });\n      }\n    }\n\n    messages.push({ role: \"user\", content: toolResults });\n  }\n\n  return \"Timeout\";\n}\n\n\/\/ Demo: Web research tu dong\nrunBrowserAgent(\n  \"Vao trang https:\/\/news.ycombinator.com, lay danh sach 5 bai viet dau tien \" +\n  \"bao gom: tieu de, link, va so diem. Tra ve dang JSON.\"\n).then(result =\u0026gt; {\n  console.log(\"\nJSON Result:\", result);\n  process.exit(0);\n});\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eDemo thực tế: Automated Web Research\u003c\/h2\u003e\n\n\u003cp\u003eAgent tự động nghiên cứu web — lấy dữ liệu từ nhiều nguồn:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ Research agent: tim kiem va tong hop thong tin\nasync function webResearch(topic) {\n  return runBrowserAgent(\n    \"Thuc hien research ve chu de: '\" + topic + \"'.\n\" +\n    \"1. Vao google.com, tim kiem chu de nay\n\" +\n    \"2. Mo 3 ket qua dau tien\n\" +\n    \"3. Tu moi trang, extract diem chinh (200 tu)\n\" +\n    \"4. Tong hop thanh bao cao 500 tu bang tieng Viet\"\n  );\n}\n\n\/\/ Form automation: tu dong dien form\nasync function fillContactForm(data) {\n  return runBrowserAgent(\n    \"Vao trang https:\/\/example.com\/contact va dien form voi thong tin sau: \" +\n    \"Ten: \" + data.name + \", Email: \" + data.email + \", Message: \" + data.message + \". \" +\n    \"Sau do click Submit va xac nhan form da duoc gui thanh cong.\"\n  );\n}\n\n\/\/ Price monitoring: theo doi gia san pham\nasync function monitorPrice(productUrl) {\n  return runBrowserAgent(\n    \"Vao trang: \" + productUrl + \". \" +\n    \"Tim gia hien tai cua san pham. \" +\n    \"Tra ve: ten san pham, gia, tinh trang con hang, va URL trang.\"\n  );\n}\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eError Handling và Retry Logic\u003c\/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ Wrapper voi retry tu dong\nasync function robustAction(actionFn, maxRetries = 3) {\n  for (let attempt = 1; attempt \u0026lt;= maxRetries; attempt++) {\n    try {\n      return await actionFn();\n    } catch (e) {\n      console.log(\"Attempt \" + attempt + \" failed:\", e.message);\n      if (attempt === maxRetries) throw e;\n      \/\/ Doi truoc khi thu lai\n      await new Promise(r =\u0026gt; setTimeout(r, 1000 * attempt));\n    }\n  }\n}\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003ePlaywright — Lựa chọn thay thế\u003c\/h2\u003e\n\n\u003cp\u003ePlaywright có API tương tự Puppeteer nhưng hỗ trợ nhiều browser hơn:\u003c\/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\/\/ Cai dat Playwright\n\/\/ npm install playwright\n\nconst { chromium } = require('playwright');\n\nasync function playwrightDemo() {\n  const browser = await chromium.launch({ headless: true });\n  const page = await browser.newPage();\n\n  await page.goto('https:\/\/example.com');\n\n  \/\/ Playwright dung locator thay vi selector\n  await page.locator('text=More information').click();\n\n  \/\/ Wait for navigation\n  await page.waitForLoadState('networkidle');\n\n  const title = await page.title();\n  console.log('Title:', title);\n\n  await browser.close();\n}\u003c\/code\u003e\u003c\/pre\u003e\n\n\u003ch2\u003eTổng kết\u003c\/h2\u003e\n\n\u003cp\u003eBrowser Use với Claude cho phép bạn xây dựng:\u003c\/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eWeb scraper thông minh\u003c\/strong\u003e — hiểu ngữ nghĩa, không chỉ parse HTML\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eForm automation\u003c\/strong\u003e — điền form phức tạp theo ngữ cảnh\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eResearch agent\u003c\/strong\u003e — tổng hợp thông tin từ nhiều nguồn\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eMonitoring tool\u003c\/strong\u003e — theo dõi giá, tin tức, changes tự động\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eTesting automation\u003c\/strong\u003e — test UI theo ngôn ngữ tự nhiên\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003eBước tiếp theo: Xem \u003ca href=\"\/en\/collections\/ung-dung\"\u003eCustomer Support Agent\u003c\/a\u003e để thấy cách kết hợp browser automation với knowledge base để xây dựng hệ thống hỗ trợ production-grade, hoặc \u003ca href=\"\/en\/collections\/san-pham\"\u003eComputer Use Demo\u003c\/a\u003e để tìm hiểu về desktop automation.\u003c\/p\u003e\n\n\n\u003chr\u003e\n\u003ch3\u003eBài viết liên quan\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-skills-t%E1%BA%A1o-excel-powerpoint-pdf-t%E1%BB%B1-d%E1%BB%99ng\"\u003eClaude Skills — Tạo Excel, PowerPoint, PDF tự động\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/extended-thinking-tool-use-suy-lu%E1%BA%ADn-sau-k%E1%BA%BFt-h%E1%BB%A3p-cong-c%E1%BB%A5\"\u003eExtended Thinking + Tool Use — Suy luận sâu kết hợp công cụ\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/wolfram-alpha-claude-tinh-toan-chinh-xac-v%E1%BB%9Bi-ai\"\u003eWolfram Alpha + Claude — Tính toán chính xác với AI\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-code-vs-github-copilot-vs-cursor-dau-la-ide-ai-t%E1%BB%91t-nh%E1%BA%A5t\"\u003eClaude Code vs GitHub Copilot vs Cursor — Đâu là IDE AI tốt nhất?\u003c\/a\u003e\u003c\/li\u003e\n\u003cli\u003e\u003ca href=\"\/en\/products\/claude-cho-engineering-code-review-t%E1%BB%B1-d%E1%BB%99ng\"\u003eClaude cho Engineering: Code Review tự động\u003c\/a\u003e\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"Minh Tuấn","offers":[{"title":"Default Title","offer_id":47721911386324,"sku":null,"price":0.0,"currency_code":"VND","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0821\/0264\/9044\/files\/browser-use-demo-claude-t_-d_ng-hoa-trinh-duy_t_c3e2c2c5-18f9-4a99-a6a6-e8794c2414d6.jpg?v=1774521838","url":"https:\/\/claude.vn\/en\/products\/browser-use-demo-claude-t%e1%bb%b1-d%e1%bb%99ng-hoa-trinh-duy%e1%bb%87t","provider":"CLAUDE.VN","version":"1.0","type":"link"}