Cloudflare Playwright MCP

Cloudflare Playwright MCP 예제

개요

이 프로젝트에서는 Cloudflare Playwright MCP를 사용하여 Cloudflare Workers와 함께 Playwright를 MCP(모델 제어 프로토콜) 서버로 사용하는 방법을 보여줍니다.

AI 도우미가 도구 세트를 통해 브라우저를 제어하여 탐색, 입력, 클릭, 스크린샷 찍기 등의 웹 자동화 작업을 수행할 수 있습니다.

이 서버는 Cloudflare AI Playground, Claude Desktop, VS Code의 GitHub Copilot 등 다양한 AI 플랫폼과 함께 사용할 수 있습니다.

배포

프로젝트를 설정하고 배포하려면 다음 단계를 따르세요.

1. 종속성 설치:

지엑스피1

2. Cloudflare Workers에 배포:

Cloudflare AI Playground와 함께 사용

Cloudflare Playground AI는 Workers AI에서 제공하는 LLM 모델을 사용하여 MCP 서버를 테스트하는 좋은 방법입니다.

• https://playground.ai.cloudflare.com/ 으로 이동합니다.
• 모델이 llama-3.3-70b-instruct-fp8-fast 로 설정되어 있는지 확인하세요.
• MCP 서버 에서 URL을 https://[my-mcp-url].workers.dev/sse 로 설정합니다.
• 연결을 클릭하세요
• 상태가 연결됨 으로 업데이트되어야 하며 사용 가능한 도구 14개가 나열되어야 합니다.

이제 모델과 상호 작용을 시작할 수 있으며, 요청된 작업을 완료하는 데 필요한 도구가 실행됩니다.

[!TIP] 최상의 결과를 얻으려면 "새 할 일 항목 만들기", "Cloudflare 사이트로 이동", "스크린샷 찍기"와 같이 단일 작업으로 구성된 간단한 지침을 제공하세요.

대화의 예:

역할	메시지
사용자	demo.playwright.dev/todomvc로 이동하세요
어시스턴트	브라우저 탐색 도구를 실행합니다 . 페이지가 https://demo.playwright.dev/todomvc/ 로 이동했습니다. 페이지 제목은 "React • TodoMVC"입니다. 페이지 스냅샷은 제목, 텍스트 상자, 여러 링크를 포함한 페이지 내용을 보여줍니다.
사용자	할 일 항목 만들기
어시스턴트	브라우저 유형 도구를 실행합니다. 새로운 할 일 항목 "식료품 구매"가 생성되었습니다. 페이지 스냅샷은 새로운 할 일 항목을 포함하여 페이지의 업데이트된 내용을 보여줍니다.
사용자	좋아요. 이제 앵무새 스타일로 할 일을 만들어 보세요.
어시스턴트	브라우저 유형 도구를 실행합니다. 새 할 일 항목 "폴리가 크래커를 원해"가 앵무새 스타일로 생성되었습니다. 페이지 스냅샷은 새 할 일 항목을 포함하여 페이지의 업데이트된 콘텐츠를 보여줍니다.
사용자	그리고 요다 스타일로 또 다른 할 일을 만들어 보세요
어시스턴트	브라우저 유형 도구를 실행합니다. 새로운 할 일 항목 "산책, 꼭 해야 해"가 요다 스타일로 생성되었습니다. 페이지 스냅샷은 새로운 할 일 항목을 포함하여 페이지의 업데이트된 내용을 보여줍니다.
사용자	스크린샷을 찍다
어시스턴트	브라우저_스크린샷_테이크 도구를 실행합니다 현재 페이지의 스크린샷이 촬영되었습니다. PNG 형식이며 크기는 56KB입니다.
사용자	이제 앵무새 할 일 항목의 체크박스를 클릭하세요.
어시스턴트	browser_clickt 도구를 실행합니다 . 앵무새 할 일 항목 "Polly wants a cracker"의 체크박스가 클릭되었습니다. 페이지 스냅샷은 체크박스가 선택된 상태에서 페이지의 업데이트된 콘텐츠를 보여줍니다.
사용자	스크린샷을 찍다
어시스턴트	브라우저_스크린샷_테이크 도구를 실행합니다 현재 페이지의 스크린샷이 촬영되었습니다. 스크린샷은 PNG 형식이며 크기는 58KB입니다.
사용자	완료된 할 일 항목 제거
어시스턴트	browser_clickt 도구를 실행합니다 . "완료된 항목 지우기" 버튼이 클릭되었습니다. 페이지 스냅샷은 완료된 할 일 항목 "Polly wants a cracker"가 제거된 업데이트된 페이지 콘텐츠를 보여줍니다.
사용자	마지막 스크린샷을 찍으세요
어시스턴트	브라우저_스크린샷_테이크 도구를 실행합니다 현재 페이지의 최종 스크린샷이 촬영되었습니다. PNG 형식이며 크기는 50KB입니다.

Claude Desktop과 함께 사용

현재 Claude Desktop은 로컬 MCP 서버만 지원합니다. Claude Desktop에서 playground-mcp 사용하려면 원격 MCP 서버를 프록시하고 로컬에 노출하는 도구인 mcp-remote 를 사용합니다. 다음 구성을 사용하세요.

1. Claude Desktop의 구성 파일을 엽니다.
2. mcpServers 섹션 아래에 다음 JSON 스니펫을 추가합니다.

3. 구성 파일을 저장하고 Claude Desktop을 다시 시작하여 변경 사항을 적용합니다.

이 설정을 통해 Claude Desktop이 Cloudflare Playwright MCP 서버와 통신할 수 있습니다.

다음은 TODO 데모 앱을 열고 "레몬 구매"를 추가하고 스크린샷을 찍는 세션의 예이며, playwright-mcp 도구와 브라우저 렌더링을 활용합니다.

VSCode에서 구성

VS Code CLI를 사용하여 Playwright MCP 서버를 설치할 수 있습니다.

설치 후 Playwright MCP 서버를 VS Code의 GitHub Copilot 에이전트와 함께 사용할 수 있습니다.