평소에는 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 기반 백엔드
링크
- GitHub: https://github.com/TideSurf/core
- npm: https://www.npmjs.com/package/@tidesurf/core
- 문서/데모: https://tidesurf.org
개인적 디버깅용으로 제작해서 사용해 보다가 의외로 쓸만하길래 OSS화 해서 배포해 보게 되었습니다. 한 번 사용해 보시고 피드백 많이 부탁드려요!