关键词

屏幕截图网页开发工具AI辅助显示器列表工具服务

项目简介

Webdev MCP服务器是一个基于 Model Context Protocol (MCP) 构建的后端服务，专为增强AI助手在网页开发领域的能力而设计。它通过标准化接口向兼容的AI客户端（如 Cursor, Windsurf 等）提供特定的上下文信息和功能。

该服务器的核心功能是提供工具（Tools），当前主要提供了与屏幕截图相关的功能。

主要功能点

  • 屏幕截图工具 ('takeScreenshot'): 允许AI助手调用该工具来捕获指定屏幕的图像。这对于AI理解用户界面的当前状态、进行UI分析或提供基于视觉反馈的建议非常有用。工具可以指定要捕获的屏幕ID，并返回Base64编码的PNG图像数据。
  • 列出可用屏幕工具 ('listScreens'): 提供一个工具，让AI助手能够查询当前系统中有哪些显示器可用，并获取它们的ID和描述。这有助于AI在使用截图工具时，能够准确地选择目标屏幕。

安装步骤

该项目是一个 Node.js 应用。要运行此MCP服务器，您需要安装 Node.js。

  1. 通过 npx 直接运行: 这是最推荐且通常最简便的方式，特别是在您使用的AI客户端支持通过 'npx' 启动MCP服务器时。 无需提前安装，AI客户端配置为使用 'npx' 启动该服务器时，Node.js 会自动下载并运行它。

服务器配置

为了让您的MCP客户端（如 Cursor 或 Windsurf）能够连接并使用此服务器，您需要在客户端的MCP配置中添加该服务器的信息。配置通常是一个JSON文件，指定服务器的名称、启动命令和参数。

配置的核心信息如下：

  • 服务器名称 (server name): 一个您为该服务器指定的唯一标识符，例如 '"webdev"'。
  • 启动命令 (command): 用于启动服务器的命令，通常是 '"npx"'。
  • 启动参数 (args): 传递给启动命令的参数，对于这个服务器，参数是 '["webdev-mcp"]'。

这是一个典型的配置片段（请根据您的AI客户端文档找到正确的配置文件的位置和格式）：

{
  "mcpServers": {
    "您指定的服务器名称": {
      "command": "npx",
      "args": ["webdev-mcp"]
    }
  }
}

配置完成后，启动或重启您的AI客户端，它应该能够检测到并连接到这个Webdev MCP服务器。

基本使用方法

一旦服务器在您的AI客户端中配置并成功连接，AI助手将能够自动发现并了解该服务器提供的工具（'takeScreenshot' 和 'listScreens'）。

您可以通过自然语言指示AI执行相关任务。例如：

  • 当您需要AI查看当前屏幕内容时，可以尝试说类似 "请截取屏幕图像让我看看" 或 "当前屏幕上有什么？"。AI可能会调用 'takeScreenshot' 工具来获取图像。
  • 如果您有多个显示器，并且想让AI处理特定屏幕的内容，可以先让AI调用 'listScreens' 工具来获取可用屏幕的列表和ID（例如，您可以问 "我有哪些屏幕可以使用？"），然后指示AI截取特定ID的屏幕（例如，"请截取屏幕ID为2的图像"）。

AI将根据您的指令，结合其能力，决定何时以及如何调用这些MCP工具来辅助您进行网页开发或其他相关工作。

信息

分类

开发者工具

访问项目