方式 A：CDN 快速评估
适合本地 demo 或技术验证。官方 demo CDN 会使用免费测试 LLM，只能用于评估，不能承载真实用户和敏感数据。
<script
src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js"
crossorigin="true"></script>
如果要加载脚本但不自动初始化，可追加 ?autoInit=false，再手动 new window.PageAgent(...)。
方式 B：npm 集成到前端项目
适合正式产品。不要把真实 LLM API Key 直接放进前端包，生产环境建议使用后端代理。
npm install page-agent
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('点击登录按钮')
方式 C：生产 LLM 代理
让前端请求自己的 /api/llm-proxy，后端再转发给模型供应商。这样可以统一鉴权、限流、审计和脱敏。
const agent = new PageAgent({
baseURL: '/api/llm-proxy',
model: 'gpt-5.1',
customFetch: (url, init) =>
fetch(url, { ...init, credentials: 'include' }),
})
方式 D：本地模型
适合内网、离线或敏感业务验证。要求模型支持 tool call，并给足上下文窗口；官方文档建议普通页面可能需要 15k token 左右。
const agent = new PageAgent({
baseURL: 'http://localhost:11434/v1',
model: 'qwen3:14b'
})
浏览器直连本地服务时要开启 CORS。
方式 E：自定义工具
把高价值动作做成 typed tool，比让 agent 一路点击更可靠。比如添加购物车、查询知识库、创建工单。
import { z } from 'zod/v4'
import { PageAgent, tool } from 'page-agent'
const agent = new PageAgent({
customTools: {
create_ticket: tool({
description: 'Create a support ticket.',
inputSchema: z.object({
title: z.string(),
priority: z.enum(['low', 'medium', 'high']),
}),
execute: async (input, { signal }) => {
const res = await fetch('/api/tickets', {
method: 'POST',
body: JSON.stringify(input),
signal,
})
return JSON.stringify(await res.json())
},
}),
},
})
方式 F：扩展 / MCP 跨页能力
如果需要跨标签页、从 Claude Desktop / Copilot 调浏览器，可安装 Page Agent Chrome 扩展并配置 @page-agent/mcp。
{
"mcpServers": {
"page-agent": {
"command": "npx",
"args": ["-y", "@page-agent/mcp"],
"env": {
"LLM_BASE_URL": "https://api.openai.com/v1",
"LLM_API_KEY": "sk-xxx",
"LLM_MODEL_NAME": "gpt-5.2"
}
}
}
}
