Page-Agent 深度解析：阿里开源 GUI Agent，一行代码让网页变 AI 原生

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('搜索"机械键盘"，筛选价格 200-500 元，按销量从高到低排序')

// 填写客户信息表单
await agent.execute(`
    填写以下客户信息：
    - 公司名称：TechXArtisan
    - 联系人：Kevin
    - 邮箱：kevin@example.com
    - 电话：13800138000
    - 客户等级：VIP
    - 备注：来自官网咨询
    然后点击"保存"按钮
`)

// 批量审核用户
await agent.execute(`
    在用户管理页面：
    1. 找到所有状态为"待审核"的用户
    2. 勾选这些用户
    3. 点击"批量通过"按钮
    4. 在确认弹窗中点击"确定"
`)

<!DOCTYPE html>
<html>
<head>
    <title>Page-Agent Demo</title>
</head>
<body>
    <h1>我的网页</h1>
    <button id="btn">点击我</button>

    <!-- 一行代码集成 -->
    <script
        src="https://cdn.jsdelivr.net/npm/page-agent@1.12.4/dist/iife/page-agent.demo.js"
        crossorigin="anonymous"
    ></script>
</body>
</html>

npm install page-agent

import { PageAgent } from 'page-agent'

const agent = new PageAgent({
    // 支持 OpenAI 兼容的 API
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: 'your-api-key',

    // 语言设置（影响 prompt 语言）
    language: 'zh-CN',

    // 可选：自定义 DOM 脱水规则
    domRules: {
        // 忽略某些元素
        ignoreSelectors: ['.no-agent', '[data-agent-ignore]'],
        // 标记特殊元素
        customAttributes: ['data-action'],
    },
})

// 执行操作
await agent.execute('点击登录按钮')

// 获取页面状态
const state = await agent.getPageState()
console.log(state)

// 监听操作事件
agent.on('action:start', (action) => {
    console.log('开始执行:', action)
})

agent.on('action:complete', (action) => {
    console.log('执行完成:', action)
})

import { useEffect, useRef } from 'react'
import { PageAgent } from 'page-agent'

function MyComponent() {
    const agentRef = useRef(null)

    useEffect(() => {
        agentRef.current = new PageAgent({
            model: 'qwen3.5-plus',
            baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
            apiKey: import.meta.env.VITE_DASHSCOPE_KEY,
            language: 'zh-CN',
        })

        return () => {
            agentRef.current?.destroy()
        }
    }, [])

    const handleCommand = async (command) => {
        await agentRef.current.execute(command)
    }

    return (
        <div>
            <button onClick={() => handleCommand('点击提交按钮')}>
                自动提交
            </button>
            {/* 你的表单内容 */}
        </div>
    )
}

<template>
    <div>
        <button @click="executeCommand('点击提交按钮')">
            自动提交
        </button>
        <!-- 你的表单内容 -->
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { PageAgent } from 'page-agent'

const agent = ref(null)

onMounted(() => {
    agent.value = new PageAgent({
        model: 'qwen3.5-plus',
        baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
        apiKey: import.meta.env.VITE_DASHSCOPE_KEY,
        language: 'zh-CN',
    })
})

onUnmounted(() => {
    agent.value?.destroy()
})

const executeCommand = async (command) => {
    await agent.value.execute(command)
}
</script>

import { PageAgent, defineSkill } from 'page-agent'

// 定义一个"电商搜索"技能
const ecommerceSearch = defineSkill({
    name: 'ecommerce-search',
    description: '在电商网站搜索商品并筛选',
    parameters: {
        keyword: { type: 'string', description: '搜索关键词' },
        minPrice: { type: 'number', description: '最低价格' },
        maxPrice: { type: 'number', description: '最高价格' },
        sortBy: { type: 'string', enum: ['sales', 'price', 'date'] },
    },
    execute: async (agent, params) => {
        await agent.execute(`搜索"${params.keyword}"`)

        if (params.minPrice || params.maxPrice) {
            const priceRange = `${params.minPrice || 0}-${params.maxPrice || '不限'}`
            await agent.execute(`设置价格区间为 ${priceRange} 元`)
        }

        if (params.sortBy) {
            const sortMap = {
                sales: '按销量排序',
                price: '按价格排序',
                date: '按上架时间排序',
            }
            await agent.execute(sortMap[params.sortBy])
        }
    },
})

const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: 'your-api-key',
    skills: [ecommerceSearch],
})

// 使用技能
await agent.useSkill('ecommerce-search', {
    keyword: '机械键盘',
    minPrice: 200,
    maxPrice: 500,
    sortBy: 'sales',
})

// 在你的 SaaS 产品中嵌入 AI 助手
import { PageAgent } from 'page-agent'

const assistant = new PageAgent({
    model: 'gpt-4o-mini',
    baseURL: 'https://api.openai.com/v1',
    apiKey: 'your-key',
    language: 'zh-CN',
})

// 用户可以用自然语言操作你的产品
// "帮我创建一个新项目，命名为 Q4 营销计划"
// "把所有未完成的任务分配给张三"

// 结合 Web Speech API 实现语音控制
const recognition = new webkitSpeechRecognition()
recognition.onresult = async (event) => {
    const command = event.results[0][0].transcript
    await agent.execute(command)
}
recognition.start()

// 用自然语言编写测试用例
test('用户登录流程', async () => {
    await agent.execute('在用户名输入框输入 testuser')
    await agent.execute('在密码输入框输入 password123')
    await agent.execute('点击登录按钮')
    await agent.execute('等待页面跳转到仪表盘')

    // 验证结果
    const state = await agent.getPageState()
    expect(state.url).toContain('/dashboard')
})

const agent = new PageAgent({
    // ...
    allowedActions: ['click', 'type', 'select'],
    blockedSelectors: ['[data-sensitive]', '.payment-form'],
    requireConfirmation: ['delete', 'submit', 'payment'],
})