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.
README
opencode-browser-control
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="user@example.com")
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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.