Most browser agents work like a tourist with a camera. They take a screenshot, feed it to a vision model, guess the pixel coordinates of a button, and click. It is slow, expensive, and brittle — one CSS tweak and the guess falls apart. Alibaba's newly open-sourced Page Agent throws that playbook out. Instead of looking at the page, it reads the page, operating directly on the DOM as text the way a developer inspecting the elements panel would.
The result is a lightweight, MIT-licensed TypeScript library that turns any web interface into something a language model can drive with plain sentences. No Python backend, no headless Chrome cluster, no multimodal model. Just a script tag.
What Page Agent actually is
Page Agent is an in-page GUI agent. It lives inside the webpage as plain JavaScript and acts as the real user — clicking, typing, scrolling, and navigating through the live DOM. Because it runs client-side in the same context as your app, it needs no special browser permissions and no external automation infrastructure.
The core idea is a technique the project calls DOM dehydration. The full DOM of a modern web app is enormous and noisy — thousands of nested nodes, most of them irrelevant to any given task. Page Agent compresses this into a compact text structure it calls a FlatDomTree: a flattened, deduplicated map of just the interactive and meaningful elements. That compression is what makes the approach work with smaller, cheaper text models. You are not asking a frontier vision model to reason about a 4K screenshot; you are handing a text model a clean list of what is on the page and what can be done with it.
Why reading beats looking
The distinction sounds academic until you count the costs. A screenshot-based agent pays for:
- Image tokens on every step (a full-page capture is expensive)
- A multimodal model, which is pricier and slower than text-only
- Coordinate guessing, which breaks on responsive layouts and zoom levels
Page Agent sidesteps all three. Reading the DOM gives it exact element references instead of pixel guesses, so a button click targets the actual node rather than an (x, y) coordinate that shifts when the layout reflows. It is faster because text inference is faster, cheaper because there are no image tokens, and more precise because there is no guessing involved.
There is also a practical deployment story here. Before this, adding natural-language control to a web app meant standing up a backend service, managing a separate browser-automation process, and wiring it all together. Page Agent collapses that into a few lines that run where your app already runs.
Getting started
Installation is a single package:
npm install page-agentOr drop it into any page with a CDN script tag for quick testing:
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>The programmatic API is deliberately small. You construct an agent with your model configuration and give it a task in natural language:
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: 'en-US',
})
await agent.execute('Click the login button')Because the model is reached through an OpenAI-compatible endpoint, Page Agent is model-agnostic. Point baseURL at Alibaba's DashScope, your own gateway, a local server, or any provider that speaks the OpenAI chat format. The model field is just a string the endpoint understands — swap Qwen for another model without touching the rest of your code.
Chaining real workflows
The single-click example undersells it. The payoff is compressing multi-step flows into one instruction. Consider a support agent filling out an internal ticketing tool:
await agent.execute(
'Open a new high-priority ticket, set the customer to Acme Corp, ' +
'assign it to the billing team, and add a note that the invoice ' +
'was sent twice.'
)That is potentially a dozen clicks and field edits across a crowded admin panel, expressed as one sentence. This is where the library aims squarely at ERP, CRM, and internal dashboards — the dense, high-friction interfaces where a natural-language shortcut saves the most time.
Human-in-the-loop by default
Handing an agent the keys to a live production dashboard is nerve-wracking, and the project treats that seriously. Page Agent includes a built-in human approval step, so an agent can propose an action and wait for a person to confirm before it touches anything consequential. This keeps the automation useful for real internal tools without turning it into an unsupervised bot that might submit the wrong form. For anything that mutates data, keep approvals on.
Beyond a single tab
Two extensions push Page Agent past the single-page case:
- Chrome extension — enables cross-tab control, so an agent can coordinate a workflow that spans multiple pages or apps rather than being trapped in one document.
- MCP Server (beta) — exposes the in-page agent through the Model Context Protocol, letting external agents drive the browser. This is the interesting one for the broader agent ecosystem: a desktop assistant or an orchestration layer speaking MCP can now reach into a live web app and operate it, using Page Agent as the hands. If you have been following the rise of MCP as a connective standard, this slots right in.
Where it fits — and where it does not
Page Agent is a strong fit when you control the web app and want to add a natural-language layer to it: internal admin panels, SaaS products offering an AI assistant, accessibility tooling, or smart form-filling. Because it reads the DOM, it also degrades gracefully — it works with the semantic structure of the page rather than fragile pixel positions.
It is a weaker fit for adversarial automation across sites you do not control, where injecting a script is not an option and screenshot-based agents with full browser control still have a role. And like any DOM-reading tool, it depends on the page being reasonably structured; a canvas-rendered app with no accessible DOM gives it little to read.
The bigger signal
The most interesting thing about Page Agent is not any single feature — it is the bet. As agentic workflows burn more tokens per task, the smartest long-term investment is not the model but the context tooling layer around it. Page Agent is exactly that layer for the browser: a model-agnostic, reusable way to hand any LLM a clean, actionable view of a web page. The model is swappable. The DOM-dehydration pipeline that makes cheap models act precisely is the durable part.
For teams building internal tools or AI-assisted products in the MENA region and beyond, it is a low-commitment way to add real natural-language control to an existing interface — one script tag, your own model, and a text map of the page instead of a guess at a screenshot. If you want a hand designing agent-driven experiences into your own products, our team works on exactly this.