基本能力
产品定位
视觉UI调试代理MCP服务是一款AI驱动的自主调试代理，专注于Web应用的视觉分析和自动化测试。
核心功能
- 执行Web应用的全面视觉分析
- 通过检查视觉元素及其属性检测UI问题
- 无需手动创建测试脚本即可自动测试常见用户工作流程
- 验证API端点并检查后端响应
- 跟踪应用版本间的视觉变化
- 监控控制台日志中的错误和警告
- 分析性能指标以识别瓶颈
- 生成包含截图和建议的详细报告
适用场景
- Web应用的自动化UI测试
- 视觉回归测试
- 用户工作流程验证
- 性能优化分析
- API端点测试
- 跨版本UI比较
工具列表
- enhanced_page_analyzer 🔍 - 提供网页的全面分析，包括交互元素映射、性能指标和视觉检查
- ui_workflow_validator 🔄 - 自动测试完整用户旅程，执行并验证一系列UI交互
- visual_comparison 👁️ - 比较两个网页或UI状态以识别视觉差异
- screenshot_url 📸 - 捕获任何URL的高质量截图
- batch_screenshot_urls 📷 - 高效比较多个URL的截图
- navigation_flow_validator - 测试多步骤导航序列
- api_endpoint_tester 🔌 - 测试多个API端点并验证响应
- dom_inspector 🔬 - 详细检查DOM元素及其属性
- console_monitor 📟 - 监控和捕获控制台日志
- performance_analysis - 测量和分析页面加载性能指标
使用教程
使用依赖
需要安装Node.js和npm或Docker环境。
安装教程
- 通过MCP网关安装（推荐）:
claude-gateway install visual-ui-debug-agent-mcp- 使用一键安装脚本:
curl -s https://raw.githubusercontent.com/samihalawa/visual-ui-debug-agent-mcp/main/scripts/install-global.sh | bash- NPM全局安装:
npm install -g visual-ui-debug-agent-mcp
visual-ui-debug-agent-mcp- Docker安装:
docker pull samihalawa/visual-ui-debug-agent-mcp:latest
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest- 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"}'