@ebowwa/mcp-browser

MCP server for browser automation via dev-browser.

This is an optional extension - Coder works without it. Install only if you need browser automation.

Features

• Optional dependency - dev-browser is a peer dependency, not required
• Graceful degradation - Coder continues if dev-browser isn't installed
• Full Playwright API - Navigate, click, fill, screenshot, evaluate
• AI-friendly snapshots - page.snapshotForAI() for structured page state
• Persistent pages - Browser tabs persist across tool calls

Installation

1. Install dev-browser (required for browser automation)

npm install -g dev-browser
dev-browser install  # Installs Playwright + Chromium

2. Add to Coder's MCP config

Add to ~/.claude.json:

{
  "mcpServers": {
    "browser": {
      "command": "mcp-browser",
      "type": "stdio"
    }
  }
}

Tools

| Tool | Description | |------|-------------| | browser_status | Check if dev-browser is available | | browser_help | Get dev-browser CLI help | | browser_navigate | Navigate to URL | | browser_get_url | Get current URL | | browser_get_title | Get page title | | browser_list_pages | List all browser tabs | | browser_close_page | Close a named page | | browser_click | Click element by selector | | browser_fill | Fill form field | | browser_type | Type text (appends) | | browser_press | Press keyboard key | | browser_wait_for_selector | Wait for element | | browser_snapshot | Get AI-friendly page state | | browser_screenshot | Take screenshot | | browser_evaluate | Run JavaScript in page | | browser_execute_script | Run raw dev-browser script |

Usage Examples

Navigate and interact

User: "Go to github.com and search for 'mcp'"

→ browser_navigate({ url: "https://github.com" })
→ browser_fill({ selector: "[name='q']", value: "mcp" })
→ browser_press({ key: "Enter" })
→ browser_snapshot({})

Get AI-friendly page state

→ browser_snapshot({ pageName: "main", depth: 10 })

Returns:
{
  "full": "# GitHub\n\n## Search Results\n\n- mcp (Model Context Protocol)\n- ...",
  "incremental": "..."
}

Take screenshot

→ browser_screenshot({ filename: "search-results.png" })

Returns:
{
  "success": true,
  "data": { "path": "~/.dev-browser/tmp/search-results.png" }
}

Execute custom script

→ browser_execute_script({
    script: `
const page = await browser.getPage("main");
await page.goto("https://example.com");
const links = await page.$$eval('a', els => els.map(e => e.href));
console.log(JSON.stringify(links));
`
  })

When dev-browser is NOT installed

Coder gracefully handles the missing dependency:

→ browser_navigate({ url: "https://example.com" })

Returns:
{
  "success": false,
  "error": "dev-browser is not installed",
  "hint": "Install with: npm install -g dev-browser && dev-browser install"
}

Coder continues to work with all other tools - browser automation is simply unavailable.

Architecture

Coder
├── MCP Client
│   └── connects to → mcp-browser (optional)
│                      └── wraps → dev-browser CLI
│                                  └── QuickJS WASM sandbox
│                                      └── Playwright API

Why Optional?

• Not all tasks need browsers - Most coding tasks are file/code operations
• Smaller footprint - No browser dependencies in core Coder
• User choice - Install only what you need
• CI/CD friendly - Headless environments may not want browser overhead

License

MIT