LLM Wiki

alibaba/page-agent — 웹페이지 안에 사는 JavaScript GUI 에이전트

Properties2
descriptionPage Agent는 웹페이지 내부 JavaScript와 텍스트 DOM 분석으로 자연어 웹 조작을 붙이는 Alibaba의 MIT 오픈소스 도구다.
tagsai-agents, browser-automation, developer-tools, open-source

5 min read

출처

  • source_url: https://github.com/alibaba/page-agent
  • raw: raw source: 2026-07-27-github-alibaba-page-agent
  • captured: 2026-07-27
  • repository: alibaba/page-agent
  • license: MIT
  • primary language: TypeScript
  • GitHub metadata at capture: 27,965 stars, 2,462 forks, 49 open issues, default branch main

개요

Page Agent는 웹 페이지 안에서 실행되는 JavaScript 기반 GUI 에이전트다. 별도 헤드리스 브라우저, Python 런타임, 필수 브라우저 확장 없이 페이지에 스크립트를 주입하거나 npm 패키지를 붙여 자연어 명령으로 버튼 클릭, 입력, 폼 작성 같은 웹 UI 조작을 수행하게 한다. 기존 2026-07-05-pytorchkr-topic-11071-page-agent-natural-language-web-gui-alibaba가 PyTorchKR 소개글을 요약한 2차 출처라면, 이 노트는 GitHub README와 저장소 메타데이터를 직접 캡처한 1차 출처 요약이다.

핵심 특징

  • 인페이지 에이전트: “웹페이지 안에 사는 GUI 에이전트”를 지향하며, 한 줄 스크립트나 page-agent npm 패키지로 통합한다.
  • 텍스트 기반 DOM 조작: 스크린샷과 멀티모달 모델 대신 DOM을 텍스트로 처리해 조작 대상을 찾는 접근이다.
  • BYO LLM: Qwen 계열과 OpenAI 호환 API처럼 사용자가 고른 모델·엔드포인트를 연결할 수 있다.
  • 확장 가능한 범위: 기본은 단일 페이지 내부 조작이지만, 선택적으로 Chrome extension과 MCP Server(beta)를 통해 멀티 페이지 작업이나 외부 에이전트 클라이언트 제어로 넓힌다.
  • 제품 내 코파일럿 지향: SaaS 코파일럿, ERP/CRM/admin 폼 입력 자동화, 접근성/음성 명령, 브라우저 제어 MCP 같은 활용 사례를 전면에 둔다.

사용 방식

README 기준 가장 빠른 실험 경로는 CDN에서 page-agent.demo.js를 불러오는 방식이다. 단, 이 데모 CDN은 무료 테스트 LLM API를 사용하며 기술 평가용으로 제한된다고 명시되어 있다. 실제 제품에 넣을 때는 npm install page-agent 후 PageAgent를 생성하면서 model, baseURL, apiKey, language 등을 직접 지정하는 쪽이 운영 경로다.

import { PageAgent } from 'page-agent'
 
const agent = new PageAgent({
    model: 'qwen3.5-plus',
    baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
    apiKey: 'YOUR_API_KEY',
    language: 'en-US',
})
 
await agent.execute('Click the login button')

위키에서의 위치

Page Agent는 moc-ai-agents 안에서는 브라우저/웹 GUI 에이전트 계열이고, moc-ai-coding 관점에서는 코딩 에이전트 자체라기보다 제품 UI에 자연어 조작 계층을 이식하는 런타임에 가깝다. browser-use-desktop·computer-use-agent-landscape가 브라우저/OS 외부에서 화면을 제어하는 쪽이라면, Page Agent는 애플리케이션 내부 DOM과 JavaScript 권한을 활용해 훨씬 가볍게 붙는 방향이다. 프로젝트 README도 browser-use의 DOM 처리와 프롬프트 구성 요소에서 영향을 받았다고 밝힌다.

주의점

  • 인페이지 JavaScript 방식은 배포가 쉽지만, 제품 데이터와 사용자 권한을 직접 다루므로 LLM API 키 보관, DOM 노출 범위, 명령 실행 권한, 감사 로그 설계가 필요하다.
  • 스크린샷을 쓰지 않는 장점은 비용과 권한 측면에서 유리하지만, 시각적 상태와 CSS 기반 의미가 중요한 UI에서는 DOM 텍스트만으로 충분한지 검증해야 한다.
  • Chrome extension과 MCP Server는 범위를 넓히는 선택 기능이므로, 단일 페이지 코파일럿과 멀티 탭 브라우저 자동화 요구를 분리해 평가하는 편이 좋다.

관련 링크