{
  "schemaVersion": "1.0",
  "entity": "BlogPosting",
  "title": "Alibaba's page-agent: Architecture, DOM Dehydration & BYOLLM",
  "description": "Deep dive into Alibaba's open-source client-side GUI agent, exploring text-based DOM dehydration, session inheritance, and BYOLLM architecture.",
  "author": "vd",
  "datePublished": "2026-07-28T10:00:00.000Z",
  "dateModified": "2026-07-28T10:00:00.000Z",
  "tags": [
    "page-agent",
    "DOM Dehydration",
    "BYOLLM",
    "AI Architecture",
    "Browser Automation"
  ],
  "aeoDirectAnswers": [
    {
      "question": "The Engine: Text-Based DOM Dehydration — How Does It Work?",
      "answer": "The most critical architectural decision in page-agent is its observation mechanism. Instead of capturing resource-intensive visual screenshots and processing them through OCR or Vision-Language Models (VLMs), it employs **Text-Based DOM Dehydration**."
    },
    {
      "question": "How DOM Dehydration Works",
      "answer": "**Parsing:** The agent traverses the Document Object Model (DOM). **Extraction:** It extracts visible text content from interactive elements (buttons, inputs, links, text nodes). **Indexing:** It maps these elements to a structured, indexed plain-text representation (the BrowserState object)."
    },
    {
      "question": "BYOLLM: Bring Your Own LLM Paradigm — How Do You Connect Your Model?",
      "answer": "page-agent does not lock you into a proprietary model. It implements a **Bring Your Own LLM Paradigm (BYOLLM)** architecture. As long as your model supports the OpenAI-compatible API format and tool-calling capabilities, it works seamlessly: **Cloud Models:** GPT-4o, Claude 3.5 Sonnet, Qwen-Max. **Local Models:** Ollama, vLLM, LM Studio."
    },
    {
      "question": "Is `page-agent` a headless browser like Puppeteer?",
      "answer": "No. page-agent is an in-page client-side JavaScript library. It runs directly inside the user's active browser tab, inheriting their session, unlike headless browsers which run as external, separate processes."
    },
    {
      "question": "How does `page-agent` \"see\" the webpage?",
      "answer": "It uses Text-Based DOM Dehydration. Instead of taking visual screenshots, it parses the HTML structure into indexed plain-text elements, making it much faster and cheaper to process than vision-based models."
    },
    {
      "question": "Can I use my own AI model with `page-agent`?",
      "answer": "Yes. It uses a BYOLLM (Bring Your Own LLM) paradigm, supporting any OpenAI-compatible API, including GPT-4, Claude, Qwen, and local models via Ollama."
    }
  ],
  "semanticFactualBody": "Alibaba's page-agent: Architecture, DOM Dehydration, and the BYOLLM Paradigm provides a client-side paradigm shift for browser AI interaction. Alibaba’s page-agent is an open-source, client-side JavaScript library that turns web pages into AI-native applications. Unlike external headless browsers, it runs directly in the browser context, using **text-based DOM dehydration** to parse HTML into lightweight text tokens. This cuts inference costs by 10x–20x compared to vision models, while supporting a **Bring Your Own LLM (BYOLLM)** architecture for maximum flexibility. Core Architecture: In-Page Execution vs. External Orchestrators Traditional browser automation relies on external orchestrators like Puppeteer, Playwright, or Selenium. These tools launch a separate browser instance, requiring complex network interception, session management, and heavy infrastructure. page-agent flips this paradigm. It is an **in-page client-side JavaScript library**. When injected into a webpage, it lives inside the same execution context as the application itself. The Session Advantage Because it runs natively within the browser tab, page-agent automatically inherits the active user's session, cookies, and local storage. This eliminates the need for complex authentication flows or network-level cookie injection, making it exceptionally powerful for automating authenticated workflows in SaaS, ERP, or CRM platforms. The Engine: Text-Based DOM Dehydration — How Does It Work? The most critical arch"
}