기술
agent-browser는 특정 워크플로우에서 사용할 수 있도록 AI 코드 에이전트에게 브라우저를 사용하는 방법을 가르치는 기술을 함께 제공합니다. 기술을 설치하면, Cursor, Claude Code 또는 Codex에서 에이전트가 수동 지침 없이 브라우저 작업을 자동화할 수 있습니다.
이용 가능한 기술
- agent-browser — 일반적인 브라우저 자동화: 탐색, 스냅샷, 양식, 스크린샷, 데이터 추출, 세션, 인증, 차이 비교 및 전체 명령어 참조.
- dogfood — 체계적 탐색 테스팅. 실제 사용자처럼 앱을 탐색하고 버그와 사용자 경험 문제를 찾아 구조화된 보고서를 생성하며, 스크린샷과 재현 영상 포함.
- electron — 내장된 크롬 개발자 도구 프로토콜 포트에 연결하여 어떤 Electron 앱(VS Code, Slack, Discord, Figma 등)도 자동화할 수 있습니다. 이는 agent-browser가 Slack macOS 앱과 같은 네이티브 데스크톱 앱을 제어하는 방식입니다.
- slack — 브라우저 기반의 Slack 자동화. 미확인 메시지 확인, 채널 탐색, 대화 검색, 메시지 전송, 데이터 추출 등 — 모든 과정에서 API 토큰이 필요하지 않습니다.
설치
npx skills add vercel-labs/agent-browser --skill agent-browser
npx skills add vercel-labs/agent-browser --skill dogfood
npx skills add vercel-labs/agent-browser --skill electron
npx skills add vercel-labs/agent-browser --skill slack설치 후, 에이전트는 매칭되는 요청을 만나면 자동으로 적절한 기술을 활성화합니다.
agent-browser
핵심 기술. 에이전트에게 전체 agent-browser API를 가르칩니다: 탐색-스냅샷-상호작용-재스냅샷 워크플로우, 모든 명령어, 명령어 체이닝, 인증(인증 저장소 및 상태 유지), 세션, 차이 비교, 자바스크립트 평가, 주석이 있는 스크린샷, 의미적 위치자, 구성 설정 등.
에이전트 상호작용 예시:
- "example.com을 열고 연락처 양식을 작성하세요"
- "로그인 후 대시보드의 스크린샷을 찍으세요"
- "스테이징과 프로덕션 버전의 홈페이지를 비교하세요"
dogfood
탐색 테스팅을 위한 구조화된 워크플로우. 에이전트는 대상 URL을 열고, 체계적으로 앱을 탐색(페이지 탐색, 양식 테스트, 버튼 클릭, 콘솔 오류 확인)하며 발견한 모든 문제를 다음과 같이 문서화합니다:
- 번호가 붙은 재현 단계
- 단계별 스크린샷
- 상호작용형 버그에 대한 재현 영상
- 심각도 분류
출력물은 결과 디렉터리에 마크다운 형식의 보고서로 생성되어 책임 팀에 바로 전달할 수 있습니다. 단일 프롬프트로 실행 가능합니다: 예를 들어 "dogfood vercel.com" 또는 "QA http://localhost:3000 — 요금 페이지에 집중".
electron
Electron 앱(VS Code, Slack, Discord, Figma, Notion, Spotify 등)은 크로뮴 기반으로 만들어져 있으며, 크롬 개발자 도구 프로토콜(CDP) 포트를 노출합니다. agent-browser는 이 포트에 연결할 수 있습니다. 이 기술은 에이전트가 어떤 Electron 앱을 시작하거나 연결한 후, 표준 스냅샷-상호작용 워크플로우를 사용하여 자동화하는 방법을 가르칩니다.
Electron 앱은 크로엄 기반이므로 크롬 개발자 도구 프로토콜(CDP) 포트를 공개합니다. --remote-debugging-port 옵션으로 앱을 시작하고 연결한 후, 표준 스냅샷-상호작용 워크플로우를 사용합니다. 이는 slack 기술이 기반으로 하는 핵심입니다.
slack
브라우저 기반의 Slack 자동화. 기존의 Slack 세션(agent-browser connect 9222)에 연결하거나 새 브라우저에서 Slack을 열고, 스냅샷과 요소 참조를 사용하여 UI를 탐색합니다. 미확인 메시지 확인, 채널 및 개인 메시지 탐색, 대화 검색, 메시지 데이터 추출, 스크린샷 찍기 등을 지원하며, 모든 과정에서 Slack API 토큰이나 봇 설정이 필요하지 않습니다.
소스
모든 기술 파일은 리포지토리의 skills/ 디렉터리에 있습니다.