webdev-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@webdev-mcp take a screenshot of my main 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-mcpWindsurf
Add the MCP server to your
~/.codeium/windsurf/mcp_config.jsonfile:
{
"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.
Available Tools
2 toolslistScreensA
List available screens/displays that can be captured
Inputs: no named parameters.
takeScreenshotA
Take a screenshot of a specific screen and return it as a base64 encoded string.
Inputs: screenId, timeout.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 2 tools
listScreens and takeScreenshot have clearly distinct purposes—one lists available screens, the other captures a screenshot. There is no overlap or ambiguity between them.
Both tools use a consistent camelCase verb_noun pattern (listScreens, takeScreenshot) that is predictable and clear.
With only 2 tools, the set is minimal but covers the essential operations for screen capture (list and capture). Could be slightly thin but still reasonable for a focused domain.
The tool set covers listing screens and capturing a screenshot, which is the core functionality. Missing features like capturing all screens or with options are minor gaps that agents can work around.
Maintenance
Related MCP Connectors
Developer utility MCP: screenshots, PDFs, OG, QR, link preview, JSON validate, ShipPack.
Web and URL utilities over MCP: shorten URLs, screenshot pages, read page metadata, encode URLs.
Screenshots, PDFs, image editing, QR codes, email validation and more through one hosted MCP server.
Clean PNG/JPEG screenshots via REST or MCP, with goal-driven multi-step navigation.
Related MCP Servers
- AlicenseAqualityBmaintenanceEnables capturing screenshots of web pages and local HTML files through a simple MCP tool interface using Puppeteer with configurable options for dimensions and output paths.2193 npm37Apache 2.0
- FlicenseBqualityNot gradedmaintenanceAn MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.249 npm11-
- AlicenseBqualityDmaintenanceAn 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.249 npm15MIT
- AlicenseNot gradedqualityDmaintenanceMCP server that connects to your browser to capture screenshots, inspect console logs, network requests, and more via Chrome DevTools Protocol.16 npm2MIT