webdev MCP Server

Use This MCP server To

Capture screenshots of web pages as base64 encoded images List available screens for targeted screenshot capture Integrate screen capture tools into web development workflows Enable agents to interact with screen data for UI testing Automate visual documentation of web app states Support multi-screen environments for web development tasks

README

webdev-mcp

An MCP server that provides useful web development tools.

Usage

Cursor

To install in a project, add the MCP server to your .cursor/mcp.json:

{
	"mcpServers": {
		"webdev": {
			"command": "npx",
			"args": ["webdev-mcp"],

		}
	}
}

To install globally, add this command to your Cursor settings:

npx webdev-mcp

Windsurf

Add the MCP server to your ~/.codeium/windsurf/mcp_config.json file:

{
	"mcpServers": {
		"webdev": {
			"command": "npx",
			"args": ["webdev-mcp"]
		}
	}
}

Tools

Currently, the only 2 tools are takeScreenshot and listScreens. Your agent can use the list screens tool to get the screen id of the screen it wants to screenshot.

The tool will return the screenshot as a base64 encoded string.

Tips

Make sure YOLO mode is on and MCP tools protection is off in your Cursor settings for the best experience. You might have to allow Cursor to record your screen on MacOS.

webdev-mcp FAQ

How do I install webdev-mcp in my project?

Add the webdev-mcp server to your .cursor/mcp.json or Windsurf mcp_config.json using the provided npx command.

What tools does webdev-mcp currently provide?

It provides two tools: takeScreenshot to capture screen images and listScreens to list available screens.

How is the screenshot data returned?

Screenshots are returned as base64 encoded strings for easy integration and processing.

Do I need to configure any special settings for best performance?

Yes, enable YOLO mode and disable MCP tools protection in Cursor settings, and allow screen recording permissions if prompted.

Can webdev-mcp be used globally?

Yes, you can install it globally using 'npx webdev-mcp' for broader access.

Is webdev-mcp compatible with multiple MCP hosts?

Yes, it supports integration with MCP hosts like Cursor and Windsurf.

What platforms does webdev-mcp support for screen capture?

It supports platforms where Cursor and Windsurf run and have screen recording permissions enabled.