Page Agent - Alibaba's open-source JavaScript GUI intelligent agent library - AiBoss

What is Page Agent?

Page Agent is an open-source, pure front-end JavaScript intelligent agent library from Alibaba. Embedded in a webpage with a single line of code, it allows users to manipulate page DOM elements using natural language. The client-side library uses DOM dehydration technology to compress complex pages into a simplified text tree, supports any OpenAI-compatible model, and enables interactions such as clicking, form filling, and scrolling without requiring a backend, screenshots, or browser extensions. It is ideal for quickly adding AI co-pilot functionality to your own web applications.

Main functions of Page Agent

Natural language control pageWhen a user inputs commands such as clicking the login button or filling out a form, the AI automatically locates and performs DOM operations.
DOM dehydration compressionThis method compresses complex page structures into a FlatDomTree text tree, extracting only interactive elements and reducing model input costs.
Model-independent architectureSupports any OpenAI-compatible endpoint (such as Tongyi Qianwen, GPT, etc.), simply configure the baseURL and API Key.
Built-in security controlsSupports operation whitelisting, sensitive field data anonymization, manual confirmation of key operations, and custom domain knowledge injection.
Single-page interaction loopComplete click, input, scroll, and other operations within a single page, without the need for backend services or browser extensions.

The technical principles of Page Agent

DOM DehydrationScan the page's DOM, assign an index, role, and label to each interactive element, strip away redundant tags, and generate a compact text representation for the model to understand.
PageController ArchitectureThe core controller is responsible for updating the DOM tree and performing atomic operations such as element clicks, text input, and page scrolling.
Monorepo Subcontracting Design:@page-agent/core Responsible for the logic of the headless intelligent agent.page-agent Provides a complete UI panel.@page-agent/page-controller Handling DOM extraction and indexing.
Client Sandbox OperationIt runs directly in the user's browser session, inheriting Cookie, Session, and authentication status, without requiring an additional backend.

How to use Page Agent

Quick ExperienceInsert a line into a webpage <script> By including the Page Agent's IIFE demo script in the tag, you can activate the AI control panel on the page.
Install dependenciesProduction environment npm install page-agent Install the dependencies and import them into your front-end project.
Create an instance:use new PageAgent() Create an instance and configure parameters such as model, baseURL, and apiKey to point to your OpenAI-compatible model endpoint.
Execute instructions: call agent.execute('你的自然语言指令') AI can parse instructions and automatically locate elements in the page's DOM, performing actions such as clicks or input.
Security ConfigurationOptional configuration options include operation whitelists, data anonymization rules, and key operation confirmation to ensure that AI behavior complies with security and business requirements.

Page Agent's core advantages

Zero backend transformationIt can be embedded in a single line of script, without the need to rewrite the backend or distribute browser extensions.
Low-cost operationIt transmits only the text DOM structure, eliminating the need for a multimodal visual model and significantly reducing token consumption.
Native security inheritanceThe original UI validation and permission rules of the page will continue to be effective, and sensitive data can be anonymized.
Model-independentSupports any OpenAI-compatible endpoint; switching models only requires changing the baseURL.
MIT Open SourceWritten in TypeScript, the code is completely open and can be freely customized.

Page Agent's project address

Project official websitehttps://alibaba.github.io/page-agent/
GitHub repositoryhttps://github.com/alibaba/page-agent

Comparison of Page Agent with similar products

Dimension	Page Agent	Playwright
Running location	Internal to the page (client-side JavaScript)	External processes (Node.js/Python/.NET)
Page loading	Dehydrated text DOM (FlatDomTree)	The CDP protocol allows direct access to the browser's DOM.
Interaction methods	Natural language instruction driver	Precise control of code scripts
Model dependency	Requires LLM parsing instructions	No AI model required, pure rule execution
Deployment method	Embed a line `<script>` Or install via npm	Install browser driver + runtime environment
Authentication status	Automatically inherit user browser cookies/sessions	Context or login process needs to be configured manually.
visual ability	None, plain text DOM	Supports screenshot, visual comparison, and screen recording.
Cross-page capability	Primarily single-page application; cross-tab functionality requires a Chrome extension.	Native support for multiple tabs, multiple windows, and multiple browsers
Applicable Scenarios	Add an AI co-pilot to existing web applications	End-to-end automated testing, cross-site crawling
Learning cost	Low, can be achieved using natural language.	In this process, selectors and scripts need to be written.

Application scenarios of Page Agent

SaaS product AI co-pilotEmbed an assistant in your own product to directly help users perform operations instead of just providing text instructions.
Smart form fillingThis function compresses multi-step ERP/CRM forms into a single command, such as "Submit a 50 RMB travel expense reimbursement for yesterday's lunch".
AccessibilityBy combining the Web Speech API, we enable voice control of web pages, improving the user experience for visually impaired users.
Legacy system modernizationAdd a natural language command bar to legacy systems without an API, without modifying the original code.