domsight-mcp

Give your AI coding assistant eyes. DOMSight is an MCP server that lets AI tools like Claude Code see and control your browser in real-time.

Your AI can now:

• See console errors without you copy-pasting them
• Take screenshots of your app and tell you what's wrong
• Fill out forms, click buttons, and test full user flows
• Inspect elements, read the DOM, and debug layout issues

Quick Start

1. Install

npm install -g domsight-mcp
npx playwright install chromium

2. Add to your project

Create or edit .mcp.json in your project root:

{
  "mcpServers": {
    "domsight": {
      "command": "domsight-mcp"
    }
  }
}

3. Use it

Start your dev server, open Claude Code, and just ask:

"Connect to localhost:3000 and check for any errors"

"Take a screenshot of the dashboard"

"Fill out the signup form and test if registration works"

"The login button isn't working — can you check why?"

Claude Code will use DOMSight's tools automatically. No copy-pasting, no manual DevTools.

Available Tools

| Tool | Description | |---|---| | connect_to_url | Launch a browser and navigate to a URL | | capture_dom | Capture visible text, console errors, network errors, and rendered HTML | | take_screenshot | Take a full-page screenshot (returned as image) | | inspect_element | Inspect elements by CSS selector — get styles, bounding box, HTML | | click_element | Click any element on the page | | type_text | Type into input fields (forms, search bars, etc.) | | navigate | Navigate to a new URL without reconnecting | | select_option | Select from dropdown menus | | wait_for | Wait for elements to appear or a fixed delay | | get_console_errors | Get all console errors and warnings | | get_network_errors | Get all failed network requests (4xx, 5xx) | | disconnect | Close the browser |

Example: Automated Registration Test

Here's what Claude Code did with DOMSight on a real Next.js + Express app:

1. Connected to localhost:3000/signup
2. Filled 8 form fields (company name, email, password, etc.)
3. Took a screenshot to verify
4. Clicked "Get Started"
5. Waited for OTP page
6. Verified redirect to dashboard

All automated. Zero manual intervention.

Requirements

• Node.js 18+
• Chrome or Chromium (installed via npx playwright install chromium)
• An MCP-compatible AI tool (Claude Code, Cursor, etc.)

How It Works

DOMSight launches a headless Chromium browser via Playwright, connects to your local dev server, and exposes browser capabilities as MCP tools. Your AI assistant calls these tools directly — it can see the page, read errors, interact with elements, and take screenshots.

Your App (localhost:3000)
        |
        v
Playwright Headless Browser
        |
        v
DOMSight MCP Server (stdio)
        |
        v
Claude Code / Cursor / AI Assistant

License

MIT