UIAnalyzerMCP

UI Analyzer MCP Server is designed to inspect live websites and provide precise, framework-aware fix instructions for AI coding assistants. It uses Playwright to render pages, detects the underlying tech stack (React, Vue, Angular, Tailwind, Bootstrap, etc.), identifies key UI elements like navbars, headers, footers, and heroes, and then proposes targeted CSS selectors and code changes to resolve layout, spacing, and accessibility issues. Available tools include analyze_page for a full UI analysis, get_fix_instructions to translate vague complaints into concrete fixes, get_screenshot to capture visuals (with optional element highlighting), get_element_details for specifics about UI elements, get_accessibility_snapshot for an accessibility tree, get_dom_overview for a simplified DOM view, compare_viewports to compare mobile/tablet/desktop views, and get_tech_stack to detect tech stacks and provide tailored guidance. To use it, run the server with uv and call these tools via the MCP client or integrated IDE integrations that support MCP commands.

Prerequisites:

• Python 3.13 or higher
• uv package manager

Setup steps:

1. Clone the repository: git clone https://github.com/0x-Professor/UIAnalyzerMCP.git cd UIAnalyzerMCP

2. Install dependencies via uv: uv sync

3. Install Playwright browsers (Chromium): uv run playwright install chromium

4. Run the server: uv run python server.py

5. Optional: test with MCP CLI (if needed): uv run mcp run server.py

Notes and tips:

• The MCP server runs under uv and expects a Python server script named server.py at the project root.
• Ensure Playwright browsers are installed in the environment where uv run is executed.
• When configuring client IDEs (VS Code, Cursor, Claude), point to the uv command with the appropriate arguments as shown in the README examples.
• The toolset supports detecting various frameworks and CSS approaches, so results may include framework-specific fix recommendations (e.g., Tailwind classes vs. plain CSS).
• If the server cannot be reached, verify network access and that the working directory path in IDE configurations is correct.
• Use analyze_page for a complete diagnostic including visuals, and then run get_fix_instructions to obtain precise, step-by-step CSS selectors and changes.