cloudflare-browser-rendering-mcp

Cloudflare 브라우저 렌더링 MCP 서버

이 MCP(모델 컨텍스트 프로토콜) 서버는 LLM에서 컨텍스트로 사용할 웹 콘텐츠를 Cloudflare 브라우저 렌더링을 사용하여 가져오고 처리하는 도구를 제공합니다. Claude 및 Cline 클라이언트 환경 모두에서 작동하도록 설계되었습니다.

특징

• 웹 콘텐츠 가져오기 : LLM 컨텍스트에 대한 웹 페이지 가져오기 및 처리
• 문서 검색 : Cloudflare 문서를 검색하고 관련 콘텐츠를 반환합니다.
• 구조화된 콘텐츠 추출 : CSS 선택기를 사용하여 웹 페이지에서 구조화된 콘텐츠 추출
• 콘텐츠 요약 : 보다 간결한 LLM 컨텍스트를 위해 웹 콘텐츠를 요약합니다.
• 스크린샷 캡처 : 웹 페이지의 스크린샷을 찍습니다

필수 조건

• Node.js v18 이상
• 브라우저 렌더링 API 액세스가 가능한 Cloudflare 계정
• 제공된 puppeteer-worker.js 파일을 사용하여 배포된 Cloudflare Worker

설치

Smithery를 통해 설치

Smithery를 통해 Claude Desktop에 Cloudflare Browser Rendering을 자동으로 설치하려면 다음을 수행합니다.

지엑스피1

1. 이 저장소를 복제하세요:
   git clone https://github.com/yourusername/cloudflare-browser-rendering.git cd cloudflare-browser-rendering
2. 종속성 설치:
   npm install
3. 프로젝트를 빌드하세요:
   npm run build

Cloudflare Worker 설정

1. Wrangler를 사용하여 Cloudflare Workers에 puppeteer-worker.js 파일을 배포합니다.
   npx wrangler deploy
2. Cloudflare Worker에서 다음 바인딩을 구성해야 합니다.
   • 브라우저 렌더링 바인딩은 browser 라는 이름으로 지정됩니다.
   • KV 네임스페이스 바인딩이 SCREENSHOTS 로 명명됨
3. 배포된 작업자의 URL을 기록해 두세요(예: https://browser-rendering-api.yourusername.workers.dev )

구성

클로드 데스크탑용

1. Claude Desktop 구성 파일을 엽니다.
   # macOS code ~/Library/Application\ Support/Claude/claude_desktop_config.json # Windows code %APPDATA%\Claude\claude_desktop_config.json
2. MCP 서버 구성을 추가합니다.
   { "mcpServers": { "cloudflare-browser-rendering": { "command": "node", "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"], "env": { "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev" }, "disabled": false, "autoApprove": [] } } }
3. Claude Desktop을 다시 시작하세요

클라인을 위해

1. Cline MCP 설정 파일을 엽니다.
   # macOS code ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json # Windows code %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
2. MCP 서버 구성을 추가합니다.
   { "mcpServers": { "cloudflare-browser-rendering": { "command": "node", "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"], "env": { "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev" }, "disabled": false, "autoApprove": [] } } }

용법

MCP 서버를 구성하면 Claude Desktop과 Cline 모두에서 사용할 수 있습니다. 다음 도구를 사용할 수 있습니다.

페치_페이지

LLM 컨텍스트에 대한 웹 페이지를 가져와서 처리합니다.

매개변수:

• url (필수): 가져올 URL
• maxContentLength (선택 사항): 반환할 최대 콘텐츠 길이

예:

검색_문서

Cloudflare 문서를 검색하여 관련 콘텐츠를 반환합니다.

매개변수:

• query (필수): 검색어
• maxResults (선택 사항): 반환할 최대 결과 수

예:

구조화된 콘텐츠 추출

CSS 선택기를 사용하여 웹 페이지에서 구조화된 콘텐츠를 추출합니다.

매개변수:

• url (필수): 콘텐츠를 추출할 URL
• selectors (필수): 콘텐츠를 추출하는 CSS 선택자

예:

요약_내용

보다 간결한 LLM 맥락을 위해 웹 콘텐츠를 요약합니다.

매개변수:

• url (필수): 요약할 URL
• maxLength (선택 사항): 요약의 최대 길이

예:

스크린샷 찍기

웹 페이지의 스크린샷을 찍습니다.

매개변수:

• url (필수): 스크린샷을 찍을 URL
• width (선택 사항): 픽셀 단위의 뷰포트 너비(기본값: 1280)
• height (선택 사항): 픽셀 단위의 뷰포트 높이(기본값: 800)
• fullPage (선택 사항): 전체 페이지의 스크린샷을 찍을지 아니면 뷰포트만 찍을지(기본값: false)

예:

문제 해결

벌채 반출

MCP 서버는 다음 접두사를 사용하여 포괄적인 로깅을 사용합니다.

• [Setup] : 초기화 및 설정
• [API] : API 요청 및 응답
• [Error] : 오류 처리 및 디버깅

로그를 보려면:

• Claude Desktop : ~/Library/Logs/Claude/mcp*.log (macOS) 또는 %APPDATA%\Claude\Logs\mcp*.log (Windows)에서 로그를 확인하세요.
• Cline : 로그가 VSCode 확장 프로그램의 출력 콘솔에 나타납니다.

일반적인 문제

1. "BROWSER_RENDERING_API 환경 변수가 설정되지 않았습니다"
   • MCP 서버 구성에서 Cloudflare Worker에 올바른 URL을 설정했는지 확인하세요.
2. "Cloudflare Worker API를 사용할 수 없거나 구성되지 않았습니다."
   • Cloudflare Worker가 배포되어 실행 중인지 확인하세요.
   • URL이 올바르고 접근 가능한지 확인하세요
3. "브라우저 바인딩을 사용할 수 없습니다"
   • Cloudflare Worker에서 브라우저 렌더링 바인딩을 구성했는지 확인하세요.
4. "스크린샷 KV 바인딩을 사용할 수 없습니다"
   • Cloudflare Worker에서 KV 네임스페이스 바인딩을 구성했는지 확인하세요.

개발

프로젝트 구조

• src/index.ts : 메인 진입점
• src/server.ts : MCP 서버 구현
• src/browser-client.ts : Cloudflare 브라우저 렌더링과 상호 작용하기 위한 클라이언트
• src/content-processor.ts : LLM 컨텍스트에 대한 웹 콘텐츠를 처리합니다.
• puppeteer-worker.js : Cloudflare Worker 구현

건물

테스트

이 프로젝트에는 모든 MCP 도구가 올바르게 작동하는지 확인하는 포괄적인 테스트 스크립트가 포함되어 있습니다.

이렇게 하면:

1. MCP 서버를 시작합니다
2. 샘플 요청으로 각 도구를 테스트하세요
3. 응답을 확인하세요
4. 테스트 결과 요약을 제공하세요

특정 구성 요소에 대해 개별 테스트를 실행할 수도 있습니다.

테스트가 제대로 작동하려면 다음 사항이 있는지 확인하세요.

1. npm run build 로 프로젝트를 빌드했습니다.
2. BROWSER_RENDERING_API 환경 변수를 Cloudflare Worker URL로 설정하세요.
3. 필요한 바인딩으로 Cloudflare Worker를 배포했습니다.

특허

MIT