Show HN: PageAgent, A GUI agent that lives inside your web app (alibaba.github.io)

147 points by simon_luv_pho ↗ HN
Title: Show HN: PageAgent, A GUI agent that lives inside your web app

Hi HN,

I'm building PageAgent, an open-source (MIT) library that embeds an AI agent directly into your frontend.

I built this because I believe there's a massive design space for deploying general agents natively inside the web apps we already use, rather than treating the web merely as a dumb target for isolated bots.

Currently, most AI agents operate from external clients or server-side programs, effectively leaving web development out of the AI ecosystem. I'm experimenting with an "inside-out" paradigm instead. By dropping the library into a page, you get a client-side agent that interacts natively with the live DOM tree and inherits the user's active session out of the box, which works perfectly for SPAs.

To handle cross-page tasks, I built an optional browser extension that acts as a "bridge". This allows the web-page agent to control the entire browser with explicit user authorization. Instead of a desktop app controlling your browser, your web app is empowered to act as a general agent that can navigate the broader web.

I'd love to start a conversation about the viability of this architecture, and what you all think about the future of in-app general agents. Happy to answer any questions!

38 comments

[ 4.3 ms ] story [ 77.0 ms ] thread
This is highly experimental right now, but here are some quick links for anyone wanting to dig deeper:

- GitHub: https://github.com/alibaba/page-agent

- Live Demo (No sign-up): https://alibaba.github.io/page-agent/ (you can drag the bookmarklet from here to try it on other sites)

- Browser Extension: https://chromewebstore.google.com/detail/page-agent-ext/akld...

I'd be really interested in feedback on the security model of client-side agents giving extension-bridge access, and taking questions on the implementation!

I don't get it. It's just docs. I don't see anything. Even the video in your GitHub readme doesn't work in my browser.
on chrome, the extension should be limited to a defined tab group
Scoping to a dedicated tab group is a smart approach for sandboxing. The activeTab permission model already limits access nicely, but combining it with tab groups adds a visible boundary that users can actually see and trust. Would be great if Chrome's extensions API gave more granular tab group controls natively.
Very cool!

I'm particularly impressed by the bookmark "trick" to install it on a page. Despite having spent 15 years developing for the browser, I had somehow missed that feature of the bookmarks bar. But awesome UX for people to try out the tool. Congrats!

(comment deleted)
Confusing name because of the existence of pageant, the putty agent.
Looks cool! Are you open to adding AWS Bedrock or LiteLLM support?
Is this Affiliated with the Chinese company Alibaba? Any chance data goes there too?
> Data processed via servers in Mainland China

Appreciate the transparency, but maybe you could add some European (preferably) alternatives ?

I’ve been thinking about something like this. If it’s just a one line script import, how the heck are you trusting natural language to translate to commands for an arbitrary ui?

The only thing I can think of is you had the AI rewrite and embed selectors on the entire build file and work with that?

Curious - how does it perform with captchas and other "are you human" stuff on the web?
Does it support long-click / click-and-drag?
Firefox support?
In my plan. Should be easy since I use wxt as the extension framework.
[flagged]
Oh whoa, we are working in parallel on a similar angle!

We just launched Rover (https://rover.rtrvr.ai/) as the first Embeddable Web Agent.

Similar principles, just embed a script tag and you get an agent that can type/click/select to onboard/demo/checkout users.

I tried on your website and it was reeaaaally slow. Quick question:

- you are injecting numbering on to the UI. Are you taking screenshots? But I don't see any screenshots in the request being sent, what is the point of the numbering?

I don't think building on browser-use is the way to go, it was the worst performing harness of all we tested [https://www.rtrvr.ai/blog/web-bench-results]. We built out our own logic to build custom Action Trees that don't require any ARIA or accessibility setup from websites.

Would love to meet and trade notes, if possible (rtrvr.ai/request-demo)!

Is this open source?
We are about to open source next week!
Very interesting. Is this related to CoPaw and AgentScope? I think the AG-UI integration for dynamic UI would be useful here, are you using that?

I'm building a web UI workspace right now where I have been planning to integrate the agent as an app or component instead of having it be the entire UI. I may fork PageAgent for that, lets see.

Currently the only dependency is zod for schema parsing.

I'm intentionally building on a lightweight, in-page JavaScript foundation to carve out some differentiation from the Python-heavy agent ecosystem.

The "protocol" layer of AG-UI does look interesting. I'll look into it to see if I can reuse something, although it seems to be evolving more toward an integration framework rather than an open protocol.

Really glad this resonates with your use case. Lightweight embedding is exactly my priority scenario. Would love to hear how the work goes!

If an AI agent runs inside the page and can see the DOM and the user’s session, how do you keep it safe without limiting what it can actually do?
Advantages and disadvantages of sandboxing agents with OS DAC/MAC, VM, container, user-space, WASM runtime, browser extension permissions, and IDK IFrames and Origins?

How are AI agents built into browsers sandboxed by comparison?

Recent work in sandboxing agents; https://news.ycombinator.com/item?id=47223974

This is the problem every agent has to face.

PageAgent’s differentiator is that site developers can embed it directly into their own pages. In that scenario, with proper system instructions plus a built-in whitelist/blacklist API for interactive elements, the risk is pretty manageable.

For the general-agent case, operating on pages you don’t control, the risk is definitely higher. I’m currently working on the human-in-the-loop feature so the user can intervene before sensitive actions.

Would love to hear other approaches if anyone has ideas.

Am I right in thinking you’re asking me to put an API in frontend code?
i tested the chrome extension, it worked great - i asked it to change the light/dark mode of a website, it navigated to settings, clicked a few tabs, scrolled and found it to toggle the setting.

thanks for sharing!

The "inside-out" framing resonates with me. I have been building embeddable scripts that get dropped into third-party sites via a script tag, and the architectural decisions you are making here mirror a lot of the same trade-offs I have encountered.

The biggest challenge with any in-page tool is the tension between needing deep DOM access and maintaining isolation. For the agent UI itself, you almost certainly want iframe isolation -- CSS conflicts with the host page are a constant headache otherwise. But for the actual DOM interaction (reading page state, simulating events), you need to be in the host page context. This dual architecture (iframe for your UI, direct access for page interaction) adds complexity but is worth it for reliability across diverse sites.

One thing I would flag as a real production concern: Content Security Policy. A significant number of enterprise and SaaS sites set strict CSP headers that will block inline scripts, eval, and sometimes even dynamically created script elements. If your target audience includes embedding this in production apps, you will hit CSP issues quickly. The bookmarklet approach cleverly sidesteps this for demos, but for a proper integration the host app needs to explicitly whitelist your script origin.

The HTML dehydration approach you described in the comments (parsing live HTML, stripping to semantic essentials, indexing interactive elements) is smart. In my experience, the fidelity of that serialization step is where most of the edge cases live. Shadow DOM, canvas elements, dynamically loaded content, iframes-within-iframes -- each one needs special handling and you end up building a progressively more complex serializer over time. Keeping that layer thin and well-tested is probably the highest-leverage investment for long-term maintainability.

This looks really useful! I'm having a hard time understanding how it might be used by each specific user, using their own LLM instance, though. Is that because it does not support that type of bring-your-own-llm scheme, or am I just not putting two and two together with some kind of chain of user authentication, then token exchange?
How is this secure? Seems like this PageAgent could be the user pretty easily and cause all kinds of problems.
Cool, but likely to become obsolete with the rise of agents that ship with the browser.