# Dejá de Automatizar el Navegador: El Agente de Alibaba Vive Dentro de tu Aplicación

**URL:** <https://www.yodev.dev/t/deja-de-automatizar-el-navegador-el-agente-de-alibaba-vive-dentro-de-tu-aplicacion/3607>\
**Category:** AI Dev Tools — General\
**Tags:** llm, copilots, page-agent, yodev, web-development, frontend, dev-tools, open-source\
**Created:** [6 Julio, 2026 18:46 UTC](https://www.yodev.dev/t/deja-de-automatizar-el-navegador-el-agente-de-alibaba-vive-dentro-de-tu-aplicacion/3607 "2026-07-06T18:46:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\
**Post date:** [6 Julio, 2026 18:46 UTC](https://www.yodev.dev/t/deja-de-automatizar-el-navegador-el-agente-de-alibaba-vive-dentro-de-tu-aplicacion/3607/1 "2026-07-06T18:46:48Z")

</div>

![PageAgent](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/c/c819ce611be40f149c8ffb426aadd6bb51b3334f.jpeg)

Durante años, cuando hablábamos de automatizar una aplicación web, todos pensábamos más o menos en lo mismo.

Selenium.

Puppeteer.

Playwright.

Un agente que observa la interfaz desde afuera, encuentra un botón, hace clic, escribe texto y espera que nada cambie entre una versión y la siguiente.

Alibaba acaba de proponer un enfoque completamente distinto.

**Page Agent** no controla tu aplicación desde el exterior.

**Vive dentro de ella.**

Y esa diferencia cambia por completo la arquitectura.

* * *

## **El problema de la automatización tradicional**

La mayoría de las herramientas de automatización funcionan así:

```auto
Playwright / Selenium
          │
          ▼
      Browser
          │
          ▼
     Tu aplicación

```

El agente tiene que interpretar:

- el HTML,
- el DOM,
- capturas de pantalla,
- posiciones,
- coordenadas,
- cambios visuales.

Eso funciona muy bien para testing.

Pero no necesariamente para interacción inteligente.

* * *

## **La propuesta de Page Agent**

Page Agent invierte completamente el modelo.

```auto
Usuario
    │
    ▼
Page Agent
    │
    ▼
DOM de tu aplicación

```

El agente ya no necesita controlar un navegador remoto.

Forma parte de la propia aplicación.

Eso significa que puede comprender directamente:

- componentes,
- formularios,
- botones,
- tablas,
- navegación,
- estructura de la página.

Y actuar sobre ellos.

* * *

## **¿Cómo funciona?**

La idea central del proyecto es bastante elegante.

En lugar de enviar una captura de pantalla al modelo…

Page Agent transforma el DOM en una representación estructurada mucho más pequeña y fácil de procesar.

En otras palabras, en vez de enviar algo parecido a esto:

📷 Imagen de una página

envía algo mucho más cercano a:

```auto
Input:
Email

Button:
Iniciar sesión

Select:
País

Checkbox:
Recordarme

```

Eso tiene varias ventajas:

- menos tokens,
- menos costo,
- mayor velocidad,
- respuestas más deterministas,
- no requiere necesariamente un modelo multimodal.

* * *

## **Caso de uso #1 — Copilots para SaaS**

Este probablemente sea el caso más interesante.

Imaginemos un CRM.

Hoy un usuario normalmente hace:

Clientes

↓

Nuevo cliente

↓

Completa formulario

↓

Guardar

Con Page Agent simplemente podría escribir:

“Creá un cliente llamado ACME y asignalo a María.”

El agente encuentra los campos.

Completa el formulario.

Hace clic en el botón correcto.

Todo dentro de la propia aplicación.

* * *

## **Caso de uso #2 — Herramientas internas**

Todas las empresas tienen alguna aplicación interna con:

- demasiados menús,
- demasiadas pantallas,
- demasiados clics.

Ahora imaginá poder escribir:

“Generá la factura del pedido 4521.”

o

“Mostrame todas las órdenes pendientes del cliente.”

Sin navegar manualmente.

* * *

## **Caso de uso #3 — Dashboards**

Los dashboards empresariales suelen tener muchísimos filtros.

Fecha.

Sucursal.

Producto.

Estado.

Con Page Agent el usuario podría simplemente decir:

“Mostrame las ventas del último trimestre para Chile.”

El agente configura todos los filtros automáticamente.

* * *

## **Caso de uso #4 — Accesibilidad**

Uno de los objetivos del proyecto.

En lugar de depender exclusivamente de atajos de teclado o navegación compleja, el usuario puede interactuar utilizando lenguaje natural.

Por ejemplo:

“Abrí la última factura.”

o

“Mostrame los tickets pendientes.”

Es una capa adicional de accesibilidad sin rediseñar toda la interfaz.

* * *

# **Instalación**

La forma más sencilla de probarlo es mediante npm.

```auto
npm install page-agent

```

Repositorio oficial:

> **[GitHub - alibaba/page-agent: JavaScript in-page GUI agent. Control web...](https://github.com/alibaba/page-agent)**
>
> JavaScript in-page GUI agent. Control web interfaces with natural language.

Documentación:

> **[PageAgent.js - AI-powered GUI Agent](https://alibaba.github.io/page-agent/)**
>
> The GUI Agent living in your website.

* * *

## **Configuración básica**

Una vez instalado:

```auto
import { PageAgent } from "page-agent";

const agent = new PageAgent({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: "https://api.openai.com/v1",
  model: "gpt-4.1"
});

```

Page Agent utiliza un proveedor compatible con la API de OpenAI.

Eso significa que podés conectarlo a:

- OpenAI
- Claude (mediante gateways compatibles)
- Qwen
- DeepSeek
- modelos propios
- cualquier endpoint compatible.

* * *

## **Demo inmediata**

Si solamente querés experimentar con la demo oficial:

```auto
<script src="https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js"></script>

```

En pocos minutos podés tener un ejemplo funcionando directamente en una página web.

* * *

## **¿Qué tipo de aplicaciones tiene sentido construir?**

Muy especialmente:

✅ herramientas internas

✅ CRMs

✅ ERPs

✅ paneles administrativos

✅ dashboards

✅ plataformas B2B

En aplicaciones donde el usuario pasa horas navegando formularios y tablas, un agente integrado puede ahorrar muchísimo tiempo.

* * *

## **¿En qué se diferencia de Playwright?**

Es fácil confundirlos, pero resuelven problemas distintos.

### **Playwright**

- Testing
- Automatización
- Scripts
- CI/CD
- QA

### **Page Agent**

- Interacción inteligente
- Copilots
- Asistentes dentro de la aplicación
- Automatización guiada por lenguaje natural

Uno reemplaza al tester.

El otro ayuda al usuario.

* * *

## **Lo realmente interesante**

Más allá de la implementación técnica, creo que lo importante es el cambio de paradigma.

Durante años imaginamos a los agentes como algo externo.

Una herramienta que abría el navegador y hacía clics.

Alibaba propone exactamente lo contrario.

Que el agente forme parte de la propia aplicación.

No como un chatbot flotando en una esquina.

Sino como una nueva capa de interacción entre el usuario y la interfaz.

Si esta idea prospera, dentro de algunos años probablemente dejemos de diseñar aplicaciones pensando únicamente en botones y menús.

También empezaremos a diseñarlas pensando en los agentes que vivirán dentro de ellas.

Y ese puede ser un cambio tan importante como la llegada del responsive design o de las APIs REST.

* * *

## **Recursos**

**Repositorio**

> **[GitHub - alibaba/page-agent: JavaScript in-page GUI agent. Control web...](https://github.com/alibaba/page-agent)**
>
> JavaScript in-page GUI agent. Control web interfaces with natural language.

**Documentación**

> **[PageAgent.js - AI-powered GUI Agent](https://alibaba.github.io/page-agent/)**
>
> The GUI Agent living in your website.

**Demo**

[https://alibaba.github.io/page-agent/demo/](https://alibaba.github.io/page-agent/demo/)