skills.rest
xu1713
xu1713COMMUNITY
Explore all skills by this author →
GitHub

page-agent

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

Updated Jun 5, 2026
Search Tags:#javascript#natural language#embed#page-agent#web copilot#dom automation#gui agent
One-click install
npx skills add https://github.com/xu1713/openhorse --skill page-agent-xu1713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-agent
Source: https://github.com/xu1713/openhorse/tree/main/openhorse/openhorse/optional-skills/web-development/page-agent
Command: npx skills add https://github.com/xu1713/openhorse --skill page-agent-xu1713

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires page-agent.

What problem does it solve? Web developers want to add a natural-language AI copilot to their own SaaS, admin panel, or legacy web app so end-users can drive the UI with instructions like "click login, fill username as John" — without server-side browser automation, headless browsers, or extensions. ## 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 for evaluation, an npm package (page-agent) wired to any OpenAI-compatible LLM endpoint (Qwen, OpenAI, Ollama, OpenRouter) for production, and a source clone for hacking on the agent or its browser extension. - Use Case: A B2B dashboard team embeds page-agent so users can type "create invoice for Acme Corp and email it" instead of clicking through five screens, with LLM calls proxied through their own backend to protect API keys. ## Quick Start Add the page-agent demo script tag to any HTML page, then type a natural-language instruction into the floating panel to see it drive the UI.

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, create a PageAgent instance with your model, baseURL, and apiKey, then call agent.panel.show() for end users or agent.execute() programmatically. Any OpenAI-compatible LLM endpoint works.

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

Add the CDN script tag for page-agent.demo.js to any HTML page or use the bookmarklet form. A floating 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 works with Ollama by setting baseURL to http://localhost:11434/v1 and a model like qwen3:14b. Any endpoint speaking the OpenAI /v1/chat/completions API is supported, including OpenRouter and DashScope.

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

No, any apiKey passed to the PageAgent constructor ships in your JavaScript bundle. For production, proxy LLM calls through your own backend and point baseURL at your proxy instead of exposing keys.

When should I use page-agent versus Playwright or browser automation?▼

Use page-agent when you want to embed an agent inside your own web app for end-users. For server-side browser automation, cross-tab control, or visual screenshot-based grounding, use Playwright, browser-use, or a multimodal browser agent instead.

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

Sites with strict Content-Security-Policy may block the CDN script or inline eval. Self-host the bundle from your own origin, and check the console for CORS errors on the LLM endpoint or a wrong baseURL.

Related Skills

Explore More Software Engineering Skills→
80portisfound80portisfound

page-agent

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

Community
Intermediate
wrightchinwrightchin

manage-mounts

Manage NanoClaw agent container access to host directories via a JSON allowlist.

Community
Intermediate
0xharryriddle0xharryriddle
3

gemini-computer-use

Automate browser tasks with Gemini Computer Use and Playwright.

Community
Advanced
sisensesisense
38

build-package

Build a single NX package with automatic upstream dependency resolution.

Official
Intermediate