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 점수