项目简介

'webdev-mcp' 是一个基于 Model Context Protocol (MCP) 构建的应用后端，专门为网络开发者提供一系列工具，例如屏幕截图功能，供支持MCP协议的LLM客户端（如Cursor, Windsurf等）调用。它通过标准化的方式向LLM提供访问系统屏幕截图功能的能力。

主要功能点

屏幕截图 ('takeScreenshot'): 允许LLM客户端请求对特定屏幕进行截图，并返回Base64编码的PNG图片数据。支持根据屏幕ID选择不同的屏幕进行截图（目前macOS支持多屏选择，Windows和Linux支持主屏）。
列出屏幕 ('listScreens'): 允许LLM客户端查询当前操作系统可用的屏幕/显示器列表。返回每个屏幕的ID和描述信息，帮助LLM智能体选择需要截图的目标屏幕。

使用前提

需要安装 Node.js 环境。
确保可以通过 'npx webdev-mcp' 命令在您的系统环境中运行此服务器。这通常意味着 'webdev-mcp' npm 包需要被安装在客户端可以访问的路径下，或者 npx 可以自动下载执行。

MCP客户端配置

MCP服务器不是独立运行的应用，而是由MCP客户端根据配置信息启动并连接。您需要在您使用的MCP客户端（例如 Cursor 或 Windsurf）的配置文件中添加此服务器的配置信息，以便客户端知道如何找到并启动 'webdev-mcp'。

配置信息通常位于客户端特定的JSON文件中，包含一个 'mcpServers' 部分。在这个部分中，您会为 'webdev-mcp' 服务器指定一个唯一的名称，以及客户端用于启动服务器进程的命令和参数。

配置信息示例 (请参考您客户端的文档查找具体配置文件的位置和格式):

您需要在客户端的MCP配置文件中添加一个服务器条目，指定服务器的启动方式：

服务器名称: 您可以为此服务器实例指定一个名称，例如 'webdev'。LLM智能体可能会通过此名称或工具本身的描述来发现并使用其提供的工具。
启动命令 ('command'): 客户端用来启动服务器进程的命令。对于此项目，命令是 'npx'。
参数 ('args'): 传递给启动命令的参数。对于此项目，参数是 '["webdev-mcp"]'。

例如，在 Cursor 的 '.cursor/mcp.json' 文件中添加配置：

{
	"mcpServers": {
		"webdev": { // 服务器名称
			"command": "npx", // 启动命令
			"args": ["webdev-mcp"] // 命令参数
		}
		// 其他可能的MCP服务器配置...
	}
}

将这些信息添加到您客户端的相应配置文件中即可。

如何使用功能

配置并确保客户端能够启动 'webdev-mcp' 服务器后，当您在支持MCP工具的LLM客户端中使用AI功能时，LLM智能体将能够通过MCP协议与服务器通信。AI可以调用 'listScreens' 工具来获取可用的屏幕列表及ID，然后调用 'takeScreenshot' 工具并指定相应的屏幕ID来获取屏幕截图，并将图片作为上下文或处理对象使用。

关键词

信息