Cloudflare Playwright MCP
Overview
This project leverages Playwright for automated browser testing and integrates with Cloudflare Workers, Browser Rendering and `@cloudflare/playwright` for deployment.
Build and Deploy
Follow these steps to set up and deploy the project:
- Install dependencies:
- Deploy to Cloudflare Workers:
Use with Cloudflare AI Playground
alt text
Cloudflare playground AI is a great way to test MCP servers using LLM models available in Workers AI.
- Navigate to https://playground.ai.cloudflare.com/
- Ensure model is set to
llama-3.3-70b-instruct-fp8-fast
- In MCP Servers, set URL to
https://[my-mcp-url].workers.dev/sse
- Click Connect
- Status should update to Connected and it should list 14 available tools
You can now start to interact with the model, and it will run necessary tools to accomplish what was requested.
[!TIP] For best results, give simple instructions consisting of one single action, e. g., "Create a new todo entry", "Go to cloudflare site", "Take a screenshot"
Example of a conversation:
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
Use with Claude Desktop
As of now, Claude Desktop only supports local MCP servers. To use
playground-mcp with Claude Desktop we make use of mcp-remote, a tool that proxies remote MCP servers and exposes them locally. Use the following configuration:- Open the configuration file for Claude Desktop.
- Add the following JSON snippet under the
mcpServerssection:
- Save the configuration file and restart Claude Desktop to apply the changes.
This setup ensures that Claude Desktop can communicate with the Cloudflare Playwright MCP server.
Here's an example of a session opening the TODO demo app, adding "buy lemons" and doing a screenshot, taking advantage of playwright-mcp tools and Browser Rendering:
alt text
Configure in VSCode
You can install the Playwright MCP server using the VS Code CLI:
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
Cloudflare Playwright MCP
Overview
This project leverages Playwright for automated browser testing and integrates with Cloudflare Workers, Browser Rendering and `@cloudflare/playwright` for deployment.
Build and Deploy
Follow these steps to set up and deploy the project:
- Install dependencies:
- Deploy to Cloudflare Workers:
Use with Cloudflare AI Playground
alt text
Cloudflare playground AI is a great way to test MCP servers using LLM models available in Workers AI.
- Navigate to https://playground.ai.cloudflare.com/
- Ensure model is set to
llama-3.3-70b-instruct-fp8-fast
- In MCP Servers, set URL to
https://[my-mcp-url].workers.dev/sse
- Click Connect
- Status should update to Connected and it should list 14 available tools
You can now start to interact with the model, and it will run necessary tools to accomplish what was requested.
[!TIP] For best results, give simple instructions consisting of one single action, e. g., "Create a new todo entry", "Go to cloudflare site", "Take a screenshot"
Example of a conversation:
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
[object Object] | [object Object] |
Use with Claude Desktop
As of now, Claude Desktop only supports local MCP servers. To use
playground-mcp with Claude Desktop we make use of mcp-remote, a tool that proxies remote MCP servers and exposes them locally. Use the following configuration:- Open the configuration file for Claude Desktop.
- Add the following JSON snippet under the
mcpServerssection:
- Save the configuration file and restart Claude Desktop to apply the changes.
This setup ensures that Claude Desktop can communicate with the Cloudflare Playwright MCP server.
Here's an example of a session opening the TODO demo app, adding "buy lemons" and doing a screenshot, taking advantage of playwright-mcp tools and Browser Rendering:
alt text
Configure in VSCode
You can install the Playwright MCP server using the VS Code CLI:
After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.