Agent Browser
Agent Browser는 Vercel Labs가 만든 AI 에이전트용 브라우저 자동화 CLI와 스킬입니다. 실제 페이지를 열고 요소를 클릭하며 스크린샷을 찍고 영상을 기록하므로 에이전트가 웹을 추측하는 대신 직접 쓸 수 있습니다. Apache-2.0, skills.sh 설치 수 약 87만 7천 회입니다.
설치
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
스킬 파일 (1)
- skills/agent-browser/SKILL.md
Agent Browser 리뷰: 코딩 에이전트에게 진짜 브라우저를
에이전트는 웹에서 눈이 먼 상태입니다. 페이지를 가져와 텍스트를 읽을 수는 있지만 어떻게 렌더링되는지 볼 수 없고, JavaScript가 실행된 뒤에야 나타나는 버튼을 클릭할 수 없으며, 결제 흐름이 실제로 동작하는지 확인할 수 없습니다. 작업에 진짜 브라우저가 필요한 순간 에이전트는 사람에게 봐달라고 부탁해야 합니다.
Agent Browser가 그 문제를 해결합니다. Vercel Labs가 만든 AI 에이전트용 브라우저 자동화 CLI로, 사용법을 가르치는 스킬이 함께합니다. 저장소의 GitHub 스타는 4만 8천 개에 가깝고, 스킬의 skills.sh 설치 수는 약 87만 7천 회이며 전체가 Apache-2.0 라이선스입니다. 에이전트는 열고, 클릭하고, 스크린샷을 찍고, 기록할 수 있는 헤드리스 브라우저를 얻습니다.
Agent Browser란?
Agent Browser는 함께 동작하는 두 가지입니다. CLI는 Playwright 기반의 진짜 브라우저 자동화 도구로, 페이지를 열고 이동하며 간단한 참조 시스템으로 요소와 상호작용하고 스크린샷을 찍으며 세션 영상을 기록합니다. 스킬은 저장소에 체크인된 얇은 디스커버리 스텁으로, 에이전트에게 먼저 CLI를 설치하고 설치된 바이너리 버전에 맞는 워크플로 가이드를 불러오게 하므로 지침이 낡지 않습니다.
버전에 맞는 가이드가 바로 영리한 부분입니다. 브라우저 자동화는 빠르게 변하고, 지난달 CLI 기준으로 쓴 스킬은 잘못된 플래그를 가르치게 됩니다. 실행 시점에 가이드를 가져오면 스킬은 항상 현재 동작을 가르칩니다.
핵심 기능
1. 가져오기만이 아닌 진짜 페이지 상호작용
에이전트는 페이지를 이동하고 참조로 요소를 클릭하며 양식을 채우고 스크롤합니다. JavaScript가 실행된 뒤에야 존재하는 웹 앱 부분에 도달할 수 있는데, 이는 일반 HTTP 가져오기로는 절대 볼 수 없는 곳입니다.
2. 시각 검증을 위한 스크린샷
에이전트는 페이지 스크린샷을 찍어 결과를 볼 수 있습니다. 이것으로 프론트엔드 작업의 고리가 닫힙니다. 페이지를 만들고 스크린샷을 찍고 깨진 레이아웃을 보고 고치고 다시 찍는 일을 사람 없이 모두 할 수 있습니다.
3. 세션 기록
브라우저 세션을 영상으로 기록하거나 실행 과정의 콘택트 시트를 만들 수 있습니다. 저장소에는 콘택트 시트 예시가 들어 있어 전체 흐름을 한눈에 볼 수 있고 디버깅과 동작 증명에 유용합니다.
4. 실행 시 불러오는 버전 대응 가이드
체크인된 SKILL.md는 스텁입니다. 에이전트는 명령을 실행해 설치된 CLI 버전과 정확히 맞는 전체 워크플로 가이드를 가져옵니다. CLI가 진화해도 지침은 항상 바이너리와 일치합니다.
5. 에이전트를 가리지 않고 동작
스킬은 개방형 Agent Skills 형식을 쓰므로 skills CLI를 통해 Claude Code와 Cursor, Codex, GitHub Copilot, Gemini CLI 등에 설치됩니다. CLI 자체도 npm과 셸 설치 프로그램으로 구할 수 있습니다.
사용 방법
skills CLI로 스킬을 설치합니다. 아래 명령은 Vercel Labs 저장소에서 agent-browser 스킬을 가져옵니다.
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
스킬이 발동하면 에이전트가 먼저 CLI를 설치하고 맞는 가이드를 불러온 뒤 브라우저를 조작하기 시작합니다. CLI를 직접 설치해 직접 쓸 수도 있습니다. npm 패키지와 셸 설치 프로그램은 모두 저장소에 문서화되어 있습니다. 그 뒤 에이전트에게 페이지를 열거나 흐름을 테스트하거나 디자인을 스크린샷으로 찍으라고 하면 사용자처럼 브라우저를 다룹니다.
누구에게 좋을까?
에이전트에게 자기 작업물을 검증하게 하고 싶은 프론트엔드 개발자가 핵심 대상입니다. QA 작업에도 맞습니다. 에이전트가 결제나 가입 흐름을 따라가며 무엇이 고장 났는지 보고합니다. 정적 복사본을 읽는 것이 아니라 페이지와 상호작용해야 하는 조사 작업에도 좋습니다. 에이전트가 코드만 읽는다면 필요하지 않습니다.
가격
Agent Browser는 무료 오픈소스이며 Apache-2.0 라이선스입니다. CLI와 스킬, 가이드 모두 무료입니다. 브라우저 자동화는 내 컴퓨터에서 로컬로 실행되므로 비용을 낼 호스팅 서비스가 없습니다.
장점과 단점
장점: 진짜 브라우저가 프론트엔드와 QA 작업의 검증 공백을 메웁니다. 버전 대응 가이드 설계 덕분에 지침이 항상 최신입니다. 4만 8천 개에 가까운 스타와 100만 회에 가까운 설치 수입니다. 너그러운 Apache-2.0 라이선스입니다.
단점: 브라우저 자동화는 강력한 기능이라 독립 보안 리뷰에서 설치 전 확인할 항목이 지적된 바 있으니 먼저 스킬과 CLI를 검토하세요. 스킬은 스텁이라 진짜 가이드는 실행 시 가져오므로 네트워크가 필요합니다. 헤드리스 브라우저는 무거운 페이지에서 느리고 불안정할 수 있습니다. 스킬 파일만이 아니라 로컬 설치가 필요합니다.
최종 평가
Agent Browser는 코딩 에이전트에게 부족했던 감각, 즉 시각입니다. 에이전트가 페이지를 열고 클릭하며 스크린샷을 볼 수 있게 되면 온갖 검증이 더 이상 사람을 필요로 하지 않습니다. 프론트엔드와 QA 작업에서는 거의 필수에 가깝습니다. GitHub에서 시도해 보세요: vercel-labs/agent-browser.



