@drisp/browser-mcp — formerly Agent Web Interface

The browser interface AI agents deserve.

Browser MCP is an MCP server that gives agents a compact, semantic view of any web page — not 40,000 bytes of DOM they can't reason over.

  • Stable element IDs
  • Token-efficient snapshots
  • No raw DOM noise
$ npx @drisp/browser-mcp install
View on GitHubView on npm
  • Open source
  • MIT licensed
  • Works with Claude, GPT-4o, Gemini, Ollama
  • Requires Node.js + Chrome

The problem

Browser automation is easy for scripts. Hard for agents.

Current tools dump thousands of tokens of noise into the agent's context. Tasks fail mid-flow. Selectors break on the next deploy. And there's no stable way to reference an element across calls.

×

Raw DOM

<div class="wrapper xyz-123">
  <div class="inner" data-v="8">
    <button type="submit"
      class="btn btn-primary
      x-4 y-2 md:x-6">
      Submit
    </button>
  </div>
</div>

40,000+ bytes of noise. Brittle class selectors. Context exhaustion.

×

Accessibility tree

RootWebArea "Checkout"
  generic ""
    generic "wrapper xyz-123"
      generic "inner"
        button "Submit"
          StaticText "Submit"

Better, but still verbose. No stable IDs to reference across calls.

✓

Browser MCP

<page title="Checkout">
  <region role="main">
    <button
      eid="btn-1"
      label="Submit" />
  </region>
</page>

Compact. Stable eid. Only what the agent needs.

Live example

See what your agent sees.

Every MCP tool call returns a structured semantic snapshot — not raw DOM.

@drisp/browser-mcp

input → tool call

{
  "tool": "navigate",
  "params": {
    "url": "https://example.com/checkout"
  }
}

output → snapshot

<page url="https://example.com/checkout"
      title="Checkout">
  <region role="main">
    <heading level="1">Your Cart (3 items)</heading>
    <list>
      <item eid="p1">Widget Pro — $29.99</item>
      <item eid="p2">Widget Lite — $9.99</item>
    </list>
    <button eid="btn-checkout"
            label="Proceed to Payment" />
  </region>
</page>

The agent references btn-checkout by eid across every call that follows — no selector hunting, no re-finding elements after navigation.

How it works

Five steps. One install command.

1

Agent calls a browser tool via MCP

navigate, click, find, type, screenshot…

2

Browser MCP intercepts the tool call

A local server launched with npx — no daemon to manage

3

Puppeteer drives Chrome

Local Chrome via CDP — real rendering, full JS

4

Page reduced to semantic XML

Headings, buttons, links, forms — no raw markup

5

Agent receives stable eids

Reference the same button call after call. No re-finding elements.

Browser MCP runs locally and needs Node.js and Chrome. Workflows dispatched on Drisp run it on the runner for you.

Features

What agents get that Playwright doesn't.

Semantic snapshots

Regions, headings, links, buttons — not a wall of DOM. Agents reason over structure, not markup.

Stable element IDs

Every interactive element gets a stable eid. Reference it across 10 tool calls — CSS classes change on the next deploy, eid does not.

Token-efficient

Snapshots return only the structure an agent needs to act — not the full page on every call. Longer task horizons. Lower token spend.

Network inspection

See every request that followed an action — verify form submissions, trace auth flows, and debug redirects without a DevTools tab.

Canvas inspection

When the page is a canvas, chart, or image, capture a screenshot or read canvas data directly. Semantic snapshots where they work; pixels where they do not.

Model-agnostic

Works with any MCP-compatible agent: Claude, GPT-4o, Gemini, local models. No vendor lock-in.

What people build

Agents that act on the live web.

Web research agents

Navigate, read, and extract from live pages — pricing monitors, news aggregators, and competitor trackers that work on real rendered content, not stale APIs.

QA and flow automation

Walk through sign-up, checkout, and onboarding flows. Fill forms, verify responses — without the fragile CSS selectors that break Playwright suites.

Data entry and form filling

Log in, find fields by their label, and submit — even on pages where the DOM shifts between visits.

Part of Drisp

The browser layer for Drisp workflows.

Workflows that exercise a real UI — end-to-end test builders, QA flows, form automation — drive the browser through Browser MCP. Assign the issue, and the harness driving it can see and act on the running page.

  • Ships as the browser MCP server in Drisp workflow plugins
  • Skills in the same plugin get its tools automatically
  • Works identically locally, in CI, and on Drisp Cloud
Browse workflowsRead the docs

FAQ

Questions agents (and their developers) ask.

What is @drisp/browser-mcp?

Browser MCP is an open-source MCP server that gives AI agents a compact, semantic view of any web page. Instead of raw DOM or verbose accessibility trees, it returns structured XML snapshots with stable element IDs (eids) that agents can reference across tool calls.

What happened to Agent Web Interface (AWI)?

Agent Web Interface joined Drisp and is now published as @drisp/browser-mcp. Same server, same semantic snapshot format, same MIT license — under a new name and npm scope. Existing agent-web-interface installs keep working, but new installs should use @drisp/browser-mcp.

How is Browser MCP different from Playwright or Puppeteer MCP servers?

Playwright and Puppeteer were built for deterministic scripts, so their MCP wrappers hand an agent raw DOM or long accessibility dumps that flood its context. Browser MCP returns only the semantic structure an agent needs — headings, buttons, links, forms — with stable eids, so tasks run longer on far fewer tokens.

How does Browser MCP reduce token usage?

A typical page is 40,000+ bytes of DOM. Browser MCP reduces it to a compact snapshot — often under 1 KB — containing only the interactive and structural elements an agent needs to act. That means fewer tokens per step and longer multi-step tasks before the context fills up.

Which AI models and agents does Browser MCP work with?

Any MCP-compatible agent — Claude, GPT-4o, Gemini, and local models via Ollama. Browser MCP speaks the Model Context Protocol directly, so there is no model-specific glue code and no vendor lock-in.

Is Browser MCP free and open source?

Yes. Browser MCP is MIT-licensed and developed in the open on GitHub, so you can self-host it for free. Drisp workflows that exercise real UIs use it as their browser layer.

Do I need to run a browser locally?

The local server drives a real Chrome instance through Puppeteer, so you need Node.js and Chrome installed. Workflows dispatched on Drisp run it on the runner for you.

One command. Agents browsing.

$ npx @drisp/browser-mcp install

Open source · MIT licensed · Works with Claude, GPT-4o, Gemini, and any MCP-compatible agent.