Visual Ui Debug Agent MCP

Autonomous MCP Server for AI-Powered Visual UI Testing & Debugging

30 powerful tools for screenshots, workflows, performance, and visual analysis

______________________________________________________________________

VUDA是什么？

VUDA（可视化UI调试代理） 是一个MCP（模型上下文协议）服务器，它使AI模型能够使用Playwright直观地分析、测试和调试web界面。它使任何人工智能（即使是没有内置视觉的人工智能）都能检查网页、发现UI错误、测试用户工作流程并自主衡量性能。

关键能力

• 视觉分析 -截图、分析页面结构、映射交互元素
• 工作流测试 -通过逐步验证自动测试用户旅程
• 性能监控 -测量负载时间，分析指标，识别瓶颈
• API测试 -验证后端端点和响应
• 视觉比较 -通过差异突出显示检测版本之间的UI更改
• 控制台监控 -实时捕获错误、警告和日志

______________________________________________________________________

在行动中看到它

Claude Desktop using VUDA to check links and find broken pages

Validating user registration flow with step-by-step screenshots

Taking screenshots via Puppeteer MCP integration

______________________________________________________________________

建筑

VUDA通过MCP协议充当AI模型和web浏览器之间的桥梁。它使用Playwright实现可靠的跨浏览器自动化，并提供任何AI都能理解的结构化数据。

______________________________________________________________________

自动化测试工作流程

一个命令触发一个全面的网站分析——抓取所有页面，截图所有内容，验证用户流，并在几秒钟内衡量性能。

______________________________________________________________________

快速开始

安装

# Install globally via npm
npm install -g visual-ui-debug-agent-mcp

# Or run directly with npx (no installation needed)
npx visual-ui-debug-agent-mcp

使用Claude Desktop进行配置

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "vuda": {
      "command": "npx",
      "args": ["-y", "visual-ui-debug-agent-mcp"]
    }
  }
}

配置其他MCP客户端

{
  "mcpServers": {
    "vuda": {
      "command": "node",
      "args": ["/path/to/visual-ui-debug-agent-mcp/dist/index.js"]
    }
  }
}

______________________________________________________________________

完整工具参考（30个工具）

可视化分析工具

工作流程和测试工具

性能和监控工具

剧作家直接控制

实用工具

______________________________________________________________________

使用示例

拍摄屏幕截图

Ask Claude: "Take a screenshot of https://example.com"

AI将使用 screenshot_url 以捕获页面并返回图像。

分析页面

Ask Claude: "Analyze the UI of https://myapp.com/dashboard and find any issues"

VUDA将使用 enhanced_page_analyzer 要映射所有元素，请检查控制台是否有错误，并报告结果。

测试登录流

Ask Claude: "Test the login flow on https://myapp.com - use test@example.com and password123"

AI将使用 ui_workflow_validator 致：

1. 导航到登录页面
2. 填写凭证
3. 点击提交
4. 验证登录成功
5. 在每个步骤中捕获屏幕截图

比较两个版本

Ask Claude: "Compare the homepage before and after our CSS update"

使用 visual_comparison，VUDA将突出显示两个状态之间的所有视觉差异。

监测性能

Ask Claude: "Check the performance of our checkout page"

performance_analysis 将测量加载时间，分析核心Web生命周期，并识别瓶颈。

______________________________________________________________________

高级配置

环境变量

# Set browser options
PLAYWRIGHT_HEADLESS=true
PLAYWRIGHT_SLOW_MO=100

# Debug mode
DEBUG=vuda:*

程序化使用

import { Server } from "@modelcontextprotocol/sdk/server/index.js";

// VUDA exposes all tools through the MCP protocol
const result = await client.callTool("enhanced_page_analyzer", {
  url: "https://example.com",
  includeConsole: true,
  mapElements: true,
  fullPage: true
});

______________________________________________________________________

为什么选择VUDA？

______________________________________________________________________

需求

• Node.js 18岁或以上
• npm 或 npx
• 适用于macOS、Linux和Windows

______________________________________________________________________

贡献

欢迎投稿！请随时提交拉取请求。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

______________________________________________________________________

许可证

该项目根据 ISC许可证.

______________________________________________________________________

Built with Playwright and the Model Context Protocol

Made by @samihalawa