Ubrowser

μBrowser

Control a headless browser with 98% token reduction compared to Playwright MCP and Dev Browser. Uses batch execution, minimal responses, and efficient HTML formatting.

Setup

Start the ubrowser server before using browser tools:

./skills/ubrowser/server.sh &

Wait for "μBrowser MCP server started" message. First run installs dependencies and downloads Playwright Chromium.

Use --headless flag for headless mode:

./skills/ubrowser/server.sh --headless &

Key Optimization: Batch Execution

Always prefer browser_batch for multi-step workflows. This is the key to 98% cost savings.

Instead of:

browser_navigate → browser_type → browser_type → browser_click (4 calls, 4 snapshots)

Use:

{
  "tool": "browser_batch",
  "steps": [
    {"tool": "navigate", "args": {"url": "/login"}},
    {"tool": "type", "args": {"selector": "#email", "text": "user@test.com"}},
    {"tool": "type", "args": {"selector": "#password", "text": "secret"}},
    {"tool": "click", "args": {"selector": "button[type=submit]"}}
  ],
  "snapshot": {"when": "final"}
}

Result: 1 call, 1 snapshot = 80%+ token reduction

Available Tools

browser_navigate

Navigate to a URL.

{"url": "https://example.com"}

browser_click

Click element by ref or selector.

{"ref": "e1"}
{"selector": "button.submit"}

browser_type

Type text into input.

{"ref": "e2", "text": "hello@example.com", "clear": true, "pressEnter": true}

browser_select

Select dropdown option.

{"selector": "#country", "label": "United States"}

browser_scroll

Scroll page or element.

{"direction": "down", "amount": 500}
{"toBottom": true}

browser_snapshot

Get interactive elements with refs (e1, e2, e3...).

{"scope": "#main", "format": "full"}

browser_batch (KEY)

Execute multiple actions, snapshot only at end.

{
  "steps": [
    {"tool": "navigate", "args": {"url": "/search"}},
    {"tool": "type", "args": {"selector": "input[name=q]", "text": "query"}},
    {"tool": "click", "args": {"selector": "button[type=submit]"}}
  ],
  "snapshot": {"when": "final", "scope": ".results"}
}

browser_pages

Manage multiple browser pages.

{"action": "create", "name": "login"}
{"action": "switch", "name": "dashboard"}
{"action": "list"}
{"action": "close", "name": "login"}

browser_inspect

Inspect specific element.

{"selector": ".form", "includeText": true, "depth": 3}

Element References

Snapshots return elements with short refs:

<input id="e1" type="email" placeholder="Email">
<input id="e2" type="password">
<button id="e3">Sign In</button>

Use refs in subsequent commands: {"ref": "e1", "text": "user@test.com"}

Best Practices

1. Always batch - Use browser_batch for multi-step flows
2. Request snapshots sparingly - Default is no snapshot, add snapshot: {include: true} only when needed
3. Scope snapshots - Use scope parameter to limit to relevant DOM region
4. Use refs - Short IDs save tokens vs full selectors
5. Use diff format - After first snapshot, use format: "diff" for changes only

Cost Comparison (Opus 4.5)