평소에는 GN 가끔 읽어보기만 하다가 투고는 처음이네요. 잘 부탁드립니다!


옴니모달이라는 불확실한 현존 Web Surf agent 대신, CDP로 받은 DOM을 LLM이 이해할 수 있도록 최소한으로 포매팅, 압축해서 MCP로 만들면 어떠할까? 라는 아이디어에서 출발해 만들어 본 라이브러리입니다.

만든 이유

  • 스크린샷 기반 웹 에이전트는 비전 모델이 필요하고 토큰 소모가 극심합니다.
  • 기존 DOM 직렬화는 CSS 클래스, 래퍼 div, 스크립트까지 다 포함해서 한 페이지에 5만~10만 토큰이 나옵니다.
  • 에이전트한테 필요한 건 버튼, 링크, 입력, 텍스트뿐인데 그걸 위해 컨텍스트 윈도우를 통째로 쓰는 건 비효율적입니다.

작동 방식

  • CDP를 통해 Chrome 인스턴스에 연결한 후, DOM 내 최소한 구분에 필요한 요소를 제외하고는 전부 걷어냅니다.
  • 이후, 각 요소에 짧은 ID를 붙이고, Agent에게 해당 내용을 전달합니다.
  • 에이전트로부터의 인터렉티브 요소에 대해 click("B1"), type("I1", "검색어") 와 같은 상호작용도 지원합니다!

벤치마크

  • GitHub: 84,357 -> 2,593 토큰 (32x)
  • Wikipedia: 123,615 -> 12,097 토큰 (10x)
  • MDN: 24,923 -> 1,793 토큰 (14x)
  • HN: 8,736 -> 1,038 토큰 (8.4x)
  • 평균 93% 토큰 절감, 파싱 시간 약 30ms

페이퍼 스펙

  • TypeScript 기반, 런타임으로는 Bun Native이나 Node 18+ 또한 지원
  • chrome-remote-interface Runtime 의존
  • ElysiaJS 기반 백엔드

링크


개인적 디버깅용으로 제작해서 사용해 보다가 의외로 쓸만하길래 OSS화 해서 배포해 보게 되었습니다. 한 번 사용해 보시고 피드백 많이 부탁드려요!