@different-ai/opencode-browser

OpenCode Browser

Browser automation MCP server for OpenCode.

Control your real Chrome browser with existing logins, cookies, and bookmarks. No DevTools Protocol, no security prompts.

Why?

Chrome 136+ blocks --remote-debugging-port on your default profile for security reasons. DevTools-based automation (like Playwright) triggers a security prompt every time.

OpenCode Browser uses a simple WebSocket connection between an MCP server and a Chrome extension. Your automation works with your existing browser session - no prompts, no separate profiles.

Installation

npx @different-ai/opencode-browser install

The installer will:

• Copy the extension to ~/.opencode-browser/extension/
• Guide you to load the extension in Chrome
• Update your opencode.json with MCP server config

Configuration

Add to your opencode.json:

{
  "mcp": {
    "browser": {
      "type": "local",
      "command": ["bunx", "@different-ai/opencode-browser", "serve"]
    }
  }
}

Then load the extension in Chrome:

• Go to chrome://extensions
• Enable "Developer mode"
• Click "Load unpacked" and select ~/.opencode-browser/extension/

Available Tools

Tool	Description
browser_status	Check if browser extension is connected
browser_navigate	Navigate to a URL
browser_click	Click an element by CSS selector
browser_type	Type text into an input field
browser_screenshot	Capture the page (returns base64, optionally saves to file)
browser_snapshot	Get accessibility tree with selectors + all page links
browser_get_tabs	List all open tabs
browser_scroll	Scroll page or element into view
browser_wait	Wait for a duration
browser_execute	Run JavaScript in page context

Screenshot Tool

The browser_screenshot tool returns base64 image data by default, allowing AI to view images directly:

// Returns base64 image (AI can view it)
browser_screenshot()

// Save to current working directory
browser_screenshot({ save: true })

// Save to specific path
browser_screenshot({ path: "my-screenshot.png" })

Architecture

OpenCode <──STDIO──> MCP Server <──WebSocket:19222──> Chrome Extension
                          │                                   │
                          └── @modelcontextprotocol/sdk       └── chrome.tabs, chrome.scripting

Two components:

• MCP Server (runs as separate process, manages WebSocket server)
• Chrome extension (connects to server, executes browser commands)

Benefits of MCP architecture:

• No session conflicts between OpenCode instances
• Server runs independently of OpenCode process
• Clean separation of concerns
• Standard MCP protocol

Upgrading from v2.x (Plugin)

v3.0 migrates from plugin to MCP architecture:

• Run npx @different-ai/opencode-browser install
• Replace plugin config with MCP config in opencode.json:

- "plugin": ["@different-ai/opencode-browser"]
+ "mcp": {
+   "browser": {
+     "type": "local",
+     "command": ["bunx", "@different-ai/opencode-browser", "serve"]
+   }
+ }

• Restart OpenCode

Troubleshooting

"Chrome extension not connected"

• Make sure Chrome is running
• Check that the extension is loaded and enabled
• Click the extension icon to see connection status

"Failed to start WebSocket server"

• Port 19222 may be in use
• Run lsof -i :19222 to check what's using it

"browser_execute fails on some sites"

• Sites with strict CSP block JavaScript execution
• Use browser_snapshot to get page data instead

Uninstall

npx @different-ai/opencode-browser uninstall

Then remove the extension from Chrome and delete ~/.opencode-browser/ if desired.

Platform Support

• macOS ✓
• Linux ✓
• Windows (not yet supported)

License

MIT

Credits

Inspired by Claude in Chrome by Anthropic.