webdev mcp

Local 2025-09-01 01:07:52 0

An MCP server providing web development tools such as screen capturing capabilities that let AI agents take and work with screenshots of the user's screen.

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.

[
  {
    "description": "List available screens/displays that can be captured",
    "name": "listScreens",
    "parameters": {
      "additionalProperties": false,
      "properties": {},
      "required": null,
      "type": "object"
    }
  },
  {
    "description": "Take a screenshot of a specific screen and return it as a base64 encoded string.",
    "name": "takeScreenshot",
    "parameters": {
      "additionalProperties": false,
      "properties": {
        "screenId": {
          "description": "ID of the screen to capture. Use listScreens to find available screens. Default is 1 (main screen)",
          "type": "number"
        },
        "timeout": {
          "description": "Maximum time to wait in milliseconds (default: 0, no timeout)",
          "type": "number"
        }
      },
      "required": null,
      "type": "object"
    }
  }
]