page-agent - 코드 1줄로 웹페이지에 AI 에이전트 추가하기
(alibaba.github.io)-
<script src="page-agent.js"></script>한줄만 넣으면 웹사이트가 AI-네이티브 앱으로 변신- 브라우저 확장, Python, 헤드리스 브라우저 없이도 동작
- 자연어로 지시하면 나머지는 AI가 처리. 텍스트 기반 DOM 조작 기능으로 스크린샷, OCR, 멀티모달 LLM 필요없음
- 모든 처리가 웹페이지 내부에서 수행되는 in-page 실행 모델로 별도 권한 요청 없이 DOM 요소를 직접 제어함
- OpenAI, Claude, DeepSeek, Qwen 등 다양한 모델 사용가능하며 Ollama로 풀 오프라인도 가능 (API 키 기반 통합)
- 인터랙티브한 UI와 human-in-the-loop 인터페이스 제공
- 북마클 이용해서 아무 웹페이지에서나 테스트 가능
- Chrome 확장을 설치하면 멀티 페이지를 연결한 테스크도 지원하며, 브라우저 레벨 제어, 외부 연동까지 지원
- 주요 활용 사례
- SaaS AI Copilot: 백엔드 수정 없이 제품 내 AI Copilot 구현
- 스마트 폼 자동화: 다단계 클릭 과정을 한 문장으로 단축해, ERP/CRM/관리자 도구를 개선
- 접근성 강화: 음성 명령과 스크린리더를 통한 웹 접근성 향상
- MIT 라이선스 : Repo 는 alibaba/page-agent
bookmarklet 으로 간단하게 페이지에 LLM 붙이기 좋은 것 같습니다. 기본 bookmarklet 은 알리바바(중국)로 가는 것이 찜찜 하신 분들은 baseURL 과 apiKey를 넣어서 사용하시는 LLM Endpoint 로 지정하실 수 있습니다. ( local LLM이나 OpenAI 등 )
javascript:(function(){import('https://cdn.jsdelivr.net/npm/page-agent@1.5.5/+esm').then(module=>{window.agent=new module.PageAgent({model:'gpt-5.4',baseURL:'<your-api-url>',apiKey:'<your-api-key>'});if(window.agent.panel)window.agent.panel.show();}).catch(e=>console.error(e));})();
처음 뭐지 어떻게 쓰는거야 했는데 이제 이해했네요
익스텐션 설치하고 토스증권에서 soxl 30일 전 주가 가격알고싶다고 하니까 자기가 조작해서 들어가서 가격보고 알려주네요.
playwright와 AI 연결 보다 훨씬 속도도 빠르네요.
Try on Other Sites
Step 2: Drag this button to your bookmarks
와 사이트에 이런 게 있는데 진짜로 드래그 하니까 북마크로 추가되네요
처음 보는데 너무 신기하다 북마클릿 공유할 때 좋은 방법이네요