WebBridge: 아무 웹사이트나 녹화해서 MCP 도구로 변환 — 코드 없이 10분

WebBridge: 아무 웹사이트나 MCP 도구로 변환 — 코드 작성 없이, 사이트 협조 없이

• 브라우저에서 웹사이트를 쓰는 걸 녹화하면, 그 API 트래픽을 분석해서 MCP 서버를 자동 생성해주는 Chrome 확장 프로그램임. 코드를 한 줄도 안 쓰고, 사이트 측의 협조 없이, 별도 데스크톱 앱 없이 동작함
• 작동 흐름: Record(확장 프로그램에서 녹화) → Generate(Claude가 트래픽 읽고 MCP 서버 작성) → Test(의존성 설치 + 스모크 테스트) → Install(Claude Desktop 설정에 머지). 녹화부터 작동하는 도구까지 약 10분

sequenceDiagram
    participant 사용자 as 사용자
    participant 확장 as Chrome 확장
    participant Claude as Claude
    participant MCP as MCP 서버
    사용자->>확장: Record 클릭 + 웹사이트 사용
    확장->>확장: API 트래픽 캡처 (DevTools Protocol)
    사용자->>확장: Stop 클릭
    사용자->>Claude: webbridge_read_recordings 호출
    Claude->>Claude: 트래픽 분석 + MCP 서버 코드 생성
    Claude->>MCP: webbridge_write_server (3가지 정적 검증 포함)
    Claude->>MCP: webbridge_test (스모크 테스트)
    Claude->>사용자: webbridge_install (설정 머지)

실제 사용 사례

• 도서관 통합 검색: 캐나다 요크 지역 9개 공공 도서관의 BiblioCommons 카탈로그를 한 번에 검색하는 MCP 도구를 만든 사례. 한 번의 검색 녹화만으로 생성했고, 코드 수동 작성 없이 10분 안에 완료
• 프라이버시/컴플라이언스 감사: Full Dump 모드로 모든 네트워크 요청을 필터링 없이 캡처 → Claude가 구조화된 프라이버시 리포트 생성. 어떤 서드파티 도메인에 접속하는지, 분석/광고 서비스에 무슨 데이터가 가는지, 검색어나 PII가 서드파티로 새는지 등을 분석. 법적 컴플라이언스 팀이 "앱이 실제로 하는 것 vs 문서에서 말하는 것"을 대조할 수 있음

기술적 디테일

• 인증 전략이 4가지: cookie(쿠키 읽기), in_context_fetch(인증된 탭에서 fetch 실행, CSRF 토큰/JS 설정 헤더 대응), bearer(OAuth), apikey. 녹화 중 자동 감지되고 사이트별 오버라이드 가능
• 코드 생성 후 자동으로 3가지 정적 검증: ESM 문법, 잘못된 브리지 패턴, 저수준 MCP API 사용 여부 체크. 실패 시 Claude가 즉시 재생성
• HAR 파일 임포트도 지원해서 Chrome DevTools, Firefox, Safari, Fiddler에서 이미 뽑아놓은 HAR을 변환 가능
• 생성된 MCP 서버는 표준 JSON-RPC over stdio라서 Claude Desktop뿐 아니라 Cursor, VS Code(Copilot), Windsurf, Cline 등 어떤 MCP 클라이언트에서든 작동

• 라이선스는 AGPL-3.0 + Commons Clause라서 수정/배포는 가능하지만, 상업적 판매는 별도 허가 필요