Alibaba Page Agent

1. Project Overview

! [[17-Temporary Attachments/Page-Agent/banner-light.png]]

2. One word explanation

Page Agent can be understood as "AI operator embedded in your web page": after the developer introduces a JS or npm package into the web page and configures LLM supporting tool call, the user can enter natural language instructions such as "help me open the settings and modify the notification method", "fill in this reimbursement form", "search for an order and export the results, the Agent reads the DOM of the page, plans the action, and completes the operation of clicking, inputting, selecting, scrolling, etc.

It differs from traditional browser automation tools in that:

3. Key Screenshot

Demo Home Page

! [[17-Temporary Attachments/Page-Agent/page-agent-home.png]]

This figure is suitable for pre-sales materials to illustrate Page Agent's product perception: the user enters a natural language task in the current web page, and the agent in the page helps the user to complete the operation. The official selling points emphasized in the screenshots can also be seen directly: pure front-end scheme, support for private models, no need for desensitization, and MIT open source.

Chrome Extensibility

! [[17-Temporary Attachments/Page-Agent/page-agent-chrome-extension.png]]

Chrome Extension are optional enhancements. PageAgent.js itself is responsible for in-page automation; extensions additionally provide multi-page tasks, browser-level control, and the ability to initiate tasks from outside the browser.

Model configuration and support

! [[17-Temporary Attachments/Page-Agent/page-agent-models.png]]

The official document emphasizes support for models that comply with the OpenAI API specification and support tool call, including public cloud and local/private deployment paths. During pre-sales communication, pay attention to whether the model supports stable tool call, whether the context length is sufficient, and whether the enterprise-side agent needs to forward LLM requests will directly affect the landing effect.

4. What does it mostly do?

5. Typical applicable scenarios

6. Not quite the scene

7. Architecture and Component Understanding

The official development guide shows that Page Agent is an npm workspaces monorepo, and the core package can be understood as follows:

Simplify workflow

Relationship between extension and MCP

The pre-sales explanation can be said as follows: the basic version embeds an in-page AI operator in the customer's own Web application; If you want to control the browser across pages, across tabs or let an external Agent, you need to introduce Chrome Extension and MCP Server.

How to use #8.

Mode 1: Demo CDN Fast Experience

The official provides a one-line script for technical evaluation:

China Mirror:

Note: The official Demo CDN uses the free test LLM API, which is only suitable for technical evaluation and R & D testing, and should not be used directly in a production environment, nor should personally identifiable information or sensitive data be entered.

Mode 2: npm integration

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: 'zh-CN',
})

await agent.execute('点击登录按钮')

Method 3: Production Environment Suggestions

If you want to integrate into the enterprise Web application, the official document suggests not to put the real LLM API Key into the front-end code. A more reasonable way is to forward the LLM request by the enterprise back-end agent, and do authentication, auditing, flow limiting, desensitization and model routing at the agent layer.

const agent = new PageAgent({
  baseURL: '/api/llm-proxy',
  model: 'gpt-5.1',
  customFetch: (url, init) =>
    fetch(url, { ...init, credentials: 'include' }),
})

Method 4: MCP Server Beta

If the customer already has a local Agent client, you can access it through '@ page-agent/mcp:

{
  "mcpServers": {
    "page-agent": {
      "command": "npx",
      "args": ["-y", "@page-agent/mcp"],
      "env": {
        "LLM_BASE_URL": "https://api.openai.com/v1",
        "LLM_API_KEY": "sk-xxx",
        "LLM_MODEL_NAME": "gpt-5.2"
      }
    }
  }
}

The official explanation is that MCP Server is still Beta and can be used for pre-sales demonstration, but special attention should be paid to security authorization, stability and version compatibility for production landing.

9. What can I say before sales

Business-oriented

Technology-oriented

10. PoC Recommendations

Recommended PoC Target

Choose a process that the customer is familiar with, has clear pain points, and can control risks, such:

PoC range control

Example of Acceptance Index

11. Risks and Considerations

12. Relationship with related programs

13. My Pre-Sales Judgment

The value of Page Agent lies in that it takes "AI question and answer" to "AI executable operations", which is especially suitable for B- side Web systems. The problem with many enterprise systems is not that they have no functions, but that they have too many functions, too deep paths, and users do not know how to use them. Page Agent's page embedded mode is very suitable for packaging complex operations into natural language portals and verifying the actual value of AI Copilot with low transformation costs.

Its most suitable pre-sales entry point is not "automatic replacement of manual", but "to assist users to complete complex page operations". In the expression of the scheme, it should be emphasized that it can be controlled, audited, confirmed and taken over. Promises to customers should also be clear boundaries: it is not good at visual recognition, not suitable for large-scale server-side crawlers, not suitable for unprotected execution of high-risk actions.

It is recommended that the pre-sales Demo choose a high-frequency process that customers are familiar with, such as "Create Customer Profile", "Submit Reimbursements", "Configure Product Parameters", "Search Orders and Generate Reports". During the demonstration, the user will first see the natural language portal, and then show how the Agent understands the page, operates step by step, and requests the user to confirm if necessary. This makes it easier for business parties to understand value than simply talking about technical architecture.

14. Reusable customer Q & A

15. Follow-up recommendations

1. Select a customer's real process to do PoC for 1-2 weeks, and give priority to pages with intensive forms, high frequency repetition and controllable risks.
2. Combing the DOM and accessibility quality of the page, and supplementing the button text, form label and ARIA attributes.
3. Determine the model route: public cloud, Qwen, OpenAI-compatible gateway, local Ollama/LM Studio, or the existing model platform of the customer.
4. Design security policies: back-end agent, data desensitization, operation whitelist, secondary confirmation, audit log, exception takeover.
5. Re-evaluate Chrome Extension and MCP Server if cross-page or external agent platforms are involved.

16. REFERENCE

-GitHub repository: alibaba/page-agent

-Page Agent Official Demo

-Official Document: Overview

-Official Document: Quick Start

-Official Document: Limitations

-Official: Chrome Extension

-Official Document: MCP Server Beta

-Official Document: Models

-npm:page-agent

-Release v1.10.0

-Terms and Privacy