Page Agent của Alibaba: Một dòng script là web app có ngay AI agent - không cần Playwright, không cần headless browser

TL;DR

Page Agent là thư viện JavaScript mã nguồn mở do Alibaba phát triển, cho phép nhúng một AI agent trực tiếp vào trang web chỉ bằng một đoạn script - không cần backend riêng, không cần Python, không cần headless browser hay Chrome extension. Người dùng gõ lệnh bằng ngôn ngữ tự nhiên, agent tự thao tác giao diện thay cho họ. Điểm đột phá: agent đọc DOM dạng text thay vì chụp ảnh màn hình, hoạt động với mọi LLM có API tương thích OpenAI (GPT-4o, Claude, DeepSeek, Qwen, kể cả Ollama chạy local). MIT license.

Vấn đề với automation truyền thống

Khi nói đến automation trình duyệt, hầu hết developer nghĩ ngay đến Playwright hay Puppeteer. Cả hai đều mạnh, nhưng đều có điểm chung: chạy như một process bên ngoài trình duyệt - mở một phiên riêng, không có session, không có cookie của người dùng thật, phải xử lý login lại từ đầu.

browser-use thêm lớp AI nhưng vẫn là external process, lại cần thêm multimodal LLM vì phải chụp screenshot để "nhìn" trang. Chi phí token tăng đáng kể. Stagehand theo hướng server-side hybrid - vẫn cần backend riêng để vận hành.

Câu hỏi mà Page Agent đặt ra rất đơn giản: nếu người dùng đã ngồi trong trình duyệt rồi, tại sao AI lại phải đứng ở bên ngoài?

Kiến trúc: AI sống ngay trong trang web

Sơ đồ so sánh kiến trúc Page Agent (in-page) và Playwright/Puppeteer (external process) — Page Agent chạy as in-page script - agent tự động có cookie, session, auth của người dùng thật

Page Agent hoạt động theo nguyên tắc hoàn toàn ngược lại so với các tool truyền thống: thay vì mở browser riêng từ server, nó inject trực tiếp vào trang web đang chạy như một JavaScript library bình thường.

Cơ chế cốt lõi là DOM dehydration - kỹ thuật chuyển đổi cấu trúc DOM phức tạp thành một dạng text gọn gàng gọi là FlatDomTree. Thay vì gửi cả cây DOM hay ảnh chụp màn hình lên LLM, Page Agent nén trang thành danh sách các element tương tác dạng text - đủ thông tin để LLM hiểu bố cục và đưa ra hành động, nhưng không tốn token cho các thành phần không liên quan.

Vòng lặp xử lý của agent diễn ra hoàn toàn trong trình duyệt:

DOM extraction - đọc live DOM, tạo FlatDomTree
LLM planning - gửi FlatDomTree + lệnh người dùng lên LLM, nhận action plan
Action parsing - parse kết quả thành hành động cụ thể
Native event dispatch - thực thi qua browser API thật (click, type, scroll)
DOM observation - kiểm tra kết quả, lặp lại nếu cần

Vì chạy trong cùng session với người dùng, agent tự động có cookie, auth token, và mọi quyền truy cập mà user đang có - không cần setup thêm gì.

Bắt đầu trong 5 phút

Demo Page Agent với giao diện chat nhúng vào trang web — Demo chính thức của Page Agent - một dòng script chèn vào <head> là có ngay chat interface

Cách nhanh nhất để thử là nhúng CDN demo vào bất kỳ trang HTML nào:

<script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/page-agent.demo.js"
    crossorigin="anonymous"
></script>

Script này dùng free testing LLM API của team - chỉ để đánh giá kỹ thuật, không dùng cho production. Để tích hợp thật với LLM của riêng mình:

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: 'YOUR_API_KEY',
    language: 'vi-VN',
})

await agent.execute('Click vào nút đăng nhập')

Thay model và baseURL bằng bất kỳ endpoint tương thích OpenAI nào: GPT-4o, Claude 3.5 Sonnet, DeepSeek-V3, hay thậm chí Llama 3 chạy qua Ollama local.

Các tính năng đáng chú ý

Bring Your Own LLM - Không bị lock vào một provider. Page Agent hoạt động với mọi endpoint tương thích OpenAI, bao gồm Ollama để chạy hoàn toàn offline. Với những team có data nhạy cảm, đây là điểm quan trọng.

MCP Server (Beta) - Ngoài việc nhúng vào trang web, Page Agent còn có MCP Server cho phép các agent client bên ngoài (như Claude Desktop, Cursor) điều khiển trình duyệt qua MCP protocol. Mở ra khả năng kết hợp Page Agent vào các agentic workflow phức tạp hơn.

Chrome Extension cho multi-tab - Mặc định Page Agent hoạt động trong một tab. Cài thêm Chrome extension là có thể điều phối tác vụ xuyên nhiều tab - ví dụ: copy data từ tab này, paste vào form ở tab khác.

Scope control và data masking - Có thể giới hạn agent chỉ tương tác với các element nhất định, che thông tin nhạy cảm trước khi gửi lên LLM. Quan trọng cho môi trường enterprise.

Không cần multimodal LLM - Vì xử lý DOM dạng text, mọi model ngôn ngữ đơn giản (text-only) đều dùng được. Tiết kiệm đáng kể chi phí so với gửi ảnh màn hình lên GPT-4V hay Claude Vision.

So sánh với các công cụ khác

Tool	Cách thực thi	Input cho LLM	Phù hợp nhất
Page Agent	In-page JavaScript	FlatDomTree text	AI copilot trong SaaS, app doanh nghiệp
Playwright / Puppeteer	External process	DOM qua WebDriver	E2E testing, web scraping
browser-use	External process	DOM + screenshot	Autonomous multi-site agents
Stagehand	Server-side hybrid	DOM + vision	Server-controlled automation

Page Agent không phải tool tốt nhất cho mọi bài toán. Nếu cần tự động hóa nhiều website khác nhau mà bạn không kiểm soát code, browser-use hay Playwright phù hợp hơn. Page Agent tỏa sáng khi bạn là chủ của ứng dụng web và muốn thêm AI layer lên trên mà không cần viết lại backend.

Giới hạn cần biết trước khi triển khai

Độ chính xác ~70-85% - Đây là giới hạn vốn có của LLM-based planning. Với các tác vụ đòi hỏi 100% chính xác (giao dịch tài chính, ký tài liệu pháp lý), cần có thêm server-side validation hoặc fallback deterministic.

Single-page mặc định - Chrome extension cần cài thêm để làm việc xuyên tab. Không phải vấn đề lớn nhưng cần biết trước nếu workflow của bạn span nhiều trang.

Không xử lý được server-side - Page Agent chỉ tương tác với UI trong trình duyệt. Background jobs, cron tasks, hay automation cần chạy khi user không online - đó là bài toán khác.

Gặp khó với highly dynamic pages - Trang web dùng canvas rendering, WebGL, hay framework cực kỳ phức tạp có thể khiến FlatDomTree kém hiệu quả hơn. DOM chuẩn HTML thì không vấn đề.

Chi phí API tích lũy - Mỗi lần agent thực thi là một API call. Với workload cao, cần tính toán chi phí LLM trước khi scale.

Ai nên dùng Page Agent ngay bây giờ

Team xây dựng SaaS với workflow phức tạp - Nếu sản phẩm có các tác vụ nhiều bước (upload file, điền form nhiều trang, export báo cáo), thêm Page Agent là cách nhanh nhất để ship tính năng AI copilot mà không cần viết lại backend.

Doanh nghiệp dùng ERP, CRM, hệ thống nội bộ cũ - Những hệ thống này thường có form phức tạp và workflow lặp đi lặp lại. Page Agent có thể thêm AI layer lên trên mà không đụng đến code gốc.

Team accessibility - Điều khiển web bằng ngôn ngữ tự nhiên hoặc giọng nói trở thành khả thi với đúng vài dòng code. Không cần build toàn bộ VUI từ đầu.

Những ai nên chờ: nếu bạn cần automation trên các website không phải của mình, hoặc cần độ tin cậy 99%+, thì Playwright hoặc giải pháp hybrid sẽ phù hợp hơn hiện tại.

Kết

Page Agent không cố gắng thay thế Playwright hay browser-use. Nó định vị ở một lớp hoàn toàn khác: thay vì automation từ bên ngoài, nó mang AI vào bên trong sản phẩm của bạn. Với developer đang build SaaS hay ứng dụng nội bộ và muốn thêm AI copilot nhanh mà không cần đụng đến infrastructure, đây là điểm khởi đầu đáng thử nhất trong thời điểm hiện tại.

Mã nguồn MIT, bắt đầu bằng một dòng script. Khó tìm lý do để không thử.

via GitHub alibaba/page-agent