zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove @page-agent/cdn

Browse Source
This commit is contained in:
Simon
2026-01-19 19:10:00 +08:00
parent 8bde218f28
commit 8dd4c5d78e
12 changed files with 118 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
AGENTS.md
View File

@@ -10,7 +10,6 @@ This is a **monorepo** with npm workspaces:
Internal packages:
- **Core** (`packages/core/`) - PageAgentCore without UI (npm: `@page-agent/core`)
- **CDN** (`packages/cdn/`) - IIFE builds for script tag usage (npm: `@page-agent/cdn`)
- **LLMs** (`packages/llms/`) - LLM client with reflection-before-action mental model
- **Page Controller** (`packages/page-controller/`) - DOM operations and visual feedback (SimulatorMask), independent of LLM
- **UI** (`packages/ui/`) - Panel and i18n. Decoupled from PageAgent
@@ -32,9 +31,8 @@ Simple monorepo solution: TypeScript references + Vite aliases. Update tsconfig
```
packages/
├── page-agent/ # npm: "page-agent" ⭐ MAIN (with Panel UI)
├── page-agent/ # npm: "page-agent" ⭐ MAIN (with Panel UI + IIFE builds)
├── core/ # npm: "@page-agent/core" (headless, no UI)
├── cdn/ # npm: "@page-agent/cdn" (IIFE builds)
├── website/ # @page-agent/website (private)
├── llms/ # @page-agent/llms
├── page-controller/ # @page-agent/page-controller
@@ -74,7 +72,7 @@ const pageInfo = await this.pageController.getPageInfo()
3. **LLM Processing**: AI returns action plans (page-agent)
4. **Indexed Operations**: PageAgent calls PageController by element index
### CDN Builds (`packages/cdn/`)
### IIFE Builds (`packages/page-agent/dist/iife/`)
Two IIFE builds for script tag usage:
@@ -85,14 +83,17 @@ Two IIFE builds for script tag usage:
Demo build supports query params (e.g., `?model=gpt-4&lang=en-US`).
Build with `npm run build:iife --workspace=page-agent`.
## Key Files Reference
### Page Agent (`packages/page-agent/`)
| File | Description |
| ------------------ | ---------------------------------------------- |
| `src/PageAgent.ts` | ⭐ Main class with UI, extends PageAgentCore |
| `src/iife.ts` | IIFE/CDN entry |
| File | Description |
| ----------------------- | -------------------------------------------- |
| `src/PageAgent.ts` | ⭐ Main class with UI, extends PageAgentCore |
| `src/entry-iife.ts` | IIFE entry (exposes PageAgent class) |
| `src/entry-iife-demo.ts`| IIFE demo entry (auto-init with demo API) |
### Core (`packages/core/`)

1
package.json
View File

@@ -9,7 +9,6 @@
"packages/llms",
"packages/core",
"packages/page-agent",
"packages/cdn",
"packages/website"
],
"description": "AI-powered UI agent for web applications",

23
packages/cdn/package.json
View File

@@ -1,23 +0,0 @@
{
"name": "@page-agent/cdn",
"private": false,
"version": "0.2.5",
"type": "module",
"files": [
"dist/"
],
"description": "CDN builds for page-agent - IIFE bundles for script tag usage",
"author": "Simon<gaomeng1900>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/alibaba/page-agent.git"
},
"homepage": "https://alibaba.github.io/page-agent/",
"scripts": {
"build": "vite build && vite build --mode demo"
},
"dependencies": {
"page-agent": "0.2.5"
}
}

64
packages/cdn/src/demo.js
View File

@@ -1,64 +0,0 @@
// @ts-nocheck
/**
* Demo CDN build for page-agent
* Auto-initializes with built-in demo API for testing
*
* Usage:
* <script src="https://unpkg.com/@page-agent/cdn/dist/page-agent.demo.js"></script>
*/
import { PageAgent } from 'page-agent'
// Clean up existing instances to prevent multiple injections from bookmarklet
if (window.pageAgent) {
window.pageAgent.dispose()
}
// Mount to global window object
window.PageAgent = PageAgent
// Export for IIFE
export { PageAgent }
console.log('🚀 page-agent.js loaded!')
const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
// Demo warning
console.log(
'%c⚠️ DEMO MODE %c\n' +
'This build uses a shared testing LLM with rate limits.\n' +
'For production, use page-agent.js with your own API key:\n' +
'https://alibaba.github.io/page-agent/#/docs/features/models',
'background: #f59e0b; color: #000; font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 4px;',
'color: #f59e0b; font-size: 12px;'
)
// in case document.x is not ready yet
setTimeout(() => {
const currentScript = document.currentScript
if (currentScript) {
console.log('🚀 page-agent.js detected current script:', currentScript.src)
const url = new URL(currentScript.src)
const model = url.searchParams.get('model') || DEMO_MODEL
const baseURL = url.searchParams.get('baseURL') || DEMO_BASE_URL
const apiKey = url.searchParams.get('apiKey') || DEMO_API_KEY
const language = url.searchParams.get('lang') || 'zh-CN'
const config = { model, baseURL, apiKey, language }
window.pageAgent = new PageAgent(config)
} else {
console.log('🚀 page-agent.js no current script detected, using default demo config')
const config = {
model: DEMO_MODEL,
baseURL: DEMO_BASE_URL,
apiKey: DEMO_API_KEY,
}
window.pageAgent = new PageAgent(config)
}
console.log('🚀 page-agent.js initialized with config:', window.pageAgent.config)
window.pageAgent.panel.show()
})

15
packages/cdn/src/full.js
View File

@@ -1,15 +0,0 @@
// @ts-nocheck
/**
* Full CDN build for page-agent
* Exposes PageAgent class for manual instantiation and configuration
*
* Usage:
* <script src="https://unpkg.com/@page-agent/cdn/dist/page-agent.js"></script>
* <script>
* const agent = new PageAgent({ model: 'gpt-4o', apiKey: 'your-key' })
* agent.panel.show()
* </script>
*/
import { PageAgent } from 'page-agent'
export { PageAgent }

49
packages/cdn/vite.config.js
View File

@@ -1,49 +0,0 @@
// @ts-nocheck
import { dirname, resolve } from 'path'
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
const __dirname = dirname(fileURLToPath(import.meta.url))
/**
* CDN IIFE builds for page-agent
*
* Build targets (via --mode):
* - demo: page-agent.demo.js with auto-init and built-in API
* - full (default): page-agent.js exposes PageAgent class only
*/
export default defineConfig(({ mode }) => {
const isDemo = mode === 'demo'
const entry = isDemo ? resolve(__dirname, 'src/demo.js') : resolve(__dirname, 'src/full.js')
const fileName = isDemo ? 'page-agent.demo' : 'page-agent'
return {
plugins: [cssInjectedByJsPlugin({ relativeCSSInjection: true })],
publicDir: false,
esbuild: {
keepNames: true,
},
build: {
lib: {
entry,
name: 'PageAgent',
fileName: () => `${fileName}.js`,
formats: ['iife'],
},
outDir: resolve(__dirname, 'dist'),
emptyOutDir: !isDemo, // only empty on first build (full)
minify: false,
cssCodeSplit: true,
rollupOptions: {
onwarn: function (message, handler) {
if (message.code === 'EVAL') return
handler(message)
},
},
},
define: {
'process.env.NODE_ENV': '"production"',
},
}
})

6
packages/page-agent/package.json
View File

@@ -37,8 +37,10 @@
},
"homepage": "https://alibaba.github.io/page-agent/",
"scripts": {
"build": "vite build",
"dev:iife": "concurrently \"vite build --config vite.iife.config.js --watch\" \"npx serve dist/iife -p 5174\"",
"build": "vite build && npm run build:iife && npm run build:demo",
"build:iife": "vite build --config vite.iife.config.js",
"build:demo": "vite build --config vite.iife.config.js --mode demo",
"dev:iife": "concurrently \"vite build --config vite.iife.config.js --watch --mode demo\" \"npx serve dist/iife -p 5174\"",
"prepublishOnly": "node -e \"const fs=require('fs');['README.md','LICENSE'].forEach(f=>fs.copyFileSync('../../'+f,f))\"",
"postpublish": "node -e \"['README.md','LICENSE'].forEach(f=>{try{require('fs').unlinkSync(f)}catch{}})\""
},

9
packages/page-agent/src/iife.ts → packages/page-agent/src/iife/page-agent.demo.ts
View File

@@ -1,9 +1,7 @@
/**
* Auto-run entry for page-agent.js. Insert this script into your page to get page-agent functionality.
* IIFE demo entry - auto-initializes with built-in demo API for testing
*/
import { Panel } from '@page-agent/ui'
import { PageAgent, type PageAgentConfig } from './PageAgent'
import { PageAgent, type PageAgentConfig } from '../PageAgent'
// Clean up existing instances to prevent multiple injections from bookmarklet
if (window.pageAgent) {
@@ -13,9 +11,6 @@ if (window.pageAgent) {
// Mount to global window object
window.PageAgent = PageAgent
// Export for ES module usage
// export { PageAgent }
console.log('🚀 page-agent.js loaded!')
const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'

9
packages/page-agent/src/iife/page-agent.ts Normal file
View File

@@ -0,0 +1,9 @@
/**
* IIFE entry
*/
import { PageAgent } from '../PageAgent'
// Mount to global window object
window.PageAgent = PageAgent
export { PageAgent }

88
packages/page-agent/vite.iife.config.js
View File

@@ -14,44 +14,56 @@ dotenvConfig({ path: resolve(__dirname, '../../.env') })
// - alias all local packages so that they can be build in
// - no external
// - no d.ts. dts does not work with monorepo aliasing
export default defineConfig(({ mode }) => ({
plugins: [cssInjectedByJsPlugin({ relativeCSSInjection: true })],
publicDir: false,
esbuild: {
keepNames: true,
},
resolve: {
alias: {
'@page-agent/page-controller': resolve(__dirname, '../page-controller/src/PageController.ts'),
'@page-agent/llms': resolve(__dirname, '../llms/src/index.ts'),
'@page-agent/core': resolve(__dirname, '../core/src/PageAgentCore.ts'),
'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
export default defineConfig(({ mode }) => {
const isDemo = mode === 'demo'
const entry = isDemo
? resolve(__dirname, 'src/iife/page-agent.demo.ts')
: resolve(__dirname, 'src/iife/page-agent.ts')
const fileName = isDemo ? 'page-agent.demo' : 'page-agent'
return {
plugins: [cssInjectedByJsPlugin({ relativeCSSInjection: true })],
publicDir: false,
esbuild: {
keepNames: true,
},
},
build: {
lib: {
entry: resolve(__dirname, 'src/iife.ts'),
name: 'PageAgent',
fileName: 'page-agent',
formats: ['iife'],
},
outDir: resolve(__dirname, 'dist', 'iife'),
cssCodeSplit: true,
minify: false,
rollupOptions: {
output: {
// force use .js as extension
entryFileNames: 'page-agent.js',
},
onwarn: function (message, handler) {
if (message.code === 'EVAL') return
handler(message)
resolve: {
alias: {
'@page-agent/page-controller': resolve(
__dirname,
'../page-controller/src/PageController.ts'
),
'@page-agent/llms': resolve(__dirname, '../llms/src/index.ts'),
'@page-agent/core': resolve(__dirname, '../core/src/PageAgentCore.ts'),
'@page-agent/ui': resolve(__dirname, '../ui/src/index.ts'),
},
},
},
define: {
'import.meta.env.LLM_MODEL_NAME': JSON.stringify(process.env.LLM_MODEL_NAME),
'import.meta.env.LLM_API_KEY': JSON.stringify(process.env.LLM_API_KEY),
'import.meta.env.LLM_BASE_URL': JSON.stringify(process.env.LLM_BASE_URL),
},
}))
build: {
lib: {
entry,
name: 'PageAgent',
fileName: () => `${fileName}.js`,
formats: ['iife'],
},
outDir: resolve(__dirname, 'dist', 'iife'),
emptyOutDir: !isDemo, // only empty on first build
cssCodeSplit: true,
minify: false,
rollupOptions: {
// output: {
// // force use .js as extension
// entryFileNames: 'page-agent.js',
// },
onwarn: function (message, handler) {
if (message.code === 'EVAL') return
handler(message)
},
},
},
define: {
'import.meta.env.LLM_MODEL_NAME': JSON.stringify(process.env.LLM_MODEL_NAME),
'import.meta.env.LLM_API_KEY': JSON.stringify(process.env.LLM_API_KEY),
'import.meta.env.LLM_BASE_URL': JSON.stringify(process.env.LLM_BASE_URL),
},
}
})

80
packages/website/package.json
View File

@@ -1,42 +1,42 @@
{
"name": "@page-agent/website",
"private": true,
"version": "0.2.5",
"type": "module",
"scripts": {
"dev": "vite --host 0.0.0.0",
"build:website": "vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
"@types/react": "^19.2.8",
"@types/react-dom": "^19.2.1",
"@vitejs/plugin-react-swc": "^4.1.0",
"i18next": "^25.7.4",
"i18next-browser-languagedetector": "^8.2.0",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react-i18next": "^16.5.2",
"tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0",
"wouter": "^3.9.0"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tooltip": "^1.2.8",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.562.0",
"motion": "^12.26.1",
"next-themes": "^0.4.6",
"rough-notation": "^0.5.1",
"simple-icons": "^16.5.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0"
}
"name": "@page-agent/website",
"private": true,
"version": "0.2.5",
"type": "module",
"scripts": {
"dev": "vite --host 0.0.0.0",
"build:website": "vite build",
"preview": "vite preview",
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.18",
"@types/react": "^19.2.8",
"@types/react-dom": "^19.2.1",
"@vitejs/plugin-react-swc": "^4.1.0",
"i18next": "^25.7.4",
"i18next-browser-languagedetector": "^8.2.0",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react-i18next": "^16.5.2",
"tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0",
"wouter": "^3.9.0"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tooltip": "^1.2.8",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.562.0",
"motion": "^12.26.1",
"next-themes": "^0.4.6",
"rough-notation": "^0.5.1",
"simple-icons": "^16.5.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0"
}
}

7
packages/website/src/router.tsx
View File

@@ -1,9 +1,10 @@
import { Suspense, lazy } from 'react'
import { Route, Switch } from 'wouter'
// Lazy load pages
const HomePage = lazy(() => import('./pages/Home'))
const DocsPages = lazy(() => import('./pages/docs/index'))
import HomePage from './pages/Home'
import DocsPages from './pages/docs/index'
// const DocsPages = lazy(() => import('./pages/docs/index'))
export default function Router() {
return (