skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

page-agent

Embed an in-page natural-language GUI copilot into web applications using alibaba/page-agent.

1|Updated Aug 6, 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/agtktID/indagis-agent --skill page-agent-agtktid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-agent
Source: https://github.com/agtktID/indagis-agent/tree/main/optional-skills/web-development/page-agent
Command: npx skills add https://github.com/agtktID/indagis-agent --skill page-agent-agtktid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires page-agent.

What problem does it solve? Web app users often click through many screens to complete routine tasks. This Skill guides you through embedding alibaba/page-agent, a client-side TypeScript GUI agent that reads the DOM as text and executes natural-language instructions like "click the login button, then fill username as John" directly inside your webpage. ## Core Features & Use Cases - In-page AI copilot: Add a floating panel to SaaS dashboards, admin panels, ERP, or CRM tools so users type instructions instead of navigating menus. - Three integration paths: 30-second CDN demo for evaluation, npm install with your own OpenAI-compatible LLM endpoint (Qwen, OpenAI, Ollama, OpenRouter) for production, or cloning the monorepo to hack on the source and browser extension. - Security guidance: Proxy LLM calls through your backend to avoid shipping API keys in client bundles, and use allowlist/data-masking hooks to lock down agent behavior. - Use Case: Modernize a legacy web app without rewriting the frontend by dropping page-agent on top of the existing DOM, letting users type "create invoice for Acme Corp and email it" instead of clicking through five screens. ## Quick Start Add the page-agent CDN script tag to any HTML page and type a natural-language instruction into the panel that appears.

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?▼

Install page-agent via npm, instantiate it with your model, baseURL, and apiKey, then call agent.panel.show() for end users or agent.execute() programmatically. Any OpenAI-compatible LLM endpoint works, including Qwen, OpenAI, Ollama, and OpenRouter.

What is alibaba page-agent and how does it work?▼

page-agent is an MIT-licensed in-page GUI agent written in TypeScript. It reads the DOM as text without screenshots or multimodal models, then executes natural-language instructions like clicking buttons and filling forms against the current page.

Can I use page-agent with a local Ollama model?▼

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

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

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

When should I not use page-agent for browser automation?▼

Avoid page-agent when you need cross-tab automation without embedding, visual grounding from screenshots, or an external agent driving a browser. Use Playwright, browser-use, or a multimodal browser agent for those scenarios instead.

Why does the page-agent panel fail to appear on some sites?▼

Strict Content-Security-Policy headers can block the CDN script or inline eval, and CORS misconfiguration on the LLM endpoint also causes failures. Self-host the script from your origin and check the browser console for errors.

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
githubgithub
38.5k

playwright-generate-test

Generates Playwright TypeScript tests from user scenarios using Playwright MCP tools.

Official
Intermediate
yigitkonuryigitkonur
11

run-agent-browser

Drives browser automation via agent-browser CLI for navigation, DOM interaction, sessions, tabs, screenshots, and data extraction.

Community
Intermediate