Live Preview MCP Server

버전 1.1 (레드팀 강화 후) — 프로덕션급 Model Context Protocol 서버로서, MCP 지원 AI 어시스턴트가 라이브 애플리케이션 미리보기를 iframe으로 시작, 관리, 삽입할 수 있게 합니다.

보안 강화 (v1.1)

• 셸 인젝션 없음: Docker 및 프로세스 생성은 항상 인자 배열을 사용합니다 (shell: false).

• 안전한 환경: 명시적 허용 목록에 있는 환경 변수만 전달되며, 위험한 키 (NODE_OPTIONS, LD_PRELOAD 등)는 제거됩니다.

• 심볼릭 링크 안전 경로 검사: 허용 목록 검증 전에 realpathSync를 사용합니다.

• WebSocket 속도 제한 + 미리보기별 연결 상한.

• 프로세스 생존 상태 준비성: 준비성 프로브가 자식 프로세스가 여전히 살아 있는지도 확인합니다.

• 동시 미리보기 제한 (기본 10개).

• Docker: CapDrop: ALL, no-new-privileges, 가능한 경우 비루트 사용자, AutoRemove + 시작 시 고아 프로세스 정리.

• 강화된 로그 마스킹 (JWT, AWS 키, GitHub/Slack/OpenAI 토큰 등).

• 토큰 길이 증가는 32바이트 무작위 값으로.

Related MCP server: Runbox Website Builder MCP

기능

• MCP 도구: start_preview, stop_preview, get_preview_status, get_preview_logs, list_previews, reload_preview, update_preview_config, share_preview, get_mobile_qr, set_auth_token

• 프레임워크 자동 감지: Vite, Next.js, CRA, Vue, Angular, Express, static, Expo, Flutter

• HTTP 대시보드 + 프레이밍 헤더가 제거된 리버스 프록시

• 선택적 Docker, Cloudflare/ngrok 터널, 모바일 QR, 토큰 인증, Cloud-IDE 인식

요구 사항

• Node.js ≥ 18

• 선택 사항: Docker, cloudflared, ngrok

설치 및 빌드

cd live-preview-mcp
npm install
npm run build

실행

node dist/index.js

MCP 클라이언트 구성

{
  "mcpServers": {
    "live-preview": {
      "command": "node",
      "args": ["/absolute/path/to/live-preview-mcp/dist/index.js"],
      "env": {
        "PORT": "9000",
        "ALLOWED_DIRS": "/path/to/projects"
      }
    }
  }
}

라이선스

MIT