Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@browser-stream Navigate to google.com and search for 'weather in New York'"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server that collapses browser act-then-observe into single tool calls. Every action returns its consequences — what appeared, disappeared, changed, or shifted — so agents see the effect of each action without a separate observation step.
~50% fewer tool calls. ~90% fewer tokens.
Tool | Description |
| Navigate to a URL. Returns a snapshot of interactive elements. |
| Take a snapshot of the current page. Returns interactive elements with |
| Click an element by ref. Returns consequences. |
| Fill a text input by ref. Returns consequences. |
| Press a key or key combination (e.g. |
| Scroll the viewport or a container. Detects DOM churn and layout shifts. |
| Wait for text to appear or a ref to become visible. Polls every 500ms. |
Related MCP server: Agentic Browser
Every interactive element gets a globally unique ref like @e1, @e5, @e23. Refs are stable across actions — use them to target clicks, fills, and scrolls. When an element leaves the DOM, its ref is never reused.
Refs resolve through a 3-tier system: backendNodeId (fast) → CSS domPath (fallback) → REF_STALE error.
Every action returns what changed:
appeared — new interactive elements in the DOM
disappeared — elements that left the DOM
changed — elements with modified properties (name, value, checked, etc.)
network — Fetch/XHR requests triggered by the action
dom-churn — remove-then-re-add pairs (e.g. React re-rendering an entire list on scroll)
layout-shift — CLS events without recent user input
browser_scroll detects rendering pathologies that are invisible to before/after snapshot diffing:
→ browser_scroll({ ref: "@e12", direction: "down", amount: "page" })
consequences: [
{ type: "dom-churn", churnCount: 36, desc: "DOM churn detected: 36 remove/re-add pairs" },
{ type: "layout-shift", cls: 0.042, shiftCount: 2, desc: "Layout shift: cls=0.042 (2 shifts)" }
]npm install
npm run buildLaunch Chrome automatically:
node dist/index.jsConnect to an existing Chrome instance:
node dist/index.js --cdp-url ws://127.0.0.1:9222/devtools/browser/...Add to claude_desktop_config.json:
{
"mcpServers": {
"browser-stream": {
"command": "node",
"args": ["/path/to/browser-stream/dist/index.js"]
}
}
}npm run dev # watch mode build
npm test # run tests
npm run test:watch # watch mode testssrc/
├── index.ts # CLI entrypoint, MCP server setup
├── types.ts # All shared types and response schemas
├── cdp/
│ └── client.ts # CDP connection (chrome-launcher + chrome-remote-interface)
├── state/
│ ├── ref-map.ts # @e ref registry with 3-tier resolution
│ ├── snapshot.ts # AX tree → ref assignment → compact line format
│ └── differ.ts # Pre/post snapshot diffing → consequences
├── actions/
│ ├── interactable.ts # Scroll-into-view + box model + center point
│ ├── stability.ts # DOM mutation debounce + network tracking + churn detection
│ └── engine.ts # Action orchestration (click, fill, scroll, etc.)
└── tools/
├── actions.ts # MCP tool registrations for actions
└── observation.ts # MCP tool registrations for snapshot/wait_forMIT
Headless browser primitives for AI agents when sites need real JS rendering.
E2LLM gives your AI eyes and hands in a real browser: structured perception (SiFR) plus action.
Autonomous cloud agent tasks: real browser + your tools, structured evidence-backed results.
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.