Skip to content

Latest commit

 

History

History
122 lines (81 loc) · 4.94 KB

README_KR.md

File metadata and controls

122 lines (81 loc) · 4.94 KB

Blowback

Vite MCP Server에서 Blowback로 이름이 변경되었습니다.

Blowback은 Vite 이외의 다양한 FE 개발 환경을 지원하기 위해 만들어졌습니다.

FE 개발 서버를 Cursor와 통합하는 Model Context Protocol(MCP) 서버입니다.

주요 기능

  • 로컬 개발 서버와 MCP 서버 통합
  • 브라우저 콘솔 로그 캡처 및 MCP를 통한 전송
  • 체크포인트 기반 로그 관리

설치

Cursor의 MCP 설정에 서버를 추가합니다:

{
  "blowback": {
    "command": "npx",
    "args": ["-y", "blowback-context"]
  }
}

Resources

console-logs

브라우저 콘솔 로그를 조회하는 리소스입니다.

현재 Cursor에서는 리소스를 지원되지 않으므로 get-console-logs tool을 사용하면 됩니다.

추후 개발 예정입니다.

screenshot

스크린샷을 캡처하고 관리하는 리소스입니다.

다른 리소스와 마찬가지로 현재 Cursor에서는 직접 지원되지 않으므로 capture-screenshot 도구를 사용하세요.

Tools

HMR 도구

도구 이름 설명
get-hmr-events 최근 HMR 이벤트를 가져옵니다
check-hmr-status HMR 상태를 확인합니다

참고: HMR 연결은 필수가 아닌 선택적입니다. 브라우저가 시작되면 자동으로 HMR 이벤트 모니터링이 시작됩니다.

브라우저 도구

도구 이름 설명
start-browser 브라우저 인스턴스를 시작하고 Vite 개발 서버로 이동합니다. HMR 모니터링이 자동으로 시작됩니다
capture-screenshot 현재 페이지 또는 특정 요소의 스크린샷을 캡처합니다. 스크린샷은 디스크에 저장됩니다. MCP 클라이언트의 한계로 인해 저장된 스크린샷 이미지를 직접 편집 도구에 전달해야 할 수 있습니다
get-element-properties 특정 요소의 속성 및 상태 정보를 가져옵니다
get-element-styles 특정 요소의 스타일 정보를 가져옵니다
get-element-dimensions 특정 요소의 치수 및 위치 정보를 가져옵니다
monitor-network 지정된 시간 동안 브라우저의 네트워크 요청을 모니터링합니다
get-element-html 특정 요소와 그 자식 요소의 HTML 내용을 가져옵니다
get-console-logs 브라우저 세션에서 콘솔 로그를 가져오며, 선택적으로 필터링이 가능합니다
execute-browser-commands 미리 정의된 브라우저 명령을 안전하게 실행합니다

도움말 도구

도구 이름 설명
how-to-use 서버의 특정 기능 사용법에 대한 설명을 제공합니다

로그 관리 시스템

  • 브라우저의 console log를 캡쳐하여 파일에 저장하고 조회합니다
  • 체크포인트 로그는 체크포인트가 활성화 된 경우에만 저장됩니다

체크포인트 시스템

체크포인트 동작 방식

  • 체크포인트는 특정 버전의 스냅샷, 로그, 스크린샷 등을 관리할 때 사용됩니다
  • head에 <meta name="__mcp_checkpoint" data-id="">를 삽입하면 data-id 속성을 식별자로 하여 데이터를 별도로 기록합니다

아키텍처 및 데이터 흐름

핵심 구성 요소

  1. MCP 서버: Cursor에 도구를 제공하는 Model Context Protocol SDK 기반의 중앙 모듈입니다.

  2. 브라우저 자동화: Puppeteer를 사용하여 Chrome을 제어하고 변경 사항을 시각적으로 검사할 수 있게 합니다.

  3. 체크포인트 시스템: 비교 및 테스트를 위해 브라우저 상태의 스냅샷을 유지합니다.

데이터 소스 및 상태 관리

서버는 여러 중요한 데이터 저장소를 유지합니다:

  • HMR 이벤트 기록: Vite에서 발생한 최근 HMR 이벤트(업데이트, 오류)를 추적합니다.
  • 콘솔 메시지 로그: 디버깅을 위한 브라우저 콘솔 출력을 캡처합니다.
  • 체크포인트 저장소: DOM 스냅샷을 포함한 브라우저 상태의 이름이 지정된 스냅샷을 저장합니다.

통신 흐름

  1. MCP Client → 개발 서버:

    • MCP Client가 소스 코드를 변경하고 개발 서버가 변경을 감지합니다
    • 개발 서버가 자동으로 브라우저를 업데이트하거나 HMR 이벤트를 발생시킵니다

  2. 웹 브라우저 → MCP Server:

    • HMR 이벤트와 콘솔 로그가 Puppeteer를 통해 캡처됩니다
    • MCP 서버가 브라우저의 현재 상태를 쿼리하거나 스크린샷을 캡처합니다

  3. MCP Server → MCP Client:

    • 서버가 HMR 이벤트를 구조화된 응답으로 변환합니다
    • MCP Client가 HMR 상태를 쿼리하고 스크린샷을 캡처하는 등의 도구를 제공합니다

상태 유지

서버는 다음에 대한 참조 객체를 유지합니다:

  • 현재 브라우저 및 페이지 인스턴스
  • 최근 HMR 이벤트