claude-eye

An MCP server that gives any AI CLI (Claude Code, Kiro, etc.) the ability to see, interact with, and accurately inspect localhost web apps in a real browser.

Why

AI coding agents normally can't see what's actually rendered in the browser — they guess based on code alone. This MCP server drives a real (headed) Chromium instance via Playwright, so the agent can navigate, click, type, read computed CSS, check accessibility/contrast, and — most importantly — let the user visually pick an exact element by clicking it, instead of the agent guessing which button/input you mean.

Structure

• mcp-browser-server/ — the MCP server (TypeScript, Playwright)
• test-page/ — a small HTML fixture used for testing the tools

Setup

cd mcp-browser-server
npm install
npm run build

Register it in your MCP client config (e.g. ~/.claude/.mcp.json):

{
  "mcpServers": {
    "browser": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-browser-server/dist/index.js"]
    }
  }
}

Tools

Tool	Description
browser_navigate	Navigate to a URL
browser_screenshot	Screenshot the page or one element
browser_get_dom	Get fully rendered HTML
browser_get_accessibility_tree	Get the ARIA tree
browser_query_elements	Find elements + properties by CSS selector
browser_get_computed_styles	Exact computed CSS for one element
browser_get_computed_styles_all	Exact computed CSS for all matches
browser_get_console_logs	Captured console messages / JS errors
browser_get_network_errors	Captured failed requests (4xx/5xx)
browser_clear_logs	Clear captured logs
browser_click	Click an element
browser_type	Type into an input/textarea
browser_hover	Hover an element
browser_scroll	Scroll to (x, y)
browser_wait_for	Wait for a selector to appear
browser_evaluate	Run arbitrary JS in the page
browser_set_viewport	Resize viewport (responsive testing)
browser_check_contrast	WCAG contrast check for a selector
browser_check_all_contrast	WCAG contrast check for all text elements
browser_check_accessibility	Scan for common a11y issues
browser_pick_element	Let the user click an element in the live browser to get a verified-unique CSS selector

Element picker

browser_pick_element opens a hover-highlight overlay in the live browser window. The user clicks the element they mean, and the tool returns a verified-unique CSS selector along with tag, id, class, text, and bounding box — removing the ambiguity of describing "that button" in words when a page has several similar elements.

The browser runs headed (headless: false) so this works.

Testing

cd mcp-browser-server
npm run build
# serve test-page/index.html on http://localhost:7777, then:
node test.mjs