home / mcp / layout detector mcp server

Layout Detector MCP Server

Provides layout analysis by locating assets, measuring spatial relationships, and detecting patterns to enable semantic layout rebuilds.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "katlis-layout-detector-mcp": {
      "command": "layout-detector-mcp",
      "args": []
    }
  }
}

Layout Detector MCP analyzes webpage screenshots to locate known assets, measure their spatial relationships, and identify layout patterns. It outputs structured data that enables AI assistants to rebuild layouts with accurate positioning and semantics, helping you convert visuals into accessible CSS and semantic structures.

How to use

You will use an MCP client to interact with the Layout Detector MCP server. Start the local server, then call its analysis tools to extract positions, patterns, and measurements from a screenshot and a set of asset images. Use the results to drive layout recreation in your UI code.

Typical workflow:

How to install

Prerequisites: Python 3.11 or newer, and a Python packaging tool (pip). Ensure you have network access for package installation.

pip install git+https://github.com/katlis/layout-detector-mcp.git

# Or install locally after cloning
# git clone https://github.com/katlis/layout-detector-mcp.git
# cd layout-detector-mcp
# pip install .

Configuration and usage notes

Configure your MCP client to point at the local Layout Detector MCP server. The server is run as a standard Python-based MCP callable via the layout-detector-mcp command.

# Start the MCP server (run in a separate terminal/session)
layout-detector-mcp

Troubleshooting

If you encounter a module or dependency issue, install the required Python packages, such as OpenCV and supporting libraries, and re-run the server start command.

If the server fails to start, verify Python 3.11+ is available and that your environment has network access to install dependencies.

Examples of usage and returned data

The main analysis tool returns the viewport size, detected pattern, center-related data, and a list of detected elements with their coordinates and dimensions. Use this data to drive absolute positioning or to generate semantic layout structures in your target framework.

Example outputs can include keys such as viewport, pattern type and confidence, center element, and elements with asset names and positions.

Available tools

analyze_layout

Performs full layout analysis including pattern detection to identify structure, positions, and relational data among assets.

find_assets_in_screenshot

Locates known assets within a screenshot and returns their positions and confidence scores.

get_screenshot_info

Returns basic dimensions and metadata about a given screenshot.