AI导哈

视觉UI调试代理MCP服务

视觉UI调试代理MCP服务是一个自主调试的MCP服务器，通过Playwright赋能AI模型分析、调试和与Web界面交互。该服务使任何AI模型（即使没有内置视觉能力）能够视觉检查网页、发现UI错误、测试用户工作流程和验证应用性能，无需人工干预。

  • by samihalawa
  • 更新于
在 GitHub 查看 samihalawa/mcp-ai-vision-debug-ui-automation

使用说明

基本能力

产品定位

视觉UI调试代理MCP服务是一款AI驱动的自主调试代理，专注于Web应用的视觉分析和自动化测试。

核心功能

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

适用场景

  • Web应用的自动化UI测试
  • 视觉回归测试
  • 用户工作流程验证
  • 性能优化分析
  • API端点测试
  • 跨版本UI比较

工具列表

  1. enhanced_page_analyzer 🔍 - 提供网页的全面分析，包括交互元素映射、性能指标和视觉检查
  2. ui_workflow_validator 🔄 - 自动测试完整用户旅程，执行并验证一系列UI交互
  3. visual_comparison 👁️ - 比较两个网页或UI状态以识别视觉差异
  4. screenshot_url 📸 - 捕获任何URL的高质量截图
  5. batch_screenshot_urls 📷 - 高效比较多个URL的截图
  6. navigation_flow_validator - 测试多步骤导航序列
  7. api_endpoint_tester 🔌 - 测试多个API端点并验证响应
  8. dom_inspector 🔬 - 详细检查DOM元素及其属性
  9. console_monitor 📟 - 监控和捕获控制台日志
  10. performance_analysis - 测量和分析页面加载性能指标

使用教程

使用依赖

需要安装Node.js和npm或Docker环境。

安装教程

  1. 通过MCP网关安装（推荐）:
claude-gateway install visual-ui-debug-agent-mcp
  1. 使用一键安装脚本:
curl -s https://raw.githubusercontent.com/samihalawa/visual-ui-debug-agent-mcp/main/scripts/install-global.sh | bash
  1. NPM全局安装:
npm install -g visual-ui-debug-agent-mcp
visual-ui-debug-agent-mcp
  1. Docker安装:
docker pull samihalawa/visual-ui-debug-agent-mcp:latest
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest
  1. Smithery集成:
smithery install visual-ui-debug-agent-mcp
npm run smithery:key YOUR_SMITHERY_API_KEY

调试方式

启动服务后，可以使用以下命令测试基本功能:

# 测试页面分析功能
curl -X POST http://localhost:8080/tools/enhanced_page_analyzer -d '{"url":"https://example.com"}'

# 测试截图功能
curl -X POST http://localhost:8080/tools/screenshot_url -d '{"url":"https://example.com"}'

相关 MCP