# MCP AI视觉调试工具
## 基本信息
- Slug: `samihalawa-mcp-ai-vision-debug-ui-automation`
- Source: modelscope
- Publisher: @samihalawa/mcp-ai-vision-debug-ui-automation
- Categories: image-and-video-processing / app-automation / autonomous-agents
- Hosted: No
- License: Unknown
- Source URL: https://www.modelscope.cn/mcp/servers/@samihalawa/mcp-ai-vision-debug-ui-automation
## 简介
为克劳德和其他与MCP兼容的AI助手提供由AI驱动的视觉分析功能，使它们能够捕获和分析截图、执行文件操作以及生成UI/UX报告。
## MCP Server 详情

# 可视化UI调试代理MCP

[![MCP Server](https://img.shields.io/badge/MCP-Visual%20UI%20Debug-blue)](https://github.com/samihalawa/visual-ui-debug-agent-mcp) [![GLAMA Compatible](https://img.shields.io/badge/GLAMA-Compatible-green)](https://github.com/samihalawa/visual-ui-debug-agent-mcp) [![Smithery Compatible](https://img.shields.io/badge/Smithery-Compatible-orange)](https://smithery.ai/docs/config)

这是一个自主调试的MCP服务器，它通过Playwright使AI模型能够分析、调试和与Web界面交互。该服务器让任何AI模型（即使是没有内置视觉能力的模型）都能够对网页进行视觉检查，发现UI错误，测试用户工作流程，并验证应用程序性能——所有这些都不需要人工干预。

![UI自动化截图](publicresources/screenshot1.png)

## 自主UI调试代理

这个MCP服务器作为一个由AI驱动的自主调试代理，可以：

- **执行全面的视觉分析** 对Web应用程序
- **检测UI问题** 通过检查视觉元素及其属性
- **自动测试常见的用户工作流程** 无需手动创建测试脚本
- **验证API端点** 并验证后端响应
- **跟踪不同版本间的视觉变化**
- **监控控制台日志** 以查找错误和警告
- **分析性能指标** 以识别瓶颈
- **生成详细的报告** 包含截图和建议

该服务器设计为智能工作，重用浏览器会话，避免不必要的文件创建，并专注于您应用程序最重要的方面。

## 安装选项

### 使用MCP网关（推荐）

安装此MCP服务器最简单的方法是通过任何兼容MCP的网关：

bash
# 例如使用Claude网关
claude-gateway install visual-ui-debug-agent-mcp


### 快速安装脚本

使用我们的一行安装脚本：

bash
curl -s https://raw.githubusercontent.com/samihalawa/visual-ui-debug-agent-mcp/main/scripts/install-global.sh | bash


### NPM安装

对于全局安装，可以通过npm：

bash
# 全局安装
npm install -g visual-ui-debug-agent-mcp

# 启动服务器
visual-ui-debug-agent-mcp


### Docker Hub安装

对于容器化部署：

bash
# 从Docker Hub拉取镜像
docker pull samihalawa/visual-ui-debug-agent-mcp:latest

# 运行容器
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest


### Smithery集成

此包完全兼容Smithery，使用包含的配置文件：

bash
# 使用Smithery安装
smithery install visual-ui-debug-agent-mcp

# 或者使用您的API密钥运行
npm run smithery:key YOUR_SMITHERY_API_KEY


完整的安装和使用说明，请参阅[Smithery集成指南](./SMITHERY-GUIDE.md)。

## 工具完整参考

### 主要视觉分析工具

#### 1. `enhanced_page_analyzer` 🔍

提供带有交互元素映射、性能指标和视觉检查的网页综合分析。

javascript
const analysis = await mcp.callTool("enhanced_page_analyzer", {
  url: "https://example.com/dashboard",
  includeConsole: true,
  mapElements: true,
  fullPage: true
});


#### 2. `ui_workflow_validator` 🔄

通过执行并验证一系列UI交互来自动测试完整的用户旅程。

javascript
const result = await mcp.callTool("ui_workflow_validator", {
  startUrl: "https://example.com/login",
  taskDescription: "用户登录流程",
  steps: [
    { description: "输入用户名", action: "fill", selector: "#username", value: "test" },
    { description: "输入密码", action: "fill", selector: "#password", value: "pass" },
    { description: "点击登录", action: "click", selector: "button[type= submit ]" },
    { description: "验证仪表板加载", action: "verifyElementVisible", selector: ".dashboard" }
  ],
  captureScreenshots: "all"
});#### 3. `visual_comparison` 👁️

比较两个网页或UI状态以识别视觉差异。

javascript
const diff = await mcp.callTool("visual_comparison", {
  url1: "https://example.com/before",
  url2: "https://example.com/after",
  threshold: 0.05
});


#### 4. `screenshot_url` 📸

捕获任何URL的高质量截图，并可选择全页或特定元素。

javascript
const screenshot = await mcp.callTool("screenshot_url", {
  url: "https://example.com/profile",
  fullPage: true,
  device: "iPhone 13"
});


#### 5. `batch_screenshot_urls` 📷

在一个操作中对多个URL进行截图，以便高效比较。

javascript
const screenshots = await mcp.callTool("batch_screenshot_urls", {
  urls: ["https://example.com/page1", "https://example.com/page2"],
  fullPage: true
});


### 用户流程测试工具

#### 6. `navigation_flow_validator` 🧭

测试多步骤导航序列并进行验证。

javascript
const navResult = await mcp.callTool("navigation_flow_validator", {
  startUrl: "https://example.com",
  steps: [
    { action: "click", selector: "a.products" },
    { action: "wait", waitTime: 1000 },
    { action: "click", selector: ".product-item" }
  ],
  captureScreenshots: true
});


#### 7. `api_endpoint_tester` 🔌

测试多个API端点并验证响应以进行后端验证。

javascript
const apiTest = await mcp.callTool("api_endpoint_tester", {
  url: "https://api.example.com/v1",
  endpoints: [
    { path: "/users", method: "GET" },
    { path: "/products", method: "GET" }
  ],
  authToken: "Bearer token123"
});


### DOM和性能分析

#### 8. `dom_inspector` 🔬

详细检查DOM元素及其属性。

javascript
const elementInfo = await mcp.callTool("dom_inspector", {
  url: "https://example.com",
  selector: "nav.main-menu",
  includeChildren: true,
  includeStyles: true
});


#### 9. `console_monitor` 📟

监控并捕获控制台日志以检测错误。

javascript
const logs = await mcp.callTool("console_monitor", {
  url: "https://example.com/app",
  filterTypes: ["error", "warning"],
  duration: 5000
});


#### 10. `performance_analysis` ⚡

测量和分析页面加载性能指标。

javascript
const perfMetrics = await mcp.callTool("performance_analysis", {
  url: "https://example.com/dashboard",
  iterations: 3
});


### 低级Playwright控制

#### 11. `screenshot_local_files` 📁

对本地HTML文件进行截图。

javascript
const localScreenshot = await mcp.callTool("screenshot_local_files", {
  filePath: "/path/to/local/file.html"
});


#### 12. 直接Playwright操作

完整的低级Playwright控制集，用于精确自动化：

- `playwright_navigate`: 导航到特定URL
- `playwright_click`: 点击元素
- `playwright_iframe_click`: 点击iframe内的元素
- `playwright_fill`: 填充表单字段
- `playwright_select`: 选择下拉选项
- `playwright_hover`: 悬停在元素上
- `playwright_evaluate`: 在页面上下文中运行JavaScript
- `playwright_console_logs`: 获取控制台日志
- `playwright_get_visible_text`: 提取可见文本
- `playwright_get_visible_html`: 获取可见HTML
- `playwright_go_back`: 后退
- `playwright_go_forward`: 前进
- `playwright_press_key`: 按键盘键
- `playwright_drag`: 拖放元素
- `playwright_screenshot`: 截图

## 自主调试工作流

MCP服务器可以通过组合工具自主执行完整的调试工作流。例如：

### 视觉回归测试
javascript
// 1. 分析当前版本
const currentAnalysis = await mcp.callTool("enhanced_page_analyzer", {...});

// 2. 与先前版本比较
const comparisonResult = await mcp.callTool("visual_comparison", {...});

// 3. 生成视觉差异报告
const report = await mcp.callTool("ui_workflow_validator", {...});### 端到端用户流程验证
javascript
// 1. 从登录流程开始
const loginResult = await mcp.callTool("ui_workflow_validator", {...});

// 2. 验证核心功能
const featureResults = await mcp.callTool("navigation_flow_validator", {...});

// 3. 测试 API 端点
const apiResults = await mcp.callTool("api_endpoint_tester", {...});


### 性能优化
javascript
// 1. 分析初始性能
const initialPerformance = await mcp.callTool("performance_analysis", {...});

// 2. 识别加载缓慢的元素
const elem…