Server data from the Official MCP Registry
MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright
MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright
This MCP server is well-structured and secure. It uses proper authentication via MCP protocol, validates all inputs with Zod, and avoids dangerous patterns like shell execution or data exfiltration. The server's permissions (network access, browser automation) directly match its stated purpose of analyzing web page layouts. No critical or high-severity vulnerabilities were identified. Supply chain analysis found 1 known vulnerability in dependencies (0 critical, 1 high severity). Package verification found 1 issue.
7 files analyzed Β· 7 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
This plugin requests these system permissions. Most are normal for its category.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-vola-trebla-playwright-spatial-layout-mcp": {
"args": [
"-y",
"playwright-spatial-layout-mcp"
],
"command": "npx"
}
}
}From the project's GitHub README.
An MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright.
AI agents can read the DOM and know a button exists β but they can't see that it's hidden under a sticky header, pushed off-screen by a broken CSS rule, or overlapping another element on mobile. This MCP fixes that by exposing real bounding box mathematics from a live browser.
When an AI agent analyzes a Playwright test failure, it reads the accessibility tree:
"The Submit button exists in the DOM. It has role=button. It is visible."
What it cannot see:
y: 1450px β below the fold on mobileplaywright-spatial-layout-mcp gives the agent coordinates, intersection ratios, and layout shift data so it can reason about the rendered page β not just the markup.
extract_bounding_boxesReturns position, size, z-index, and viewport visibility for one or more elements.
{
"url": "https://your-app.com",
"selectors": ["header", ".hero-cta", "footer"],
"viewport": { "width": 375, "height": 812 }
}
[
{
"selector": ".hero-cta",
"box": { "x": 16, "y": 892, "width": 343, "height": 48 },
"z_index": "auto",
"is_visible": true,
"is_in_viewport": false
}
]
detect_visual_occlusionChecks if one element physically overlaps another by computing bounding box intersection.
{
"url": "https://your-app.com",
"target_selector": ".checkout-button",
"overlay_selector": ".cookie-banner"
}
{
"is_occluded": true,
"intersection_ratio": 0.61,
"occluded_area_px": 4128
}
verify_spatial_relationshipsValidates a set of layout rules and returns pass/fail with a human-readable reason per rule.
Supported rule types: left_of Β· right_of Β· above Β· below Β· contains Β· not_overlapping
{
"url": "https://your-app.com",
"rules": [
{ "type": "above", "element_a": "nav", "element_b": ".hero" },
{ "type": "not_overlapping", "element_a": ".sidebar", "element_b": ".main-content" }
]
}
{
"passed": false,
"results": [
{ "passed": true, "reason": "'nav' bottom (64px) is above '.hero' top (64px)" },
{ "passed": false, "reason": "'.sidebar' and '.main-content' overlap by 12%" }
]
}
compute_viewport_reflowMeasures how element positions and sizes change across multiple viewport sizes.
{
"url": "https://your-app.com",
"selectors": ["nav", ".hero", ".cta-button"],
"viewports": [
{ "width": 375, "height": 812 },
{ "width": 768, "height": 1024 },
{ "width": 1280, "height": 720 }
]
}
[
{
"selector": ".cta-button",
"shifted": true,
"max_delta_x": 442,
"max_delta_y": 318,
"max_delta_width": 897,
"max_delta_height": 0
}
]
npx playwright-spatial-layout-mcp
Or install globally:
npm install -g playwright-spatial-layout-mcp
npx playwright install chromium
{
"mcpServers": {
"playwright-spatial-layout-mcp": {
"command": "npx",
"args": ["-y", "playwright-spatial-layout-mcp"]
}
}
}
"Check if the cookie banner is blocking the checkout button on mobile (375px viewport)"
"Verify that the navigation is above the hero section and the sidebar doesn't overlap the main content"
"Show me which elements shift the most when resizing from desktop to mobile"
"Is the promotional modal covering the primary CTA on iPad viewport?"
MIT Β© vola-trebla
Be the first to review this server!
by Toleno Β· Developer Tools
Toleno Network MCP Server β Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace Β· Developer Tools
Create, build, and publish Python MCP servers to PyPI β conversationally.
by Microsoft Β· Content & Media
Convert files (PDF, Word, Excel, images, audio) to Markdown for LLM consumption