vercel-labs/dev3000

해결하는 문제

코딩 에이전트는 앱이 실행될 때 실제로 무슨 일이 일어나는지 이해하는 데 어려움을 겪는 경우가 많습니다. 서버 출력, 브라우저 콘솔 메시지, 네트워크 요청, 사용자 상호 작용이 분산되어 있거나 보이지 않습니다. d3k는 에이전트에게 이러한 이벤트의 단일 공유 타임라인과 제어할 수 있는 관리되는 브라우저를 제공하므로, 에이전트는 별도의 대시보드나 바이너리 없이 프로젝트를 실행하고 문제를 재현하며 증거를 검사할 수 있습니다.

작동 방식

d3k 스킬을 설치합니다(예: pnpm dlx skills add vercel-labs/dev3000 --skill d3k). 스킬은 작은 백그라운드 JavaScript 런타임을 소유합니다. 시작한 후 런타임은 앱의 개발 서버와 Chrome 브라우저를 https://my-app.localhost와 같은 안정적인 로컬 URL로 시작합니다. 에이전트는 browser snapshot, browser click, events와 같은 명령을 실행하여 서버 로그, 콘솔 메시지, 예외, 네트워크 요청 및 상호 작용을 읽을 수 있습니다. 이벤트는 수집 시 할당된 시퀀스 번호를 공유하며 세션과 커서로 쿼리합니다. 타임라인은 최대 5,000개 이벤트 또는 8 MiB를 보유합니다. 로그 파일은 기록되지 않으며 런타임이 종료되면 증거가 사라집니다. 브라우저 프로필과 세션 검색 데이터만 ~/.d3k/<project>/에 유지되며 제어는 네트워크 리스너가 아닌 인증된 로컬 IPC를 사용합니다.

대상 사용자

코딩 에이전트(예: Claude 또는 유사한 도구)를 사용하여 웹 애플리케이션을 디버깅하는 개발자와 팀. Node.js 24+, pnpm, Chrome이 필요합니다. 에이전트가 프로젝트를 실행하고 보고된 문제를 재현하며 수동으로 로그를 수집하지 않고 무슨 일이 있었는지 검사하도록 하려는 경우 특히 유용합니다.

주요 기능

• 에이전트에게 관리되는 브라우저와 서버 및 브라우저 활동의 공유 타임스탬프 타임라인을 제공합니다.
• 전역 바이너리나 터미널 대시보드가 필요 없으며 Node에서 실행되는 작은 JavaScript 런타임만 있으면 됩니다.
• browser snapshot, browser click, events와 같은 명령으로 에이전트가 상태와 기록을 검사할 수 있습니다.
• 소스 또는 오류 수준으로 필터링하고 커서로 이벤트 스트림을 페이지네이션합니다.
• 개인 정보 보호: 요청 헤더/본문은 생략되고 URL 쿼리 값은 편집되며 최소한의 데이터만 유지됩니다.
• CI용 --headless와 브라우저 모니터링이 필요 없을 때 --servers-only를 지원합니다.