page-agent

Embed an in-page AI copilot that drives web UIs via natural-language instructions.

Updated Apr 23, 2026

Search Tags:#typescript #frontend #javascript #web-automation #ai-copilot #page-agent

Ready to run

npx skills add https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge --skill page-agent-chris-chai-minjae

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: page-agent
Source: https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge/tree/main/optional-skills/web-development/page-agent
Command: npx skills add https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge --skill page-agent-chris-chai-minjae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill lets you embed an AI-powered panel inside a web page, enabling end-users to drive the UI with natural language instead of manual clicks.

Core Features & Use Cases

In-page GUI agent written in TypeScript that runs entirely client-side, ships as a single <script> tag or npm package.
Works with any OpenAI-compatible LLM endpoint to interpret instructions and manipulate the DOM on the host page.
Use cases include embedding AI copilots in SaaS dashboards, admin panels, legacy web apps, product demos, and accessibility-driven navigation.

Quick Start

Show the PageAgent panel on the current page and start driving the UI with a natural-language instruction.

Frequently Asked Questions about page-agent

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

FAQPage Schema

How do I embed an AI copilot in a web app to drive the UI with natural language?▼

To embed an AI copilot, you integrate a client-side TypeScript package into your web page, which connects to an OpenAI-compatible LLM endpoint to interpret natural-language instructions and execute DOM operations like clicking and typing.

What is an in-page GUI agent and how does it work with SaaS dashboards?▼

An in-page GUI agent is a client-side script that manipulates the DOM on a host page. For SaaS dashboards, it receives natural-language user instructions, uses an LLM to interpret them, and programmatically clicks, types, and navigates UI elements.

Can I use this in-page agent with any OpenAI-compatible LLM endpoint?▼

Yes, the in-page agent works with any OpenAI-compatible LLM endpoint. You configure the client-side PageAgent package to route natural-language instructions to your chosen endpoint, which then returns the DOM operations to execute on the host page.

How do I add a natural-language navigation panel to legacy web apps?▼

You can add a natural-language navigation panel to legacy web apps by inserting a single script tag or installing the npm package. The PageAgent renders the panel client-side and executes DOM operations on the existing UI without requiring backend changes.

Does the web UI automation agent require a backend server to function?▼

No, the web UI automation agent runs entirely client-side. It relies on the host page to render the panel and execute DOM operations, connecting directly to an OpenAI-compatible LLM endpoint without requiring a dedicated backend server.

When should I not use a client-side DOM manipulation agent for web automation?▼

You should avoid a client-side DOM manipulation agent if your web app requires server-side data processing, lacks accessible UI elements for interaction, or if exposing client-side LLM instructions poses security constraints for your specific environment.