Playwright 기반 Bridge 설계로 WebMCP 도구의 Gemini API 연동 구현

Context

WebMCP 기반의 브라우저 내 도구 실행 환경에서 기존 Model Context Tool Inspector 확장 프로그램이 제공하는 제한된 Gemini 모델셋으로 인한 성능 한계 발생. 강력한 LLM 모델 활용을 위해 브라우저 컨텍스트를 유지하면서 외부 API와 통신할 수 있는 제어 구조 필요.

Technical Solution

• Chrome Extension 개발의 오버헤드를 배제하고 Playwright를 활용한 외부 프로세스 제어 방식 채택
• launchPersistentContext와 channel: 'chrome' 설정을 통해 실험적 기능인 WebMCP 플래그가 활성화된 실제 Chrome 브라우저 세션 확보
• page.evaluate()를 통한 브라우저 내부 navigator.modelContext 접근 및 노출된 Tool 메타데이터 추출
• Gemini API의 Function Calling 요청을 Playwright가 수신하여 브라우저 내 WebMCP 도구로 전달하는 Bridge 아키텍처 설계
• 외부 Node.js 프로세스가 오케스트레이터 역할을 수행하여 LLM-브라우저 간의 요청-응답 루프 구현