cloudflare-playwright-mcp

Cloudflare Playwright MCP 예제

개요

이 프로젝트는 Cloudflare Workers에서 Playwright를 Cloudflare Playwright MCP와 함께 사용하여 Model Control Protocol(MCP) 서버로 활용하는 방법을 보여줍니다.

이를 통해 AI 어시스턴트가 일련의 도구를 사용해 브라우저를 제어할 수 있으며, 탐색, 입력, 클릭, 스크린샷 촬영과 같은 웹 자동화 작업을 수행할 수 있습니다.

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

배포

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

1. 의존성 설치:

npm ci

2. Cloudflare Workers에 배포:

npx wrangler deploy

Cloudflare AI Playground에서 사용

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

• https://playground.ai.cloudflare.com/로 이동

• 모델이 llama-3.3-70b-instruct-fp8-fast로 설정되어 있는지 확인

• MCP Servers에서 URL을 https://[my-mcp-url].workers.dev/sse로 설정

• Connect 클릭

• 상태가 Connected로 업데이트되고 14개의 사용 가능한 도구가 표시되어야 합니다

이제 모델과 상호작용을 시작할 수 있으며, 모델은 요청된 작업을 수행하기 위해 필요한 도구를 실행합니다.

[!TIP] 가장 좋은 결과를 얻으려면 "새 할 일 항목 만들기", "cloudflare 사이트로 이동", "스크린샷 촬영"과 같이 단일 동작으로 구성된 간단한 지침을 제공하세요.

대화 예시:

Claude Desktop에서 사용

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

1. Claude Desktop의 구성 파일을 엽니다.

2. mcpServers 섹션 아래에 다음 JSON 스니펫을 추가합니다:

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

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

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

다음은 playwright-mcp 도구와 Browser Rendering을 활용하여 TODO 데모 앱을 열고, "buy lemons"를 추가하고, 스크린샷을 찍는 세션의 예시입니다:

VSCode에서 구성

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

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

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