| name | page-agent |
| description | Embed alibaba/page-agent into your own web application — a pure-JavaScript in-page GUI agent that ships as a single <script> tag or npm package and lets end-users of your site drive the UI with natural language ("click login, fill username as John"). No Python, no headless browser, no extension required. Use this skill when the user is a web developer who wants to add an AI copilot to their SaaS / admin panel / B2B tool, make a legacy web app accessible via natural language, or evaluate page-agent against a local (Ollama) or cloud (Qwen / OpenAI / OpenRouter) LLM. NOT for server-side browser automation — point those users to Sonic' built-in browser tool instead. |
| version | 1.0.0 |
| author | Sonic Agent |
| license | MIT |
| platforms | ["linux","macos","windows"] |
| metadata | {"sonic":{"tags":["web","javascript","agent","browser","gui","alibaba","embed","copilot","saas"],"category":"web-development"}} |
page-agent
alibaba/page-agent (https://github.com/alibaba/page-agent, 17k+ stars, MIT) is an in-page GUI agent written in TypeScript. It lives inside a webpage, reads the DOM as text (no screenshots, no multi-modal LLM), and executes natural-language instructions like "click the login button, then fill username as John" against the current page. Pure client-side — the host site just includes a script and passes an OpenAI-compatible LLM endpoint.
When to use this skill
Load this skill when a user wants to:
- Ship an AI copilot inside their own web app (SaaS, admin panel, B2B tool, ERP, CRM) — "users on my dashboard should be able to type 'create invoice for Acme Corp and email it' instead of clicking through five screens"
- Modernize a legacy web app without rewriting the frontend — page-agent drops on top of existing DOM
- Add accessibility via natural language — voice / screen-reader users drive the UI by describing what they want
- Demo or evaluate page-agent against a local (Ollama) or hosted (Qwen, OpenAI, OpenRouter) LLM
- Build interactive training / product demos — let an AI walk a user through "how to submit an expense report" live in the real UI
When NOT to use this skill
- User wants Sonic itself to drive a browser → use Sonic' built-in browser tool (Browserbase / Camofox). page-agent is the opposite direction.
- User wants cross-tab automation without embedding → use Playwright, browser-use, or the page-agent Chrome extension
- User needs visual grounding / screenshots → page-agent is text-DOM only; use a multimodal browser agent instead
Prerequisites
- Node 22.13+ or 24+, npm 10+ (docs claim 11+ but 10.9 works fine)
- An OpenAI-compatible LLM endpoint: Qwen (DashScope), OpenAI, Ollama, OpenRouter, or anything speaking
/v1/chat/completions
- Browser with devtools (for debugging)
Path 1 — 30-second demo via CDN (no install)
Fastest way to see it work. Uses alibaba's free testing LLM proxy — for evaluation only, subject to their terms.
Add to any HTML page (or paste into the devtools console as a bookmarklet):
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.8.0/dist/iife/page-agent.demo.js" =>
