Playwright Browser — MCP App

An MCP App that drives a real Chromium browser with Playwright and shows a live, clickable view of the page inside the host (e.g. Claude Desktop). The model can browse for you, and you can take over: click on the live image, type, scroll, and watch the page update in near‑real‑time.

How it works

• Tools (browser_navigate, browser_click, browser_type, browser_press, browser_scroll, browser_back/forward/reload, browser_read_page) drive a shared Playwright page. Each one opens the live panel.

• The panel polls an app‑only browser_screenshot tool (~1/sec) and renders the returned JPEG. Clicks on that image are mapped back to viewport pixels; keystrokes are forwarded to the page. So whatever the model or you does is reflected live.

host calls browser_navigate ──▶ panel renders ──▶ panel polls browser_screenshot ──▶ live JPEG
        ▲                                                                              │
        └──────────────── you click / type in the panel ◀──────────────────────────────┘

Related MCP server: playwright-browser

Setup

npm install
npm run browsers      # one-time: downloads the Chromium Playwright uses
npm run build         # bundles the UI into dist/mcp-app.html

Run

HTTP (for local testing / the basic-host):

npm run serve         # http://localhost:3001/mcp
# or: npm run dev     # rebuilds UI + restarts server on change

Test it with the SDK's basic-host:

cd /path/to/ext-apps/examples/basic-host
npm install
SERVERS='["http://localhost:3001/mcp"]' npm run start   # open http://localhost:8080

stdio (Claude Desktop). Build first, then add to your MCP config:

{
  "mcpServers": {
    "playwright-browser": {
      "command": "npx",
      "args": ["-y", "tsx", "/absolute/path/to/browser-mcp-app/main.ts", "--stdio"]
    }
  }
}

Then ask Claude to "open example.com" and the live panel appears.

Configuration

By default the browser runs headed, so you also get a real Chromium window alongside the in‑host live view. Set HEADLESS=1 to hide it.

Notes & safety

• One browser/page is shared across the whole server; actions are serialized so concurrent calls don't race the page.

• The live view is just a screenshot stream — it never sends page pixels to the model; only browser_read_page returns text to the model, on request.

• Treat it like a real browser: it can log in, submit forms, and follow links. Don't point the model at sites where unintended clicks could be costly.