Webdev

Provides web development tools accessible through MCP clients, including screen listing and screenshot capture.

typescript

11

GitHub Stars

typescript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

Webdev MCP Server provides useful web development tools via a lightweight MCP interface. It exposes a couple of utilities you can call from your MCP client to gather screens or take screenshots, all driven by a small, local MCP server invoked through your package manager. This guide shows you how to install and use it in common MCP clients and how to configure its runtime behavior.

How to use

You interact with the Webdev MCP Server through your MCP client. The server exposes two tools you can call from your client: takeScreenshot and listScreens. Your agent can use listScreens to obtain a screen id, then pass that id to takeScreenshot to retrieve a base64-encoded image of the selected screen.

How to install

Prerequisites you need before installing:

Node.js installed on your system (recommended recent LTS version).
An MCP client configured to load MCP servers from your environment (Cursor or Windsurf style).</br>Follow the installation patterns below to enable the Webdev MCP Server in your workflow.

Install in a project via Cursor To enable the MCP in a project, add the following to your project’s Cursor MCP config at .cursor/mcp.json:

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

		}
	}
}

Install globally in Cursor by running the following command in your terminal:

npx webdev-mcp

Install in Windsurf Configure Windsurf to load the MCP server by adding this to your Windsurf config file at ~/.codeium/windsurf/mcp_config.json:

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

Configuration and runtime notes

No additional configuration is required beyond the MCP server config if you follow the installation steps above. The server runs locally and provides APIs for the two tools: takeScreenshot and listScreens.

Security and tips

Ensure your MCP client and local environment are trusted sources within your development setup. If you use screen capture features, be mindful of privacy and permissions on your operating system.

Available tools

takeScreenshot

Captures a screenshot of a specified screen and returns it as a base64-encoded string.

listScreens

Returns a list of available screen IDs that you can target with takeScreenshot.