웹페이지에 자연어 기반 GUI 에이전트를 심는 방법
관리 시스템의 복잡한 폼을 한 문장으로 채우거나, 버튼 클릭을 음성 명령으로 처리하는 장면을 떠올려 보세요. 이 도구는 웹페이지 안에 AI 에이전트를 심어 사용자가 자연어로 화면 요소를 조작하게 합니다. 브라우저 확장이나 별도 서버 없이 페이지 내부의 자바스크립트로 동작하며, DOM 요소를 텍스트로 분석해 작업을 수행합니다.
스크린샷 없이 DOM 텍스트로 처리
이 도구는 화면을 이미지로 캡처하지 않고 DOM 요소를 텍스트 기반으로 분석합니다. 따라서 멀티모달 LLM이나 특수한 권한이 필요 없습니다. 모든 처리가 클라이언트 사이드에서 일어나며, 서버 측 자동화 도구와는 다른 접근 방식을 취합니다. 사용자가 입력한 자연어 명령을 받아 해당 페이지의 요소를 찾아 클릭이나 입력 같은 작업을 수행합니다.
모델 선택과 외부 제어
사용자는 자신의 LLM API 키를 사용해 다양한 모델을 연결할 수 있으며, 로컬에 배포된 모델도 지원합니다. 기본 제공되는 데모 LLM은 기술 평가 목적으로만 사용되며, 실제 서비스에는 자체 API 키를 설정해야 합니다. 크롬 확장 프로그램을 통해 여러 탭에 걸친 작업을 수행할 수 있고, MCP 서버를 통해 외부에서 이 에이전트를 제어할 수도 있습니다. MCP 서버는 현재 베타 단계에 있습니다.
적용 사례와 설치 방법
SaaS 제품 안에 AI 코파일럿을 추가하거나, ERP와 CRM 같은 관리 시스템에서 복잡한 폼 입력을 한 문장으로 처리하는 데 적합합니다.
- CDN 스크립트 삽입 HTML에 스크립트 태그를 추가하는 가장 빠른 방법입니다. 데모 LLM이 자동으로 초기화되므로, 기술 평가용으로 적합합니다.
- NPM 패키지 설치 프로젝트에
page-agent를 설치하고, TypeScript 또는 JavaScript로 에이전트를 직접 구성하는 방법입니다. 자체 LLM 설정이 가능합니다. - 크롬 확장 프로그램 여러 브라우저 탭에 걸친 작업을 수행할 때 선택적으로 사용할 수 있는 확장 기능입니다.
클라이언트 전용 설계와 기여 원칙
이 프로젝트는 서버 측 자동화가 아닌 클라이언트 사이드 웹 강화에 초점을 맞춥니다. 따라서 브라우저 외부에서 페이지를 제어하는 용도로는 설계되지 않았습니다. 기여를 환영하지만, 인간 개입 없이 봇이나 AI가 생성한 코드는 받아들이지 않는다는 원칙을 명시하고 있습니다. 라이선스는 MIT이며, DOM 처리 컴포넌트와 프롬프트는 browser-use 프로젝트에서 파생되었습니다. 도입 전에는 유지보수자의 노트에서 현재 상태와 원칙을 확인하는 것이 좋습니다.
