LangGraph.js가 브라우저에서 직접 실행되면 어떤 일이 벌어질까?

예전에는 주로 LangChain/LangGraph의 파이썬 환경에서 작업했습니다.

그러다 WebMCP를 탐색하면서 브라우저에서 직접 LangGraph.js를 실험하기 시작했고, WebMCP 도구를 LangGraph.js 에이전트 흐름에 연결하면 어떤 모습일지 궁금해졌습니다.

그 과정이 서서히 발전해 실제 브라우저 세션에서 실행되는 오픈소스 크롬 사이드 패널 에이전트인 'Brow'가 되었습니다.

목표는 백엔드나 외부 자동화 레이어에만 의존하지 않고, 페이지와 가까운 클라이언트 사이드에서 실행되는 에이전트를 어디까지 발전시킬 수 있는지 확인하는 것이었습니다.

Brow는 현재 다음 기능을 지원합니다:

• work with both closed frontier models and local/open-source models, using Claude/OpenAI providers or OpenAI-compatible endpoints with custom base URLs
• chat with an agent directly in the Chrome side panel
• run the agent flow client-side in the browser using LangGraph.js
• use the current page and browser context
• discover WebMCP tools exposed by websites
• wire WebMCP tools into the LangGraph.js agent flow
• connect to remote MCP servers
• render MCP Apps directly inside the chat
• use browser automation tools like click, type, scroll, tabs, screenshots, etc.
• record workflows and show them to Brow as reusable context
• use reusable skills to help the agent adapt to specific tasks and websites

이런 프로젝트에서 LangGraph.js를 브라우저에서 직접 사용하는 것은 흥미롭습니다. 페이지 컨텍스트, 브라우저 도구, WebMCP 도구, MCP 서버, UI 렌더링 등을 모두 확장 프로그램 런타임에서 연결할 수 있어 에이전트가 실제 페이지와 훨씬 더 밀접하게 상호작용할 수 있기 때문입니다.

아직 실험적이고 불완전하며, 한창 개발 중인 프로젝트입니다.

퇴근 후 가족과 보내는 시간을 제외한 조용한 시간에, 피곤하지만 호기심 어린 마음으로 커밋 하나씩 쌓아가며 만든 사이드 프로젝트로 시작했습니다.

영상에 대한 작은 참고 사항입니다. 일부 구간이 다소 빠르게 진행되니 필요하면 일시 정지해 주세요. 영상 편집은 제 전문 분야가 아니라서, 현재 프로젝트 상태를 최대한 명확하게 보여드리고 싶었습니다.

LangChain이나 LangGraph를 사용하시는 분들, 특히 브라우저 에이전트, 클라이언트 사이드 에이전트 오케스트레이션, WebMCP/MCP 통합, 그리고 이로 인해 열릴 수 있는 사용 사례에 대해 피드백을 주시면 감사하겠습니다.

이 방향에 관심 있는 분들의 기여를 환영합니다. 이 프로젝트의 잠재력을 알아보고 단순한 개인 사이드 프로젝트를 넘어 더 큰 무언가로 발전시키고 싶어 하는 열정적인 분들을 찾고 있습니다.