Geometric vision for AI agents: bounding boxes, occlusion, viewport reflow
Playwright MCP server is a locally run integration for AI assistants that speak the Model Context Protocol. Geometric vision for AI agents: bounding boxes, occlusion, viewport reflow.
An MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright.
Installation goes through your MCP client rather than a global install: point it at playwright-spatial-layout-mcp on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.
Once Playwright is connected, these are the calls the assistant has available:
extract_bounding_boxes — Returns position, size, z-index, and viewport visibility for one or more elementsdetect_visual_occlusion — Checks if one element physically overlaps another by computing bounding box intersectionverify_spatial_relationships — Validates a set of layout rules and returns pass/fail with a human-readable reason per rulecompute_viewport_reflow — Measures how element positions and sizes change across multiple viewport sizesThis sits in the browser automation group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Playwright's toolset — extract_bounding_boxes, detect_visual_occlusion, verify_spatial_relationships and 1 more — is a fair guide to whether it matches your workflow.
This entry was verified against Playwright's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| extract_bounding_boxes | Returns position, size, z-index, and viewport visibility for one or more elements. |
| detect_visual_occlusion | Checks if one element physically overlaps another by computing bounding box intersection. |
| verify_spatial_relationships | Validates a set of layout rules and returns pass/fail with a human-readable reason per rule. |
| compute_viewport_reflow | Measures how element positions and sizes change across multiple viewport sizes. |
{
"mcpServers": {
"playwright-spatial-layout-mcp": {
"command": "npx",
"args": ["-y", "playwright-spatial-layout-mcp"]
}
}
}Configuration as documented by the project. Restart the client after saving.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
Industrial-strength web extraction — render, scrape, crawl and search entire sites into clean markdown.
The original Chromium automation reference server — simple, screenshot-driven browser control.
Give your coding agent the full DevTools toolbox: traces, network, console, heap snapshots and Lighthouse.
Puppeteer-powered browser control that drives pages from the accessibility tree instead of pixels.
Cloud browsers for AI agents — automation sessions that run in Browserbase's fleet, not on your machine.