Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@sargel Inspect the submit button on myapp.com and test margin-top:20px"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Visual debugging for pixel-perfect web development.
Whether you're implementing designs or debugging CSS issues, this tool gives AI agents the ability to see and fix UI problems visually - just like using browser DevTools. Inspect elements, test CSS changes instantly, and iterate until perfect.
Getting CSS exactly right is hard. Designs don't match implementation, layouts break across browsers, spacing is off by a few pixels. The usual fix: back-and-forth screenshots, trial and error, and "close enough" compromises.
The solution: AI agents that can see your UI, understand what's wrong visually, test fixes instantly, and iterate until pixel-perfect.
Related MCP server: websight
Inspect - AI sees current state: styles, layout, visual issues
Test - Apply CSS edits and see results immediately
Verify - Get screenshot with changes applied
Iterate - Refine until perfect
Apply - Copy working CSS to your code
The key: Test changes visually before touching your source code.
Problem: "The submit button is too close to the form fields"
// Step 1: Inspect current state
{
"tool": "inspect_element",
"arguments": {
"css_selector": ".submit-btn",
"url": "https://myapp.com/form"
}
}
// Returns: Screenshot + computed styles showing margin-top: 4px
// Step 2: Test a fix
{
"tool": "inspect_element",
"arguments": {
"css_selector": ".submit-btn",
"url": "https://myapp.com/form",
"css_edits": {
"margin-top": "16px"
}
}
}
// Returns: Updated screenshot showing improved spacing
// Step 3: Perfect it
{
"css_edits": {
"margin-top": "20px"
}
}
// Returns: Perfect spacing
// Result: Add margin-top: 20px to your CSSBefore and after: Visual iteration until pixel-perfect
inspect_elementParameter | Type | Description |
| string | CSS selector for target element(s) |
| string | Webpage URL to inspect |
| object | Test CSS changes before applying to source |
| array | Focus on: "layout", "colors", "typography", "positioning" |
| number | Max elements when selector matches multiple (default: 10) |
{
screenshot: string; // Base64 PNG with visual highlights
computed_styles: object; // Actual CSS property values
cascade_rules: array; // CSS rules in cascade order
box_model: object; // Margin, padding, border, content dimensions
applied_edits?: object; // CSS edits that were tested (if any)
}Architecture: MCP (Model Context Protocol) server using Chrome DevTools Protocol for DOM inspection and screenshot capture.
Requirements:
Node.js 18+
Chrome/Chromium browser
AI agent with MCP support (Claude Desktop, Continue, etc.)
MIT License - see LICENSE for details.
Made for anyone who believes getting CSS right shouldn't be guesswork
PIXEL-PERFECT CSS DEBUGGING WORKFLOW:
Step 1 - INSPECT: First, analyze the current state by inspecting elements to understand layout, styling, and visual issues. Step 2 - IDENTIFY: Determine what needs to be changed (spacing, alignment, colors, etc.). Step 3 - TEST & VERIFY: Use css_edits parameter to apply changes and instantly see results in returned screenshot. Step 4 - ITERATE: If not perfect, refine css_edits in next call and see updated results immediately. Step 5 - EXTRACT: Copy successful CSS values to your source files.
This tool enables the complete DevTools-like workflow: inspect → edit → verify → iterate → copy. Perfect for debugging layout issues, matching designs exactly, and achieving pixel-perfect UIs through systematic testing.
WHEN TO USE:
"This button is misaligned" → Inspect current position → Test alignment fixes → Perfect spacing
"Colors don't match design" → Inspect current colors → Test design values → Verify exact match
"Layout breaks on mobile" → Inspect responsive behavior → Test CSS fixes → Validate across sizes
Inputs: url (required), css_selector (required), limit, autoZoom, +4 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 1 tool
Only one tool exists, so there are no overlapping purposes. The tool's description clearly defines its role as inspecting elements and applying CSS edits.
The tool name 'inspect_element' follows a clear snake_case verb_noun pattern. With only one tool, naming consistency is trivially perfect.
The server has a single tool, which is on the thin side for a typical server. However, the tool is comprehensive and covers a complete debugging workflow, so it's borderline but not severely lacking.
The tool describes a full workflow: inspect, edit, verify, iterate, copy. This covers the core needs of CSS debugging without apparent gaps.
Visual testing for coding agents: your agent sees every UI change it makes and triages each diff.
Browser-based QA for AI-built software. Test pages with real browsers via agents.
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
Website checker for AI coding agents. Measures your site in a real browser, with evidence.
