skills.rest
episvr
episvrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

page-agent

Embed alibaba/page-agent into web applications for natural-language DOM-driven UI control.

Updated Jul 7, 2026
Search Tags:#javascript#LLM integration#page-agent#web copilot#dom automation#gui agent#natural language ui
One-click install
npx skills add https://github.com/episvr/USTB-2026-SummerInternship --skill page-agent-episvr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-agent
Source: https://github.com/episvr/USTB-2026-SummerInternship/tree/main/hermes-config/optional-skills/web-development/page-agent
Command: npx skills add https://github.com/episvr/USTB-2026-SummerInternship --skill page-agent-episvr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires page-agent.

What problem does it solve? Web developers want to add an AI copilot to their own SaaS, admin panel, or legacy web app so end-users can drive the UI with natural language ("click login, fill username as John") instead of clicking through screens, without headless browsers, extensions, or frontend rewrites. ## Core Features & Use Cases - In-page GUI agent: alibaba/page-agent runs inside the webpage, reads the DOM as text (no screenshots or multimodal LLM), and executes natural-language instructions against the current page. - Three integration paths: a 30-second CDN demo script for evaluation, an npm package (new PageAgent({model, baseURL, apiKey})) for production embedding, and a source-repo clone for hacking on the agent or its browser extension. - OpenAI-compatible LLM backends: works with Qwen/DashScope, OpenAI, Ollama (local), OpenRouter, or any /v1/chat/completions endpoint. - Use Case: A B2B dashboard team embeds page-agent so users can type "create invoice for Acme Corp and email it" instead of navigating five screens, proxying LLM calls through their backend to keep API keys out of the client bundle. ## Quick Start Add the page-agent demo script tag to any HTML page or install the page-agent npm package and instantiate PageAgent with an OpenAI-compatible LLM endpoint to show the natural-language control panel.

Frequently Asked Questions about page-agent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add an AI copilot to my web app with page-agent?▼

Install the page-agent npm package, then create a PageAgent instance with your model, baseURL, and apiKey, and call agent.panel.show() for end users or agent.execute() programmatically. Any OpenAI-compatible LLM endpoint works as the backend.

How do I test page-agent without installing anything?▼

Add the CDN script tag for page-agent.demo.js from jsDelivr to any HTML page, or use the bookmarklet form in your bookmarks bar. A panel appears where you can type instructions, using alibaba's free testing LLM proxy for evaluation only.

Does page-agent work with local LLMs like Ollama?▼

Yes, page-agent supports Ollama by setting baseURL to http://localhost:11434/v1 and a local model such as qwen3:14b. Any endpoint speaking the OpenAI /v1/chat/completions API is compatible.

Is it safe to put my LLM API key in page-agent client code?▼

No, any apiKey passed to new PageAgent ships in your JavaScript bundle and is exposed to users. For production, proxy LLM calls through your own backend and point baseURL at that proxy.

When should I use Playwright or a browser extension instead of page-agent?▼

Use Playwright, browser-use, or the page-agent Chrome extension for cross-tab automation without embedding code in the target site. page-agent is for embedding an agent inside your own page; it is also text-DOM only, so use a multimodal browser agent when visual grounding or screenshots are needed.

Why does page-agent fail to load on some websites?▼

Sites with strict Content-Security-Policy may block the CDN script or inline eval, and non-OpenAI-compatible endpoints fail with cryptic errors. Self-host the bundle from your origin or put an OpenAI-compatibility proxy like LiteLLM in front of native Anthropic or Gemini APIs.

Related Skills

Explore More Software Engineering Skills→
xu1713xu1713

page-agent

Embed an in-page GUI agent into web applications via script tag or npm package.

Community
Intermediate
olakai-aiolakai-ai

olakai-add-monitoring

Add Olakai monitoring to AI agents by wrapping clients and logging events.

Official
Advanced
intelligentcode-aiintelligentcode-ai
35

user-tester

Automate end-to-end user journey testing across web applications with Playwright or Puppeteer.

Official
Advanced
dapperdiversdapperdivers
1

web-browser

Automate browser interactions with dynamic websites via Chrome DevTools Protocol.

Community
Intermediate