how-to-guide

How the IIFE Demo Build Enables Quick Page Agent Integration Without npm

March 9, 2026 alibaba/page-agent ↗

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, 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. 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 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), 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 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 <head> or before the closing </body> tag:

<script src="https://unpkg.com/page-agent/dist/page-agent-demo.js"></script>

Or reference a local copy from the repository's dist folder:

<script src="./dist/page-agent-demo.js"></script>

Triggering Tasks Programmatically

Once loaded, the global pageAgentDemo object becomes available. Trigger tasks from the console or inline scripts:

<script>
  window.addEventListener('load', () => {
    // Use the helper exposed by the IIFE demo
    window.pageAgentDemo.runTask('Summarize the main headings on this page');
  });
</script>

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) outputs page-agent-demo.js (or similar) into the dist directory.

Key source files involved in the build process:

Because the build uses standard npm scripts, you can regenerate the IIFE bundle after modifying source code by running:

npm run build

This outputs a fresh 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, which auto-initializes window.pageAgentDemo on load
  • Requires zero npm installs or bundlers—just add a <script> tag referencing the CDN or local dist/page-agent-demo.js
  • Includes built-in SimulatorMask and Panel UI for immediate visual feedback and debugging
  • Built using Vite and esbuild through the standard repository build pipeline

Frequently Asked Questions

Where is the IIFE demo entry point located?

The IIFE demo entry point is packages/page-agent/src/demo.ts. This file contains the Immediately-Invoked Function Expression that imports the PageAgent class, configures it with enableMask: true, connects to the mock demoApi backend, and exposes the global window.pageAgentDemo object for browser access.

How do I trigger tasks when using the IIFE build?

After the script loads, use window.pageAgentDemo.runTask('your task description'). The demo.ts file explicitly exposes this helper method on the global object, allowing you to programmatically start agent tasks from the browser console or from other scripts on the same page.

Can the IIFE demo be used in production environments?

The IIFE demo is designed for rapid prototyping and testing, not production deployment. It includes the mock demoApi backend and default configurations optimized for demonstration purposes. For production use, import the modular npm packages (@page-agent/core, @page-agent/ui) to configure custom backends and authentication properly.

What build tools generate the IIFE demo bundle?

The repository uses Vite combined with esbuild (configured in the standard package.json build scripts) to generate the IIFE bundle. This compiles TypeScript, bundles React components from packages/ui/src/Panel.tsx, and packages the core logic into the single page-agent-demo.js file found in the dist folder.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →