Cloudflare 브라우저 렌더링 실험 및 MCP 서버

이 프로젝트는 Cloudflare Browser Rendering을 사용하여 LLM 컨텍스트에 대한 웹 콘텐츠를 추출하는 방법을 보여줍니다. REST API 및 Workers Binding API를 활용한 실험과 LLM에 웹 컨텍스트를 제공하는 데 사용할 수 있는 MCP 서버 구현이 포함됩니다.

프로젝트 구조

지엑스피1

Related MCP server: Fetch MCP Server

필수 조건

Node.js(v16 이상)
브라우저 렌더링이 활성화된 Cloudflare 계정
타입스크립트
Wrangler CLI(Worker 배포용)

설치

저장소를 복제합니다.

git clone https://github.com/yourusername/cloudflare-browser-rendering.git cd cloudflare-browser-rendering

종속성 설치:

npm install

Cloudflare Worker 설정

Cloudflare Puppeteer 패키지를 설치하세요:

npm install @cloudflare/puppeteer

Wrangler 구성:

# wrangler.toml name = "browser-rendering-api" main = "puppeteer-worker.js" compatibility_date = "2023-10-30" compatibility_flags = ["nodejs_compat"] [browser] binding = "browser"

작업자 배치:

npx wrangler deploy

작업자 테스트:

node test-puppeteer.js

실험 실행

기본 REST API 실험

이 실험은 Cloudflare Browser Rendering REST API를 사용하여 웹 콘텐츠를 가져오고 처리하는 방법을 보여줍니다.

npm run experiment:rest

퍼펫티어 바인딩 API 실험

이 실험은 Puppeteer와 함께 Cloudflare Browser Rendering Workers Binding API를 사용하여 더욱 고급 브라우저 자동화를 구현하는 방법을 보여줍니다.

npm run experiment:puppeteer

콘텐츠 추출 실험

이 실험은 LLM의 컨텍스트로 사용하기 위해 웹 콘텐츠를 추출하고 처리하는 방법을 보여줍니다.

npm run experiment:content

MCP 서버

MCP 서버는 LLM의 컨텍스트로 사용하기 위해 Cloudflare Browser Rendering을 사용하여 웹 콘텐츠를 가져오고 처리하는 도구를 제공합니다.

MCP 서버 구축

npm run build

MCP 서버 실행

npm start

또는 개발을 위해:

npm run dev

MCP 서버 도구

MCP 서버는 다음과 같은 도구를 제공합니다.

fetch_page - LLM 컨텍스트에 대한 웹 페이지를 가져와 처리합니다.
search_documentation - Cloudflare 문서를 검색하여 관련 콘텐츠를 반환합니다.
extract_structured_content - CSS 선택기를 사용하여 웹 페이지에서 구조화된 콘텐츠를 추출합니다.
summarize_content - 보다 간결한 LLM 컨텍스트를 위해 웹 콘텐츠를 요약합니다.

구성

Cloudflare 브라우저 렌더링 엔드포인트를 사용하려면 BROWSER_RENDERING_API 환경 변수를 설정하세요.

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

YOUR_WORKER_URL_HERE 배포된 Cloudflare Worker의 URL로 바꾸세요. 여러 파일에서 이 자리 표시자를 바꿔야 합니다.

테스트 파일: test-puppeteer.js , examples/debugging-tools/debug-test.js , examples/testing/content-test.js
MCP 서버 구성: cline_mcp_settings.json.example
브라우저 클라이언트에서: src/browser-client.ts (환경 변수가 설정되지 않은 경우 대체용으로)

Cline과 통합

MCP 서버를 Cline과 통합하려면 cline_mcp_settings.json.example 파일을 적절한 위치에 복사하세요.

cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

또는 기존 cline_mcp_settings.json 파일에 구성을 추가합니다.

주요 학습 내용

Cloudflare 브라우저 렌더링에는 브라우저 바인딩과 상호 작용하기 위해 @cloudflare/puppeteer 패키지가 필요합니다.
브라우저 바인딩을 사용하는 올바른 패턴은 다음과 같습니다.
import puppeteer from '@cloudflare/puppeteer'; // Then in your handler: const browser = await puppeteer.launch(env.browser); const page = await browser.newPage();
브라우저 렌더링 바인딩을 사용하는 Worker를 배포하는 경우 nodejs_compat 호환성 플래그를 활성화해야 합니다.
리소스 누수를 방지하려면 사용 후에는 항상 브라우저를 닫으세요.