AI & AUTOMATION

Page Agent (Alibaba): Điều khiển giao diện web bằng ngôn ngữ tự nhiên, không cần backend hay headless browser

14/03/20261 view0

Tóm tắt nhanh (Key Takeaways)

Page Agent chạy hoàn toàn phía client (in-page): không cần backend, không cần Chromium headless, không cần Python. Chỉ cần một thẻ <script> hoặc lệnh npm install là đủ để biến bất kỳ trang web nào thành giao diện có thể điều khiển bằng ngôn ngữ tự nhiên.

Phân tích DOM dạng văn bản thuần (text-based DOM): không dùng ảnh chụp màn hình, không cần LLM đa phương thức (multimodal). Cách tiếp cận này rẻ hơn, nhanh hơn và không yêu cầu quyền đặc biệt của trình duyệt.

Dự án mã nguồn mở MIT của Alibaba, hỗ trợ mô hình BRING YOUR OWN LLM: tích hợp Qwen (Alibaba DashScope), OpenAI, hoặc bất kỳ endpoint tương thích OpenAI nào, kèm theo giao diện human-in-the-loop có sẵn để người dùng xác nhận trước khi Agent thực thi hành động.

Kỷ nguyên Agentic Web và khoảng trống phía client

Trong nhiều năm, browser automation đồng nghĩa với Selenium hoặc Playwright: những công cụ mạnh mẽ, chạy trên server, điều khiển trình duyệt từ bên ngoài thông qua các driver và protocol chuyên dụng. Khi AI xuất hiện, các thư viện như browser-use bổ sung một tầng suy luận LLM lên trên kiến trúc đó, nhưng vẫn đòi hỏi Python backend, Docker, và một lần nữa hạ tầng server.

Câu hỏi đặt ra là: điều gì xảy ra nếu Agent không điều khiển trình duyệt từ bên ngoài, mà sống trực tiếp bên trong trang web như một thành phần JavaScript bình thường?

Page Agent của Alibaba, phát hành mã nguồn mở tại github.com/alibaba/page-agent, trả lời đúng câu hỏi đó. Thay vì chụp ảnh màn hình và gửi cho mô hình đa phương thức như cách tiếp cận của Anthropic’s Computer Use, Page Agent đọc cấu trúc DOM dưới dạng văn bản, gửi cho LLM text-only, nhận về kế hoạch hành động, và thực thi trực tiếp trên DOM – tất cả trong cùng một tab trình duyệt nơi người dùng đang làm việc.

Cơ chế hoạt động của Page Agent

Kiến trúc in-page: Agent sống bên trong trang web

Điểm khác biệt kiến trúc căn bản nhất của Page Agent so với Playwright hay Selenium là vị trí thực thi. Playwright chạy một tiến trình Node.js độc lập kết nối vào trình duyệt qua Chrome DevTools Protocol. Selenium điều khiển trình duyệt qua WebDriver từ một process khác. Cả hai đều hoạt động từ ngoài vào trong.

Page Agent thực thi ngay trong context của trang web hiện tại, giống như bất kỳ đoạn JavaScript nào người dùng chạy trong DevTools console. Nó không mở trình duyệt mới, không spawn tiến trình ngoài, không cần server lắng nghe kết nối. Toàn bộ vòng lặp quan sát – suy luận – hành động diễn ra trong tab đang mở.

Phân tích DOM dạng văn bản và vòng lặp suy luận

Khi người dùng gõ một câu lệnh tự nhiên (“Điền form đăng ký với email [email protected]”), Page Agent thực hiện quy trình sau:

Serialization (Tuần tự hóa DOM): Page Agent quét toàn bộ DOM hiện tại, trích xuất các phần tử tương tác được – nút bấm, ô nhập liệu, liên kết, dropdown – và chuyển thành chuỗi văn bản có cấu trúc. Không có ảnh chụp màn hình nào được tạo ra.
LLM reasoning (Suy luận LLM): Chuỗi văn bản DOM cùng câu lệnh của người dùng được gửi đến LLM được cấu hình. LLM phân tích ngữ cảnh và trả về một kế hoạch hành động: ví dụ [{"action": "type", "selector": "#email-input", "value": "[email protected]"}, {"action": "click", "selector": "#submit-btn"}].
Execution (Thực thi): Page Agent nhận kế hoạch, ánh xạ từng bước về các phần tử DOM tương ứng và thực thi tuần tự thông qua các API trình duyệt chuẩn.

Vì chỉ xử lý văn bản thay vì hình ảnh, phương pháp này tiêu tốn ít token LLM hơn đáng kể so với cách tiếp cận dựa trên ảnh chụp màn hình, đồng thời nhanh hơn vì bỏ qua bước phân tích hình ảnh tốn chi phí tính toán cao.

Human-in-the-loop: Con người kiểm soát trước khi thực thi

Một tính năng thiết kế nổi bật là giao diện human-in-the-loop được tích hợp sẵn (không phải tùy chọn thêm vào). Trước khi thực thi bất kỳ hành động nào, Page Agent hiển thị danh sách bước dự kiến và chờ xác nhận từ người dùng. Điều này quan trọng trong các ngữ cảnh production: một Agent tự động điền biểu mẫu tài chính hay nhấn nút “Xác nhận thanh toán” mà không có điểm kiểm soát con người là rủi ro không thể chấp nhận.

So sánh Page Agent với các công cụ automation

Tiêu chí	Page Agent	browser-use	Playwright	Selenium
Chạy trong trình duyệt	Có	Không	Không	Không
Cần backend	Không	Có (Python)	Có	Có
Mức độ tích hợp	1 dòng code	Đáng kể	Đáng kể	Đáng kể
Human-in-the-loop	Có sẵn	Không	Không	Không
Dùng ảnh chụp màn hình	Không	Tùy chọn	Không	Không
Cần LLM đa phương thức	Không	Tùy chọn	Không áp dụng	Không áp dụng
Trường hợp dùng chính	AI copilot in-page	Tự động hóa server	Kiểm thử E2E	Kiểm thử E2E
Đa tab/trang	Qua Chrome extension	Có sẵn	Có sẵn	Có sẵn

Hướng dẫn cài đặt Page Agent

Nhúng trực tiếp bằng thẻ script (không cần build tool)

Phương pháp nhanh nhất để đánh giá kỹ thuật là nhúng trực tiếp từ CDN. Phiên bản demo sử dụng API LLM miễn phí của Alibaba chỉ dành cho mục đích thử nghiệm:

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

<!-- Mirror China -->
<script src="https://registry.npmmirror.com/page-agent/1.5.7/files/dist/iife/page-agent.demo.js" crossorigin="true">
</script>

Sau khi script tải xong, giao diện điều khiển của Page Agent xuất hiện trực tiếp trên trang. Không cần cấu hình thêm cho bước đánh giá ban đầu.

Cài đặt qua npm cho dự án JavaScript/TypeScript

Để tích hợp vào dự án production với LLM của riêng bạn:

npm install page-agent

Hoặc nếu dùng pnpm:

pnpm add page-agent

CẤU HÌNH LLM VÀ API KEY

Page Agent hỗ trợ bất kỳ endpoint tương thích OpenAI nào. Ví dụ cấu hình với mô hình Qwen của Alibaba DashScope:

import { PageAgent } from 'page-agent'

const agent = new PageAgent({  model: 'qwen3.5-plus',  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',  apiKey: process.env.DASHSCOPE_API_KEY,  language: 'vi-VN',  // Ngôn ngữ phản hồi của Agent
})

Để dùng OpenAI GPT-4o thay thế, chỉ cần thay đổi thông số:

const agent = new PageAgent({  model: 'gpt-4o',  baseURL: 'https://api.openai.com/v1',  apiKey: process.env.OPENAI_API_KEY,  language: 'vi-VN',
})

Trường apiKey không bao giờ nên được hardcode trực tiếp vào source code. Sử dụng biến môi trường hoặc secret management phù hợp với môi trường triển khai của bạn.

Hướng dẫn sử dụng: Các ví dụ điều khiển giao diện thực tế

Điều khiển nút bấm và điều hướng cơ bản

Sau khi khởi tạo đối tượng PageAgent, thực thi lệnh bằng phương thức execute() nhận chuỗi ngôn ngữ tự nhiên:

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

// Điều hướng đến mục cài đặt
await agent.execute('Mở mục Cài đặt tài khoản')

// Cuộn xuống cuối trang
await agent.execute('Cuộn xuống cuối danh sách sản phẩm')

Page Agent phân tích DOM, xác định phần tử phù hợp nhất với mô tả trong câu lệnh, hiển thị kế hoạch thực thi cho người dùng xác nhận, rồi thực hiện hành động tương ứng.

Điền form tự động trong hệ thống ERP/CRM

Đây là use case mạnh nhất của Page Agent. Thay vì người dùng phải điều hướng qua 20 bước trong một màn hình nhập liệu phức tạp, một câu lệnh duy nhất có thể xử lý toàn bộ:

// Điền thông tin khách hàng mới vào CRM
await agent.execute(  'Tạo khách hàng mới: tên Nguyễn Văn An, email [email protected], ' +  'số điện thoại 0909123456, phân loại Doanh nghiệp vừa'
)

// Xuất báo cáo tháng trong hệ thống ERP
await agent.execute(  'Xuất báo cáo doanh thu tháng 3 năm 2025, định dạng Excel'
)

Page Agent đọc cấu trúc form từ DOM, ánh xạ từng trường thông tin từ câu lệnh vào ô nhập liệu phù hợp, và điền tuần tự.

Tích hợp vào SaaS product như một AI Copilot

Đây là trường hợp sử dụng hướng tới nhà phát triển muốn bổ sung tính năng AI vào sản phẩm hiện có mà không cần viết lại backend:

// Trong component React/Vue của bạn
import { PageAgent } from 'page-agent'

const copilot = new PageAgent({  model: 'gpt-4o-mini',  baseURL: 'https://api.openai.com/v1',  apiKey: userApiKey,    // API key từ settings của người dùng  language: 'vi-VN',
})

// Gắn vào input trong UI
document.getElementById('copilot-input')  .addEventListener('keydown', async (e) => {      if (e.key === 'Enter') {          await copilot.execute(e.target.value)      }  })

Kết quả là người dùng cuối của SaaS có thể gõ “Tạo hóa đơn cho đơn hàng #1234 và gửi email xác nhận cho khách” và Agent xử lý toàn bộ quy trình điều hướng, điền form và nhấn nút trên giao diện hiện tại.

Với các tác vụ cần chuyển qua nhiều tab, cài đặt thêm Chrome extension chính thức của Page Agent từ tài liệu tại alibaba.github.io/page-agent/docs/features/chrome-extension để mở rộng phạm vi hoạt động vượt ranh giới một trang đơn lẻ.

Giới hạn hiện tại cần lưu ý

Để đánh giá dự án một cách trung thực, có bốn giới hạn kỹ thuật quan trọng cần xem xét trước khi triển khai:

Không có xử lý nền (background processing): Page Agent chỉ hoạt động khi người dùng đang có mặt trong tab. Không thể lên lịch tác vụ tự động chạy theo cron hay ngoài giờ làm việc.
Chi phí token theo từng hành động: Mỗi lần thực thi đều tiêu tốn token LLM. Các quy trình nhiều bước phức tạp có thể phát sinh chi phí đáng kể nếu không có kiểm soát.
Phụ thuộc vào chất lượng DOM: Giao diện dùng virtual DOM không chuẩn, canvas rendering, hoặc phần tử được render bằng kỹ thuật đặc biệt có thể gây khó khăn cho quá trình serialization.
Phạm vi đơn tab mặc định: Không có Chrome extension, Agent bị giới hạn trong một trang. Đây là đánh đổi có chủ đích của kiến trúc in-page so với các công cụ headless.

Page Agent đặt ra một tiêu chuẩn khác về cách AI Agent tương tác với giao diện web. Trong khi các giải pháp hiện tại yêu cầu hạ tầng phức tạp ở phía server, Page Agent chứng minh rằng phần lớn các tác vụ tự động hóa giao diện có thể được thực hiện hiệu quả chỉ với JavaScript phía client, DOM text serialization và một LLM text-only.

Tác động với UX/UI là có thật và đang hiện hữu: mọi giao diện web phức tạp – từ màn hình nhập liệu ERP đến dashboard phân tích – có thể trở thành giao diện hội thoại mà không cần thiết kế lại từ đầu. Đây là lộ trình khả thi nhất để các sản phẩm SaaS truyền thống chuyển đổi sang mô hình AI-native trong ngắn hạn: không phải bằng cách viết lại backend, mà bằng cách nhúng một Agent vào giao diện đang chạy.

Trong dài hạn, khi tính năng Clipmart của Paperclip hay các tiêu chuẩn như Agent Skills trở nên phổ biến hơn, những công cụ in-page như Page Agent nhiều khả năng sẽ trở thành tầng thực thi (execution layer) mà các hệ thống điều phối cấp cao hơn giao tiếp xuống – hoàn thiện vòng tự động hóa từ quyết định chiến lược đến tương tác giao diện người dùng.

Duy Nghiện

Hãy làm khán giả, đừng làm nhân vật chính :)