# How the IIFE Demo Build Enables Quick Page Agent Integration Without npm > Discover how the IIFE demo build enables quick Page Agent integration without npm. Auto-initialize Page Agent instantly in your browser for seamless testing. - Repository: [Alibaba/page-agent](https://github.com/alibaba/page-agent) - Tags: how-to-guide - Published: 2026-03-09 --- **The Page Agent IIFE demo build compiles the core library, UI components, and a mock backend into a single script that auto-initializes via `window.pageAgentDemo`, allowing instant browser testing without package managers or bundlers.** The alibaba/page-agent repository provides an **Immediately-Invoked Function Expression (IIFE)** demo build specifically designed for rapid prototyping. This self-contained bundle eliminates the need for npm installations, bundlers, or build steps, making it ideal for quick proofs-of-concept or documentation examples. ## What Is the IIFE Demo Build? The IIFE demo build is a compilation target that packages the entire Page Agent ecosystem into one executable JavaScript file. Unlike the standard npm package which requires installation and import statements, this build creates a **self-initializing script** that exposes functionality through the global `window` object. In [`packages/page-agent/src/demo.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/demo.ts), the entry point defines an IIFE that: - Imports the `PageAgent` class from the core package - Instantiates the agent with default configuration (`enableMask: true`) - Hooks into a mock "demo API" backend that supplies simple tasks - Exposes `window.pageAgentDemo.runTask()` for manual task triggering The resulting bundle includes the **PageAgentCore** logic, the **Panel** UI component, and the **PageController** DOM manipulation layer, all minified into a single distributable file. ## Bundled Architecture and Components The IIFE demo aggregates three distinct architectural layers into one runtime: ### Core Agent Logic At the foundation, the bundle includes `PageAgentCore` from [`packages/core/src/PageAgentCore.ts`](https://github.com/alibaba/page-agent/blob/main/packages/core/src/PageAgentCore.ts). This module handles task planning, LLM communication, and tool dispatch. The demo wraps this core with simplified initialization parameters suitable for browser-based testing. ### UI and Visualization Layer The build automatically injects the **Panel** UI from [`packages/ui/src/Panel.tsx`](https://github.com/alibaba/page-agent/blob/main/packages/ui/src/Panel.tsx) into the bottom-right corner of the page. This interface displays: - Real-time agent state and action logs - Simplified DOM visualization - Generated task plans Additionally, the demo enables the **SimulatorMask** (implemented in [`packages/page-controller/src/PageController.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-controller/src/PageController.ts)), which provides a visual overlay showing where the agent intends to click, type, or scroll. ### Demo Bootstrap Layer The [`packages/page-agent/src/demo.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/demo.ts) file serves as the IIFE entry point. When the script loads, it immediately executes the contained function, creating the global `window.pageAgentDemo` object and starting the agent using the built-in `demoApi` backend. ## Using the IIFE Demo in Your Project Integration requires only a single HTML script tag. You can host the bundled file locally or reference it from a CDN. ### Basic Script Inclusion Add the following to your HTML `` or before the closing `` tag: ```html ``` Or reference a local copy from the repository's `dist` folder: ```html ``` ### Triggering Tasks Programmatically Once loaded, the global `pageAgentDemo` object becomes available. Trigger tasks from the console or inline scripts: ```html ``` ### Interactive Features The IIFE demo automatically initializes with `enableMask: true`, meaning the **SimulatorMask** visual overlay appears immediately. This allows the agent to demonstrate clicks and form interactions safely without modifying your actual page state permanently. ## Build Pipeline and Distribution According to the source code in alibaba/page-agent, the IIFE bundle generates through the standard npm build pipeline using **Vite** and **esbuild**. The build script (defined in the repository's [`package.json`](https://github.com/alibaba/page-agent/blob/main/package.json)) outputs [`page-agent-demo.js`](https://github.com/alibaba/page-agent/blob/main/page-agent-demo.js) (or similar) into the `dist` directory. Key source files involved in the build process: - **[`packages/page-agent/src/demo.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/demo.ts)** – IIFE entry point that bootstraps the runnable instance - **[`packages/page-agent/src/PageAgent.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/PageAgent.ts)** – Main class combining core logic with UI panel integration - **[`packages/core/src/PageAgentCore.ts`](https://github.com/alibaba/page-agent/blob/main/packages/core/src/PageAgentCore.ts)** – Core task planning and tool dispatch implementation - **[`packages/ui/src/Panel.tsx`](https://github.com/alibaba/page-agent/blob/main/packages/ui/src/Panel.tsx)** – React-based UI panel for state visualization - **[`packages/page-controller/src/PageController.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-controller/src/PageController.ts)** – DOM extraction and action execution with optional masking Because the build uses standard npm scripts, you can regenerate the IIFE bundle after modifying source code by running: ```bash npm run build ``` This outputs a fresh [`page-agent-demo.js`](https://github.com/alibaba/page-agent/blob/main/page-agent-demo.js) ready for CDN deployment or GitHub Pages hosting. ## Summary - The **IIFE demo build** packages Page Agent core logic, UI components, and a mock backend into a single executable script - Entry point lives in [`packages/page-agent/src/demo.ts`](https://github.com/alibaba/page-agent/blob/main/packages/page-agent/src/demo.ts), which auto-initializes `window.pageAgentDemo` on load - Requires zero npm installs or bundlers—just add a `