STARWARCLOUD STARWAR.AI
返回市场
视觉界面调试代理mcp

视觉界面调试代理mcp

作者：samihalawa72 星标更新：2025-07-04
安装使用来源：spider==github.com

项目介绍

VUDA: 视觉UI调试代理

<a href="https://ibb.co/YTWc0mMQ"><img src="https://gips1.baidu.com/it/u=2944042874,4229144347&fm=3081&app=3081&f=PNG?w=640&h=427" alt="VUDAbanner" border="0"></a>

MCP服务器 GLAMA兼容 Smithery兼容

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

UI自动化截图

自主UI调试代理

VUDA 作为一个由AI驱动的自主调试代理，可以：

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

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

安装选项

使用MCP网关（推荐）

安装VUDA最简单的方法是通过任何与MCP兼容的网关：

# 示例使用Claude网关
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全局安装：

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

# 启动服务器
vuda
# 或
visual-ui-debug-agent

Docker Hub安装

用于容器化部署：

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

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

Smithery集成

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

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

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

有关完整的安装和使用说明，请参阅Smithery集成指南。

跨平台支持

所有主要平台上都有特定的软件包：

# 对于macOS（Intel或Apple Silicon）
npm install -g visual-ui-debug-agent-mcp-darwin-x64
npm install -g visual-ui-debug-agent-mcp-darwin-arm64

# 对于Linux
npm install -g visual-ui-debug-agent-mcp-linux-x64
npm install -g visual-ui-debug-agent-mcp-linux-arm64

# 对于Windows
npm install -g visual-ui-debug-agent-mcp-win32-x64

完整工具参考

主要视觉分析工具

1. enhanced_page_analyzer 🔍

提供对带有交互元素映射、性能指标和视觉检查的网页进行全面分析。

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

2. ui_workflow_validator 🔄

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

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状态以识别视觉差异。

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

4. screenshot_url 📸

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

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

5. batch_screenshot_urls 📷

一次性操作中为多个URL拍摄截图，以便高效比较。

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

用户流测试工具

6. navigation_flow_validator 🧭

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

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端点并验证响应以进行后端验证。

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元素及其属性。

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

9. console_monitor 📟

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

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

10. performance_analysis ⚡

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

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

低级Playwright控制

11. screenshot_local_files 📁

拍摄本地HTML文件的截图。

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: 拍摄自定义截图

实用工具

13. tunnel_helper 🚇

帮助通过Cloudflare隧道暴露本地端口，以便远程调试访问。

// 引导用户完成隧道设置
const guide = await mcp.callTool("tunnel_helper", {
  action: "guide",
  port: 3000
});

// 存储隧道URL供以后使用
await mcp.callTool("tunnel_helper", {
  action: "store",
  port: 3000,
  url: "https://example.trycloudflare.com"
});

// 检索存储的隧道URL
const tunnels = await mcp.callTool("tunnel_helper", {
  action: "retrieve"
});

14. debug_memory 💾

保存和检索调试上下文、环境变量和重要发现。

// 保存调试上下文
await mcp.callTool("debug_memory", {
  action: "save",
  key: "api_config",
  data: {
    baseUrl: "https://api.example.com",
    apiKey: "sk-123...",
    endpoints: ["/users", "/products"]
  }
});

// 检索保存的上下文
const config = await mcp.callTool("debug_memory", {
  action: "retrieve",
  key: "api_config"
});

// 列出所有保存的项目
const allItems = await mcp.callTool("debug_memory", {
  action: "list"
});

// 清除所有保存的数据
await mcp.callTool("debug_memory", {
  action: "clear"
});

自主调试工作流程

VUDA 可以通过结合工具自主执行完整的调试工作流程。例如：

视觉回归测试

// 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", {...});

端到端用户流验证

// 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", {...});

性能优化

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

// 2. 识别慢加载元素
const elementPerformance = await mcp.callTool("dom_inspector", {...});

// 3. 监控控制台中的错误
const consoleErrors = await mcp.callTool("console_monitor", {...});

视觉分析示例

元素映射

元素映射

VUDA 自动映射页面上的所有交互元素，使得AI模型容易理解UI结构。

视觉比较

视觉比较

视觉比较工具突出显示UI状态之间的差异，非常适合捕捉意外的视觉变化。

集成选项

与Smithery集成

# smithery.yaml配置
startCommand:
  type: stdio
  configSchema:
    type: object
    properties:
      port:
        type: number
        description: MCP服务器的端口号
      debug:
        type: boolean
        description: 启用调试模式

与GLAMA集成

// glama.json配置
{
  "name": "visual-ui-debug-agent-mcp",
  "version": "1.0.0",
  "settings": {
    "port": 8080,
    "headless": true,
    "maxConcurrentSessions": 5
  }
}

与非视觉模型集成

VUDA 将视觉信息转换为结构化数据，可供任何AI模型使用，即使是那些没有视觉能力的模型：

// 模型接收关于视觉元素的结构化数据
{
  "interactiveElements": [
    {
      "tagName": "button",
      "text": "提交",
      "bounds": {"x": 120, "y": 240, "width": 100, "height": 40},
      "visible": true
    },
    // 更多元素...
  ]
}

CI/CD集成

VUDA 包括GitHub Actions工作流程，用于持续集成和部署：

  • 构建和测试：验证代码质量
  • NPM发布：自动化包发布
  • Docker发布：创建并推送Docker镜像
  • Smithery发布：部署到Smithery平台

许可

本项目根据ISC许可授权。