# Browser MCP Tools: Choosing the Right One

<div class="view-markdown-wrapper">
<ViewMarkdown />
</div>

Three MCP servers provide browser control for AI coding agents. Each serves a different purpose.

## Quick Comparison

|                      | **Shiplight**                                      | **Playwright**                           | **Chrome DevTools**                                      |
| -------------------- | -------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------- |
| **Browser**          | Launches new, attaches via CDP, or relay extension | Launches its own Chromium                | Connects to existing Chrome                              |
| **Session state**    | Fresh, persistent profile, or real browser         | Always fresh, no cookies/logins          | Your real session with all logins                        |
| **Page interaction** | Full — navigate, click, type, verify               | Full — navigate, click, type, fill forms | Limited — evaluate JS, click, type                       |
| **Test authoring**   | Purpose-built — interact and build YAML tests      | Manual — infer from snapshots            | Manual — inspect DOM to find selectors                   |
| **Debugging**        | Console logs, network logs, page inspection        | Console messages, network requests       | Full DevTools — network, performance, memory, Lighthouse |

## Shiplight MCP

The most versatile browser MCP. Built for coding agents to fully automate UI development and testing without human intervention. Three ways to get a browser session:

1. **`new_session`** — launch a fresh Chromium instance with optional emulation, extensions, and persistent profiles. See [Browser Options](/reference/browser-options).

2. **`attach_to_browser` with CDP URL** — connect directly to a running browser via Chrome DevTools Protocol:

   ```
   Attach to my browser at ws://localhost:9222/devtools/browser/...
   ```

3. **`attach_to_browser` via Chrome extension relay** — auto-discover tabs in your existing Chrome browser. Requires the [Shiplight Chrome extension](/local/browser-automation#attach-to-existing-browser-chrome-extension) and `SHIPLIGHT_RELAY_PORT` in your `.env`:
   ```
   SHIPLIGHT_RELAY_PORT=15170
   ```

**Use when:** verifying UI changes, writing regression tests, debugging test failures, exploring app behavior — especially in automated workflows where no human is in the loop.

## Playwright MCP

A lightweight alternative for browser interaction. Opens a clean Chromium instance with an accessibility-tree-based interaction model. Good for simple page verification when you don't need test authoring capabilities.

**Use when:** quick page checks in a clean session, simple UI verification.

## Chrome DevTools MCP

Best for **deep debugging and inspection**. Connects to your real Chrome browser with all your cookies, sessions, and extensions intact. Gives access to the full DevTools Protocol — network requests, console messages, performance traces, memory snapshots, Lighthouse audits.

**Use when:** inspecting network traffic, diagnosing performance issues, debugging console errors, auditing a live page.

## Can I Use Multiple?

Yes. All three can be used by AI coding agents autonomously and they complement each other:

- Use **Shiplight** for everything — verifying changes, writing tests, debugging, and connecting to your real browser
- Use **Chrome DevTools** when you need deep DevTools Protocol access (performance traces, memory snapshots, Lighthouse)
- Use **Playwright** as a lightweight fallback when you just need a quick page check

Shiplight is purpose-built for agent-driven workflows; Playwright and Chrome DevTools are general-purpose browser tools that agents can also leverage.