AI导哈

图像查看工具

一个MCP服务器，提供从文件系统读取和分析图像文件的工具，适用于AI助手无法直接访问文件系统的情况。

  • by odinns
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 odinns/image-viewer-mcp

使用说明

图像查看器MCP

一个MCP服务器，提供从文件系统读取和分析图像文件的工具，而Cursor等AI助手通常无法访问这些文件。

特性

  • readImage：从文件系统读取任何图像文件，并将其作为base64编码数据返回以进行AI分析
  • 列表图片：列出目录中的图像文件（可用于查找Dusk屏幕截图）
  • 便携的：这两个工具都可以通过可选的项目根参数跨多个项目工作

安装

本地安装（Git克隆）

# Clone the repository
git clone https://github.com/odinns/image-viewer-mcp.git

# Navigate to the directory
cd image-viewer-mcp

# Install dependencies
npm install

# Optional: Install globally for easier access
npm install -g .

配置

带光标

将MCP服务器添加到您的 .cursor/mcp.json:

{
  "mcpServers": {
    "image-viewer": {
      "command": "node",
      "args": ["/path/to/image-viewer-mcp/image-viewer-mcp.js"]
    }
  }
}

备注：替换 /path/to/image-viewer-mcp/ 使用克隆存储库的实际路径。

如果全局安装：

{
  "mcpServers": {
    "image-viewer": {
      "command": "image-viewer-mcp"
    }
  }
}

使用Windsurf

将MCP服务器添加到您的 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "image-viewer": {
      "command": "node",
      "args": ["/path/to/image-viewer-mcp/image-viewer-mcp.js"]
    }
  }
}

备注：替换 /path/to/image-viewer-mcp/ 使用克隆存储库的实际路径。

如果全局安装：

{
  "mcpServers": {
    "image-viewer": {
      "command": "image-viewer-mcp"
    }
  }
}

工具

readImage

读取图像文件并将其返回以进行AI分析。

参数：

  • filePath （必填）：图像文件的路径（相对于当前工作目录、项目根目录或绝对路径）
  • description （可选）：描述在图像中要查找的内容
  • projectRoot （可选）：项目根目录解析相对文件路径
// Example usage through MCP
readImage({
  filePath: 'tests/Browser/screenshots/failure-LoginTest-2025-01-02.png',
  description: 'Login page screenshot showing error state',
  projectRoot: '/path/to/your/project',
});

// Or with relative path (will use process.cwd() if projectRoot not provided)
readImage({
  filePath: 'test-images/screenshot.png',
  description: 'UI screenshot for analysis',
});

列表图片

列出目录中的所有图像文件。

参数：

  • directory （可选）：搜索图像的目录（默认：“测试/浏览器/截图”）
  • pattern （可选）：要匹配的文件模式（默认：“*.png”）
  • recursive （可选）：在子目录中递归搜索（默认值：false）
  • projectRoot （可选）：项目根目录解析相对目录路径
// Example usage
listImages({
  directory: 'tests/Browser/screenshots',
  pattern: '*.png',
  recursive: false,
  projectRoot: '/path/to/your/project',
});

// Or with relative directory (will use process.cwd() if projectRoot not provided)
listImages({
  directory: 'test-images',
  pattern: '*.png',
  recursive: false,
});

用例

  • 黄昏测试调试：分析Dusk测试失败的截图，以了解出了什么问题
  • 用户界面测试：比较预期与实际UI状态
  • 视觉回归测试：分析屏幕截图中的视觉差异
  • 文档：从UI屏幕截图生成文档
  • 跨项目使用：跨多个项目无缝工作，无需更改配置

发展

# Run in development mode with auto-reload
npm run dev

# Run normally
npm start

需求

  • Node.js>=18.0.0
  • MCP兼容的AI助手（光标、风帆等）

许可证

麻省理工学院

相关 MCP