Which integrations are available for this server?

Provides screen recording capabilities on macOS, requiring users to grant screen recording permissions to Cursor for taking screenshots. Requires YOLO mode to be enabled in Cursor settings for optimal experience with the webdev-mcp server's screenshot functionality.

How do I use webdev-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@webdev-mcp take a screenshot of my current screen" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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"] } } }

Related MCP server: 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.