Opencode Browser Control

БесплатноНе проверен

A Playwright-powered MCP server for browser automation using ARIA snapshots and element refs, enabling LLMs to control Chrome/Edge without CSS selectors.

автор: FileXego

GitHub Embed

Описание

A Playwright-powered MCP server for browser automation using ARIA snapshots and element refs, enabling LLMs to control Chrome/Edge without CSS selectors.

README

Playwright-powered browser automation MCP server for OpenCode.
Controls Chrome/Edge with ARIA accessibility snapshots and numbered element refs — no CSS selectors, no guessing.

Quick Start

1. Install dependencies

npm install -g playwright-core
npx playwright install chromium

2. Configure OpenCode

Add to ~/.config/opencode/opencode.json:

{
  "mcp": {
    "browser-control": {
      "type": "local",
      "command": ["npx", "-y", "opencode-browser-control"],
      "enabled": true
    }
  }
}

3. Restart OpenCode

The browser, browser_snapshot, browser_click, and browser_type tools will be available.

Tools

`browser(action, ...)` — Multiplexed Tool

Action	Description	Key Params
`start`	Launch browser	`headed` (default: true)
`stop`	Close browser	—
`navigate`	Open URL	`url`, `page_id`
`snapshot`	ARIA snapshot with element refs	`page_id`
`click`	Click element by ref	`ref` (e.g. `e42`)
`type`	Type into input by ref	`ref`, `text`, `submit`
`evaluate`	Execute JavaScript	`code`
`screenshot`	Full-page screenshot	`page_id`
`tabs`	List all tabs	—
`close_tab`	Close a tab	`page_id`
`back` / `forward`	Navigate history	—

Shortcut Tools

Tool	Description
`browser_snapshot`	Get ARIA snapshot with `e1, e2, e3...` refs
`browser_click(ref)`	Click element by snapshot ref
`browser_type(ref, text)`	Type into element by snapshot ref

Typical Workflow

1. browser(action="navigate", url="https://example.com")
2. browser_snapshot()            → returns e1: button "Login", e2: textbox "Email", ...
3. browser_type(ref="e2", text="[email protected]")
4. browser_click(ref="e1")
5. browser_snapshot()            → verify result

Browser Support

Auto-detects in priority order:

OS	Priority
Windows	Edge → Chrome
macOS	Chrome → Edge
Linux	Chrome → Edge → Chromium

Falls back to Playwright's bundled Chromium if no system browser is found.

Persistent Profile

A persistent profile is stored at ~/.opencode/browser-profile/{browser}/. Login state, cookies, and local storage persist across sessions. The profile is isolated from your normal browser — it won't interfere with your daily browsing.

Architecture

OpenCode ──MCP(stdio)──▶ index.mjs ──Playwright──▶ Edge/Chrome

Single-file Node.js MCP server. No HTTP middle layer, no browser extensions, no CDP port configuration. Playwright manages the browser lifecycle automatically.

Troubleshooting

Problem	Solution
"playwright-core not found"	`npm install -g playwright-core`
Browser doesn't launch	Install Chromium: `npx playwright install chromium`
SPA navigation breaks refs	Re-run `browser_snapshot()` after navigation — refs are invalidated on page change
Elements not clickable	The snapshot only finds visible elements. Use `browser_evaluate` to scroll or interact with hidden elements

License

MIT

from github.com/FileXego/opencode-browser-control

Установить Opencode Browser Control в Claude Desktop, Claude Code, Cursor

Рекомендуется · одна команда, все IDE

unyly install opencode-browser-control

Ставит в Claude Desktop, Claude Code, Cursor и VS Code — сам разбирается с npx, uvx и сборкой из исходников.

Впервые? Поставь CLI: curl -fsSL https://unyly.org/install | sh

Или настроить вручную

Выполни в терминале:

claude mcp add opencode-browser-control -- npx -y opencode-browser-control

FAQ