LangGraph.js와 WebMCP 기반의 브라우저 사이드패널 에이전트 'Brow'

섹션별 상세

Brow는 LangGraph.js를 브라우저 환경에서 직접 실행하여 에이전트가 실제 페이지 컨텍스트와 밀접하게 상호작용하도록 설계됐다. 백엔드 의존성을 최소화하고 브라우저 런타임에서 직접 도구 사용과 UI 렌더링을 처리한다.

WebMCP 도구를 브라우저에서 발견하고 LangGraph.js 에이전트 흐름에 통합하는 기능을 구현했다. 이를 통해 클릭, 스크롤, 탭 제어 등 브라우저 자동화 작업과 웹사이트별 맞춤형 스킬을 에이전트가 수행한다.

Claude, OpenAI 등 다양한 모델 제공자와 호환되며, 로컬 모델을 위한 커스텀 베이스 URL 설정도 지원한다. 현재 오픈소스 프로젝트로서 커뮤니티의 피드백과 기여를 모집 중이다.

모델 컨텍스트 프로토콜(MCP): — AI 모델이 외부 데이터나 도구와 표준화된 방식으로 상호작용하기 위한 개방형 프로토콜이다. 에이전트가 로컬 또는 원격 서버의 리소스에 접근하고 도구를 실행할 수 있도록 연결 인터페이스를 제공한다.
브라우저 에이전트(Browser Agent): — 웹 브라우저 환경에서 직접 실행되며 페이지 컨텍스트를 이해하고 클릭, 타이핑, 스크롤 등 브라우저 자동화 작업을 수행하는 AI 에이전트이다. 외부 자동화 레이어 없이 브라우저 내부에서 실시간으로 동작한다.
클라이언트 사이드 추론(Client-side Inference): — 서버를 거치지 않고 사용자 기기의 브라우저나 로컬 환경에서 직접 AI 모델을 실행하는 방식이다. 데이터 프라이버시를 보호하고 네트워크 지연 시간을 줄이는 데 유리하다.

LangGraph.js추천

브라우저 클라이언트 사이드 에이전트 오케스트레이션

WebMCP추천

웹사이트 도구 발견 및 에이전트 통합

LangChain중립

에이전트 프레임워크