alibaba/page-agent: 웹페이지 내에서 동작하는 GUI 에이전트

요약

Alibaba에서 공개한 page-agent는 웹페이지 내에서 자연어로 GUI를 제어할 수 있는 에이전트 라이브러리입니다. 별도의 브라우저 확장 프로그램이나 복잡한 DOM 조작 없이 자바스크립트 삽입만으로 AI 코파일럿 기능을 구현할 수 있습니다.

핵심 포인트

자바스크립트 삽입만으로 웹페이지 내 GUI 제어 가능
멀티모달 LLM이나 스크린샷 없이 텍스트 기반 동작 지원
SaaS AI 코파일럿, 스마트 양식 채우기, 접근성 향상에 활용 가능
사용자가 원하는 LLM을 직접 연결하여 사용 가능 (BYOLLM)
MCP 서버 지원을 통해 외부 제어 및 멀티 페이지 작업 가능

웹페이지 내에 상주하는 GUI 에이전트. 자연어로 웹 인터페이스를 제어하세요.

🌐 English | 中文

🚀 데모 (Demo) | 📖 문서 (Docs) | 📢 HN 토론 (HN Discussion) | 𝕏 X에서 팔로우 (Follow on X)

page-agent-demo-0227.mp4

🎯 쉬운 통합 (Easy integration)

브라우저 확장 프로그램 (browser extension), /python, /헤드리스 브라우저 (headless browser)가 필요 없습니다. - 단지 페이지 내 자바스크립트 (in-page javascript)만 있으면 됩니다. 모든 것이 귀하의 웹페이지 내에서 일어납니다.
**📖 텍스트 기반 DOM 조작 (Text-based DOM manipulation)**이 필요 없습니다. - 스크린샷이 필요 없습니다. 멀티모달 LLM (multi-modal LLMs)이나 특별한 권한도 필요하지 않습니다.

🧠 귀하의 LLM을 직접 사용하세요 (Bring your own LLMs)
🐙 멀티 페이지 작업을 위한 선택적 크롬 확장 프로그램 (chrome extension). - 그리고 외부에서 이를 제어하기 위한 MCP 서버 (MCP Server, Beta)

SaaS AI 코파일럿 (SaaS AI Copilot)— 단 몇 줄의 코드로 제품에 AI 코파일럿을 탑재하세요. 백엔드 재작성이 필요 없습니다.
스마트 양식 채우기 (Smart Form Filling)— 20번의 클릭이 필요한 워크플로우를 한 문장으로 바꾸세요. ERP, CRM 및 관리 시스템에 완벽합니다.
접근성 (Accessibility)— 자연어를 통해 어떤 웹 앱이든 접근 가능하게 만드세요. 음성 명령, 스크린 리더, 장벽 제로.
멀티 페이지 에이전트 (Multi-page Agent)— 크롬 확장 프로그램 (chrome extension)을 통해 귀하의 웹 에이전트의 범위를 브라우저 탭 전체로 확장하세요.
MCP- 에이전트 클라이언트가 귀하의 브라우저를 제어할 수 있도록 허용합니다.

저희의 무료 데모 LLM으로 PageAgent를 시도해 볼 수 있는 가장 빠른 방법:

<script src="{URL}" crossorigin="true"></script>

이 데모 CDN은 저희의 무료 테스트용 LLM API를 사용합니다. 이를 사용함으로써 귀하는 해당 약관에 동의하게 됩니다. ⚠️ 기술 평가용으로만 사용하십시오.

미러 (Mirrors)	URL
글로벌 (Global)	https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js
중국 (China)	https://registry.npmmirror.com/page-agent/1.10.0/files/dist/iife/page-agent.demo.js

데모 에이전트를 자동으로 생성하지 않고 스크립트를 로드하려면 ?autoInit=false를 추가하세요. 그런 다음 new window.PageAgent(...)를 사용하여 인스턴스를 생성할 수 있습니다.

npm install page-agent

import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
...

더 많은 프로그래밍 방식의 사용법은 📖 문서 (Documentations)를 참조하세요.

PageAgent로 멋진 것을 만드셨나요? 여기에 추가해 주세요! 프로젝트를 공유하려면 PR을 열어주세요.

이것들은 커뮤니티 프로젝트이며 — 저희가 유지 관리하거나 보증하지 않습니다. 사용자의 판단에 따라 주의해서 사용하십시오.

프로젝트	설명
당신의 것인가요?
PR을 열어주세요 🙌

저희는 커뮤니티의 기여를 환영합니다! 가이드라인은 CONTRIBUTING.md를, 로컬 개발 워크플로우는 docs/developer-guide.md를 참조하세요.

원칙과 현재 상태에 관한 유지 관리자의 노트를 읽어주시기 바랍니다.

실질적인 인간의 개입 없이 봇(bots) 또는 AI에 의해 전적으로 생성된 기여는 받아들여지지 않습니다.

이 프로젝트는 browser-use의 훌륭한 작업물을 기반으로 구축되었습니다.

PageAgent는 서버 측 자동화(server-side automation)가 아닌 **클라이언트 측 웹 향상(client-side web enhancement)**을 위해 설계되었습니다.

DOM 처리 컴포넌트와 프롬프트(prompt)는 browser-use에서 유래되었습니다:
Browser Use <https://github.com/browser-use/browser-use>
Copyright (c) 2024 Gregor Zunic
...

⭐ PageAgent가 도움이 되었다면 이 저장소(repo)에 Star를 눌러주세요!

AI 자동 생성 콘텐츠

원문 바로가기

alibaba/page-agent: 웹페이지 내에서 동작하는 GUI 에이전트

요약

핵심 포인트

page-agent-demo-0227.mp4

댓글