SawyerHood/dev-browser

해결하는 문제

dev-browser는 AI 코딩 에이전트가 모든 단일 작업에 대해 브라우저 세션을 재시작하는 오버헤드 없이 웹 브라우저와 상호작용할 수 있는 방법을 제공합니다. 에이전트가 여러 스크립트 호출 간에 상태(예: 로그인 세션 또는 탐색 기록)를 유지할 수 있게 하여, 더 효율적인 "관찰 $\rightarrow$ 행동 $\rightarrow$ 검증" 워크플로우를 가능하게 합니다.

작동 방식

이 도구는 Chrome 인스턴스를 관리하는 데몬으로 작동합니다. 코딩 에이전트는 CLI나 MCP (Model Context Protocol) 서버를 사용하여 이 데몬에 짧은 JavaScript 스크립트를 보낼 수 있습니다. 이 스크립트는 수정된 Puppeteer API를 사용하여 브라우저를 제어합니다.

주요 기술 메커니즘은 다음과 같습니다:

• 영구 페이지: 서로 다른 스크립트 실행 간에 상태를 유지하는 이름이 지정된 탭입니다.
• 접근성 트리 스냅샷: 원시 HTML 대신 LLM이 읽기 쉽고 안정적인 요소 참조(예: e12)를 포함하는 간결한 접근성 트리를 제공합니다.
• 유연한 연결: 자체적으로 격리된 Chrome 프로필을 실행하거나 사용자의 머신에서 이미 열려 있는 브라우저에 연결(attach)할 수 있습니다.
• 실행 컨텍스트: 각 스크립트는 전역 변수를 분리하기 위해 새로운 node:vm 컨텍스트에서 실행됩니다.

대상 독자

브라우저 작업을 자동화하고, 웹 페이지를 검사하며, 자신의 작업 결과를 실시간으로 검증해야 하는 AI 에이전트(특히 코딩 에이전트)를 구축하는 개발자를 위해 설계되었습니다.

주요 특징

• 상태 저장 세션: 이름이 지정된 탭을 통해 여러 호출 간에 브라우저 상태를 유지합니다.
• AI 최적화 출력: 간결하고 읽기 쉬운 페이지 스냅샷을 위해 접근성 트리를 사용합니다.
• Puppeteer 통합: 실제 Puppeteer Page API를 활용하고 AI 에이전트를 위한 헬퍼를 추가합니다.
• 브라우저 연결: CDP (Chrome DevTools Protocol)를 통해 기존 Chrome 인스턴스에 연결할 수 있는 기능.
• MCP 지원: Claude와 같은 도구와 원활하게 통합되는 내장 MCP 서버가 포함되어 있습니다.