Визуальный агент отладки пользовательского интерфейса MCP
Автономный отладочный сервер MCP, который позволяет моделям ИИ анализировать, отлаживать и взаимодействовать с веб-интерфейсами через Playwright. Этот сервер позволяет любой модели ИИ (даже без встроенных возможностей зрения) визуально проверять веб-страницы, находить ошибки пользовательского интерфейса, тестировать рабочие процессы пользователя и проверять производительность приложения — все это без вмешательства человека.
Автономный агент отладки пользовательского интерфейса
Этот сервер MCP функционирует как автономный отладочный агент на базе искусственного интеллекта, который может:
- Выполнять комплексный визуальный анализ веб-приложений
- Выявляйте проблемы пользовательского интерфейса , проверяя визуальные элементы и их свойства.
- Автоматически тестируйте общие рабочие процессы пользователей без создания ручного тестового сценария
- Проверка конечных точек API и проверка ответов бэкэнда
- Отслеживайте визуальные изменения между версиями приложения
- Мониторинг журналов консоли на предмет ошибок и предупреждений.
- Анализируйте показатели производительности для выявления узких мест
- Создавайте подробные отчеты со снимками экрана и рекомендациями
Сервер спроектирован для интеллектуальной работы, повторно использует сеансы браузера, избегает создания ненужных файлов и фокусируется на наиболее важных аспектах вашего приложения.
Варианты установки
Использование шлюза MCP (рекомендуется)
Самый простой способ установки этого сервера MCP — через любой шлюз, совместимый с MCP:
# Example with Claude gateway
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:
# Install globally
npm install -g visual-ui-debug-agent-mcp
# Start the server
visual-ui-debug-agent-mcp
Установка Docker Hub
Для контейнерного развертывания:
# Pull the image from Docker Hub
docker pull samihalawa/visual-ui-debug-agent-mcp:latest
# Run the container
docker run -p 8080:8080 samihalawa/visual-ui-debug-agent-mcp:latest
Интеграция кузнечного дела
Этот пакет полностью совместим с Smithery благодаря включенному файлу конфигурации:
# Install with Smithery
smithery install visual-ui-debug-agent-mcp
# Or run with your API key
npm run smithery:key YOUR_SMITHERY_API_KEY
Полные инструкции по установке и использованию см. в Руководстве по интеграции Smithery .
Полный справочник инструментов
Основные инструменты визуального анализа
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 🔄
Автоматически тестирует все пути пользователя, выполняя и проверяя последовательность взаимодействий пользовательского интерфейса.
const result = await mcp.callTool("ui_workflow_validator", {
startUrl: "https://example.com/login",
taskDescription: "User login flow",
steps: [
{ description: "Enter username", action: "fill", selector: "#username", value: "test" },
{ description: "Enter password", action: "fill", selector: "#password", value: "pass" },
{ description: "Click login", action: "click", selector: "button[type='submit']" },
{ description: "Verify dashboard loads", action: "verifyElementVisible", selector: ".dashboard" }
],
captureScreenshots: "all"
});
3. visual_comparison 👁️
Сравнивает две веб-страницы или состояния пользовательского интерфейса для выявления визуальных различий.
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
});
Измеряет и анализирует показатели производительности загрузки страницы.
const perfMetrics = await mcp.callTool("performance_analysis", {
url: "https://example.com/dashboard",
iterations: 3
});
Низкоуровневые элементы управления драматургом
11. screenshot_local_files 📁
Делает снимки экрана локальных HTML-файлов.
const localScreenshot = await mcp.callTool("screenshot_local_files", {
filePath: "/path/to/local/file.html"
});
12. Прямые действия драматурга
Полный набор низкоуровневых элементов управления Playwright для точной автоматизации:
playwright_navigate : Перейти к определенным URL-адресамplaywright_click : Щелкните по элементамplaywright_iframe_click : Щелкните элементы внутри iframeplaywright_fill : Заполните поля формыplaywright_select : Выберите раскрывающиеся параметрыplaywright_hover : Наведите курсор на элементыplaywright_evaluate : Запустить JavaScript в контексте страницыplaywright_console_logs : Получить логи консолиplaywright_get_visible_text : Извлечь видимый текстplaywright_get_visible_html : Получить видимый HTMLplaywright_go_back : Перейти назадplaywright_go_forward : Перейти впередplaywright_press_key : Нажмите клавиши клавиатурыplaywright_drag : Перетаскивание элементовplaywright_screenshot : Делайте пользовательские снимки экрана
Автономные рабочие процессы отладки
Сервер MCP может автономно выполнять полные рабочие процессы отладки, комбинируя инструменты. Например:
Визуальное регрессионное тестирование
// 1. Analyze the current version
const currentAnalysis = await mcp.callTool("enhanced_page_analyzer", {...});
// 2. Compare with previous version
const comparisonResult = await mcp.callTool("visual_comparison", {...});
// 3. Generate visual difference report
const report = await mcp.callTool("ui_workflow_validator", {...});
Сквозная проверка потока пользователя
// 1. Start with login flow
const loginResult = await mcp.callTool("ui_workflow_validator", {...});
// 2. Validate core features
const featureResults = await mcp.callTool("navigation_flow_validator", {...});
// 3. Test API endpoints
const apiResults = await mcp.callTool("api_endpoint_tester", {...});
Оптимизация производительности
// 1. Analyze initial performance
const initialPerformance = await mcp.callTool("performance_analysis", {...});
// 2. Identify slow-loading elements
const elementPerformance = await mcp.callTool("dom_inspector", {...});
// 3. Monitor console for errors
const consoleErrors = await mcp.callTool("console_monitor", {...});
Примеры визуального анализа
Элементное отображение
Сервер MCP автоматически отображает все интерактивные элементы на странице, что упрощает понимание структуры пользовательского интерфейса для модели ИИ.
Визуальное сравнение
Инструмент визуального сравнения выявляет различия между состояниями пользовательского интерфейса, что идеально подходит для выявления неожиданных визуальных изменений.
Варианты интеграции
Интеграция с Smithery
# smithery.yaml configuration
startCommand:
type: stdio
configSchema:
type: object
properties:
port:
type: number
description: Port number for the MCP server
debug:
type: boolean
description: Enable debug mode
Интеграция с GLAMA
// glama.json configuration
{
"name": "visual-ui-debug-agent-mcp",
"version": "1.0.2",
"settings": {
"port": 8080,
"headless": true,
"maxConcurrentSessions": 5
}
}
Интеграция с моделями, не относящимися к зрению
Сервер MCP преобразует визуальную информацию в структурированные данные, которые может использовать любая модель ИИ, даже не имеющая возможностей зрения:
// The model receives structured data about visual elements
{
"interactiveElements": [
{
"tagName": "button",
"text": "Submit",
"bounds": {"x": 120, "y": 240, "width": 100, "height": 40},
"visible": true
},
// More elements...
]
}
Интеграция CI/CD
Этот сервер MCP включает рабочие процессы GitHub Actions для непрерывной интеграции и развертывания:
- Сборка и тестирование : проверка качества кода
- NPM Publishing : автоматизирует публикацию пакетов
- Docker Publishing : создает и отправляет образы Docker.
- Smithery Publishing : развертывание на платформе Smithery
Лицензия
Данный проект лицензирован по лицензии ISC .