Puppeteer Vision MCP 서버

“Puppeteer Vision” MCP 서버란?

Puppeteer Vision MCP 서버는 Puppeteer, Readability, Turndown을 활용하여 AI 어시스턴트가 웹 페이지를 스크랩하고 마크다운 형식으로 변환할 수 있도록 지원합니다. 고급 AI 기반 상호작용을 통해 쿠키 배너, CAPTCHA, 유료벽 등 다양한 웹 요소를 자동으로 처리하므로, 인터랙티브하거나 보호된 사이트에서도 안정적으로 콘텐츠를 추출할 수 있습니다. 이 서버는 Model Context Protocol(MCP)을 통해 해당 기능을 외부에 노출하여 AI 개발 워크플로우에 쉽게 통합할 수 있게 합니다. 이를 통해 자동 웹 스크래핑, 콘텐츠 요약, 데이터 수집 등의 작업을 LLM이 손쉽게 수행할 수 있습니다. npx로 간단하게 배포할 수 있으며, 최소한의 설정만 필요하고, 유연한 통합을 위해 stdio 및 SSE 통신을 모두 지원합니다.

프롬프트 목록

레포지토리나 문서에 프롬프트 템플릿은 언급되어 있지 않습니다.

비즈니스 성장 준비가 되셨나요?

오늘 무료 평가판을 시작하고 며칠 내로 결과를 확인하세요.

데모 요청 로그인

리소스 목록

레포지토리나 문서에 별도의 MCP 리소스가 명시되거나 설명되어 있지 않습니다.

도구 목록

• scrape-webpage: 지정한 URL의 웹 페이지를 스크랩하며, AI가 쿠키 배너나 CAPTCHA와 같은 인터랙티브 요소를 자동으로 처리 및 우회합니다. Readability로 주요 콘텐츠를 추출하고, 이를 마크다운으로 변환합니다. 주요 파라미터는 다음과 같습니다:
  • url (string, 필수): 스크랩할 웹 페이지의 주소
  • autoInteract (boolean, 선택, 기본값: true): 인터랙티브 요소 자동 처리 여부
  • maxInteractionAttempts (number, 선택, 기본값: 3): AI 상호작용 최대 시도 횟수
  • waitForNetworkIdle (boolean, 선택, 기본값: true): 스크랩 전 네트워크 유휴 상태 대기 여부

뉴스레터 가입

최신 팁, 트렌드 및 특가 정보를 무료로 받아보세요.

이메일 주소

구독

MCP 서버 활용 사례

• 지식 수집을 위한 자동 웹 스크래핑
  개발자는 임의의 웹 페이지에서 읽기 쉽고 잘 정돈된 마크다운을 추출하여 최신 콘텐츠를 AI 워크플로우, 데이터베이스, 지식 베이스 등에 쉽게 수집할 수 있습니다.
• 인터랙티브 장벽 우회
  AI 기반 상호작용으로 CAPTCHA, 쿠키 배너 등 자동화 차단 장벽을 자동으로 우회하여, 일반적으로 자동화 접근이 어려운 사이트에서도 콘텐츠를 추출할 수 있습니다.
• 요약 및 콘텐츠 분석
  추출된 마크다운은 LLM에 입력하여 요약, 감정 분석, 분류 등에 활용할 수 있으므로, 연구 및 데이터 처리 워크플로우를 간소화합니다.
• 실시간 브라우저 자동화
  디버깅, 데모, 브라우저 동작의 시각적 확인이 필요한 경우 눈에 보이는(비헤드리스) 모드로 도구를 실행할 수 있습니다.
• LLM 오케스트레이션 파이프라인 통합
  MCP 서버로서 Windsurf, Claude, Cursor, Cline 등 오케스트레이터에 컴포넌트로 추가하여 AI 에이전트가 실시간 웹과 상호작용할 수 있게 확장할 수 있습니다.

설치 방법

Windsurf

1. 사전 준비: Node.js와 npm을 설치하세요.

2. 환경 설정: .env 파일을 생성하거나 OPENAI_API_KEY 등 환경 변수를 export 하세요.

3. 설정 파일 수정: Windsurf의 설정 파일을 찾으세요.

4. Puppeteer Vision MCP 추가: 아래와 같은 JSON 스니펫을 삽입하세요:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. 저장 및 재시작: 파일을 저장하고 Windsurf를 재시작하세요.

6. 확인: 로그 또는 UI에서 MCP 서버가 정상적으로 실행 중인지 확인하세요.

API 키 보안:
비밀 값은 환경 변수(예: .env)에 저장하세요:

"env": {
  "OPENAI_API_KEY": "${OPENAI_API_KEY}"
}

Claude

1. 사전 준비: Node.js와 npm이 설치되어 있는지 확인하세요.

2. 환경 설정: .env를 준비하거나 OPENAI_API_KEY 등 환경 변수를 export 하세요.

3. 설정 파일 수정: Claude의 MCP 설정을 여세요.

4. MCP 서버 추가:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Claude 재시작: 변경 사항을 저장하고 플랫폼을 재시작하세요.

6. 확인: 정상적으로 시작되었는지 확인하세요.

Cursor

1. 사전 준비: Node.js와 npm을 설치하세요.

2. 환경 설정: .env에 OpenAI API 키를 설정하세요.

3. Cursor 설정 수정: MCP 서버를 아래와 같이 추가하세요:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. 저장 및 재시작: 변경 내용을 저장하고 Cursor를 재시작하세요.

5. 로그 확인: 서버가 정상적으로 실행되는지 확인하세요.

Cline

1. 사전 준비: Node.js와 npm을 설치하세요.

2. 환경 설정: OPENAI_API_KEY를 export 하거나 설정하세요.

3. 설정 파일 수정: Cline의 MCP 설정에 다음을 추가하세요:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Cline 재시작: 적용하고 재시작하세요.

5. 확인: 서버가 접근 가능한지 검증하세요.

참고: API 키는 반드시 환경 변수로 관리하고, 설정 파일에 직접 입력하지 마세요.

플로우에서 MCP 사용 방법

FlowHunt에서 MCP 사용하기

FlowHunt 워크플로우에 MCP 서버를 통합하려면, 플로우에 MCP 컴포넌트를 추가하고 AI 에이전트와 연결하세요:

MCP 컴포넌트를 클릭하여 설정 패널을 여세요. 시스템 MCP 구성 섹션에서 다음과 같은 JSON 형식으로 MCP 서버 정보를 입력합니다:

{
  "puppeteer-vision": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

설정이 완료되면 AI 에이전트가 해당 MCP를 도구로 활용하며 모든 기능을 사용할 수 있습니다. “puppeteer-vision"을 실제 MCP 서버명으로, URL을 본인의 MCP 서버 URL로 변경하는 것을 잊지 마세요.

개요

| Roots 지원 | ⛔ | Roots 언급 없음. |

위 내용을 바탕으로, Puppeteer Vision MCP 서버는 강력한 문서화와 보안 안내가 포함된 신뢰성 높은 웹 스크래핑 도구를 제공하지만, 여러 도구, 프롬프트 템플릿, 리소스, roots/샘플링 등 고급 MCP 기능은 부족합니다. 단일 목적·단일 도구 설계로 해당 분야에서는 매우 신뢰할 수 있으나, 확장성은 제한적입니다.

의견

MCP 점수: 5/10
이 MCP 서버는 문서가 잘 정리되어 있고, 특정 목적에 유용하며, 설치가 간편합니다. 하지만 프롬프트 템플릿, 명시적 리소스, roots나 샘플링 같은 고급 MCP 기능이 없어 활용성과 생태계 통합 측면에서는 한계가 있습니다.

MCP 점수