Webdev Mcp
What is Webdev Mcp
webdev-mcp is an MCP server that offers essential tools for web development, enabling developers to enhance their workflow with functionalities like taking screenshots and listing screens.
Use cases
Use cases for webdev-mcp include automated testing where screenshots are needed for validation, documentation purposes, and any scenario where developers need to capture visual states of their applications.
How to use
To use webdev-mcp, you can install it in your project by adding it to your ‘.cursor/mcp.json’ file or install it globally using the command ‘npx webdev-mcp’. For Windsurf integration, add it to your ‘~/.codeium/windsurf/mcp_config.json’.
Key features
Key features include the ability to take screenshots and list screens, with screenshots returned as base64 encoded strings. It is recommended to enable YOLO mode and disable MCP tools protection for optimal performance.
Where to use
webdev-mcp is primarily used in web development environments, particularly for projects that require efficient screen capture and management tools.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Webdev Mcp
webdev-mcp is an MCP server that offers essential tools for web development, enabling developers to enhance their workflow with functionalities like taking screenshots and listing screens.
Use cases
Use cases for webdev-mcp include automated testing where screenshots are needed for validation, documentation purposes, and any scenario where developers need to capture visual states of their applications.
How to use
To use webdev-mcp, you can install it in your project by adding it to your ‘.cursor/mcp.json’ file or install it globally using the command ‘npx webdev-mcp’. For Windsurf integration, add it to your ‘~/.codeium/windsurf/mcp_config.json’.
Key features
Key features include the ability to take screenshots and list screens, with screenshots returned as base64 encoded strings. It is recommended to enable YOLO mode and disable MCP tools protection for optimal performance.
Where to use
webdev-mcp is primarily used in web development environments, particularly for projects that require efficient screen capture and management tools.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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:
- To install globally, add this command to your Cursor settings:
npx webdev-mcp
Windsurf
- Add the MCP server to your
~/.codeium/windsurf/mcp_config.jsonfile:
{
"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.
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
