PageAgent: 웹 페이지에 살아있는 GUI 에이전트
Source: Dev.to
대부분의 AI 에이전트 프레임워크는 웹 페이지에서 버튼을 클릭하기 위해 서버, 헤드리스 브라우저, 전체 자동화 스택이 필요합니다. 페이지 자체는 이 과정에 관여할 여지가 없습니다.
PageAgent는 다른 접근 방식을 취합니다. 페이지에서 직접 실행되는 JavaScript 라이브러리입니다. 이를 추가하면 사용자가 자연어 명령을 제공할 수 있으며—AI가 실시간 DOM을 읽고 UI를 이해한 뒤 행동합니다. 서버도, 외부 프로세스도, 자동화 스택도 필요 없습니다.
이는 여러분의 웹 앱이 자동화되는 것이 아니라, 자동화를 수행한다는 의미입니다. AI가 보는 것, 행동 방식, 그리고 어떤 LLM이 구동되는지를 여러분이 제어합니다. 인텔리전스는 여러분의 페이지에 존재하며, 다른 사람의 서버에 있지 않습니다.
⭐ GitHub에서 PageAgent에 스타를 눌러 주세요 — MIT 라이선스, 오픈 소스, 600+ ⭐.
제로 인프라스트럭처
npm 프로젝트의 경우, 프로그래밍 API도 동일하게 깔끔합니다:
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'gpt-5.1',
baseURL: 'https://api.openai.com/v1',
apiKey: YOUR_KEY,
})
await agent.execute('Fill the expense report for last Friday')스크린샷도 없고, OCR도 없으며, 비전 모델도 없습니다. PageAgent는 텍스트 기반 DOM과 함께 작동하므로 빠르고 가볍습니다. 모든 설정 옵션은 통합 문서를 참고하세요.
인간‑인‑루프
대부분의 AI 에이전트는 일회성으로 동작합니다. PageAgent는 협업형입니다.
내장된 패널이 에이전트의 사고 과정을 실시간으로 보여줍니다. 모호한 단계에 대해 사용자에게 설명을 요청합니다. 사용자는 언제든지 중지하거나, 수정하거나, 방향을 바꿀 수 있습니다. 이것이 데모와 실제 배포 가능한 제품을 구분 짓는 요소입니다.
이미 챗봇이 있나요? 그 뒤에 PageAgent를 연결하세요. 봇이 사용자에게 “오른쪽 상단의 제출 버튼을 클릭하세요” 라고만 말하는 대신, 실제로 클릭해 줍니다 — 바로 눈앞에서. 이제 어시스턴트는 조언을 멈추고 행동을 시작합니다.
자신만의 LLM 가져오기
OpenAI, Claude, DeepSeek, Qwen, Gemini, Grok — 혹은 Ollama를 통해 완전 오프라인으로. PageAgent는 백엔드가 없으며 외부 서비스를 호출하지 않습니다. 데이터는 페이지에서 구성한 LLM으로 직접 흐릅니다. 이 라이브러리는 MIT‑licensed이며 완전히 감사 가능합니다. (GitHub)
Source:
페이지 간 이동
PageAgent는 웹 페이지 내부에서 실행됩니다 — 앱 상태에 대한 전체 컨텍스트를 가진 SPA에 이상적입니다.
일부 작업은 여러 페이지에 걸쳐 진행됩니다. 선택적 브라우저 확장 프로그램을 사용하면 이러한 경우에 다중 탭 인식을 추가할 수 있습니다. 이는 의존성이 아니라 파워‑업입니다.
여기서 다른 점: 페이지가 브라우저를 제어합니다, 그 반대가 아닙니다.
const result = await window.PAGE_AGENT_EXT.execute(
'Compare the top 3 results for "wireless keyboard" on Amazon',
{
baseURL: 'https://api.openai.com/v1',
apiKey: YOUR_KEY,
model: 'gpt-5.1',
onStatusChange: (status) => updateUI(status),
}
)페이지가 작업을 시작하고, LLM을 제어하며, 실시간 콜백을 받습니다. 접근하려면 토큰을 통한 명시적인 사용자 권한이 필요합니다.
PageAgent가 사용자의 실제 브라우저에서 실행되기 때문에, 사용자의 인증된 세션 내에서 동작합니다. 자격 증명 공유, 쿠키 관리, 서버‑사이드 로그인 흐름이 필요 없습니다. 사용자는 이미 로그인된 상태이며, 에이전트는 단지 행동을 수행합니다.
이로 인해 서버‑사이드 에이전트가 접근할 수 없는 시나리오가 열립니다:
- 조달 도구: 회사 공급업체 포털에서 물품을 재주문합니다 — 사용자가 로그인된 상태에서 에이전트가 직접 주문 흐름을 탐색합니다.
- 여행 예약: 사용자의 기업 예약 시스템을 통해 진행됩니다 — 공개 요금을 크롤링하는 것이 아니라 실제 예약 흐름을 운영합니다.
- 프로젝트 트래커: 팀 보드에 작업을 생성합니다 — API 통합이 필요 없으며, 에이전트는 사용자가 사용하는 동일한 UI를 사용합니다.
대상은 누구인가요?
- SaaS 개발자 — 백엔드를 다시 작성하지 않고 AI 코파일럿을 배포합니다.
- 엔터프라이즈 팀 — ERP, CRM, 관리 시스템에서 20번 클릭하는 워크플로를 탐색하는 대신 사용자가 원하는 것을 자연어로 설명하도록 합니다.
- AI 빌더 — 기존 에이전트 안에서 도구로
@page-agent/core를 사용하거나, 고객 서비스 봇 뒤에 연결해 UI를 직접 조작하도록 합니다.
AI를 웹 UI에 직접 도입할 준비가 되셨나요? 오늘 바로 PageAgent를 사용해 보세요!
모듈식 및 확장 가능
전체 패키지를 사용하여 턴키 솔루션을 구현하거나, 맞춤 UI를 위해 헤드리스 코어를 가져오거나, 개별 패키지(DOM 컨트롤러, LLM 클라이언트, UI 패널)를 필요에 따라 선택해서 사용할 수 있습니다. 맞춤형 도구, 라이프사이클 훅, 프롬프트 커스터마이징 및 데이터 마스킹이 모두 내장되어 있습니다.
⭐ GitHub에 스타 달기 — 그리고 우리를 성장시켜 주세요.
실시간 데모 체험하기 — 회원가입 없이 바로 사용해 보세요. 또는 북마크릿을 끌어다 놓아 모든 사이트에서 시도할 수 있습니다.
문서 읽기 — CDN, npm 및 프로그래밍 방식 설정 가이드.
확장 프로그램 설치 — 다중 페이지 작업을 위해.
PageAgent은 MIT 라이선스 하에 오픈 소스입니다. 데모 사이트의 무료 테스트 API는 평가용으로만 제공됩니다 — 프로덕션 사용을 위해서는 직접 LLM API 키를 가져오세요. 이용 약관