Getting Started with Browser Automation MCP Servers for OpenCode

If you’re using OpenCode as your AI coding assistant and want to add browser automation capabilities, this guide will help you understand your options. We’ll explore MCP (Model Context Protocol) servers that let OpenCode control a web browser.

What is MCP?

MCP (Model Context Protocol) is like a bridge that lets AI assistants like OpenCode talk to external tools. Think of it as adding superpowers to your AI assistant - in this case, the ability to browse websites, fill forms, take screenshots, and automate web tasks.

Why Do You Need Browser Automation?

Browser automation lets your AI assistant:

  • Visit websites and take snapshots
  • Fill out web forms automatically
  • Click buttons and navigate pages
  • Extract data from websites
  • Test web applications
  • Take screenshots for debugging

Top Beginner-Friendly Alternatives

Here are the best options we found, ranked by ease of use:

Best Overall Choice

Why it’s great:

  • Made by Microsoft - well maintained and reliable
  • Works with multiple browsers (Chrome, Firefox, WebKit)
  • Full-featured - can do almost anything
  • Great documentation

Installation:

npm install -g @playwright/mcp

2. Simple Console MCP (Easiest to Start)

Lightest Weight Option

  • Repository: Available on npm
  • Features: Basic browser console control

Why it’s great:

  • Very simple to set up
  • Minimal dependencies
  • Perfect for learning the basics

Installation:

npm install -g simple-console-mcp

3. Browser MCP

Alternative Option

  • Repository: Various implementations available
  • Features: Standard browser automation

Why consider it:

  • Another solid option
  • Good for specific use cases

4. CDPilot

Chrome DevTools Focused

  • Repository: Available on GitHub
  • Focus: Chrome-specific automation

Why consider it:

  • Direct Chrome DevTools Protocol access
  • Good for advanced users

5. WebDriverIO MCP

For Selenium/WebDriver Users

  • Repository: webdriverio/mcp-server
  • Use Case: If you already know Selenium

Setting Up OpenCode Configuration

After installing your chosen MCP server, you need to configure OpenCode to use it.

Find Your Config Location

OpenCode looks for configuration in:

  • ~/.config/opencode/opencode.json (Linux)

Example Configuration

Here’s how to add Playwright MCP to your config:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"],
      "env": {},
      "description": "Browser automation using Playwright"
    }
  }
}

Alternative - Simple Console MCP Config

{
  "mcpServers": {
    "console": {
      "command": "npx",
      "args": ["-y", "simple-console-mcp"],
      "description": "Simple browser console"
    }
  }
}

Quick Start Guide

Step 1: Install Node.js

Most MCP servers need Node.js. Install it on Linux:

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# Or use nvm (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 20

Step 2: Install Your MCP Server

# Install Playwright MCP
npx -y @playwright/mcp

# Or install Playwright browsers
npx playwright install chromium

Step 3: Configure OpenCode

Create or edit your OpenCode config:

mkdir -p ~/.config/opencode
nano ~/.config/opencode/opencode.json

Add the MCP server configuration.

Step 4: Test It Works

Start a new OpenCode session and try basic commands like:

  • “Take a screenshot of example.com”
  • “Fill in the login form on example.com”

Comparison Table

MCP Server Difficulty Features Best For
Playwright MCP Easy Full Most users
Simple Console MCP Very Easy Basic Beginners
CDPilot Medium Advanced Chrome power users
WebDriverIO MCP Medium Full Selenium users

Troubleshooting

“Command not found” Error

Make sure Node.js is installed:

node --version
npm --version

Browser Won’t Launch

Install browsers explicitly:

npx playwright install chromium

Permission Errors

On Linux, you might need:

sudo apt install -y libnss3 libatk-bridge2.0-0 libgtk-3-0 libdrm2 libxkbcommon0 libgbm1

What’s Next?

Now that you have browser automation:

  1. Try basic commands first
  2. Explore more advanced features
  3. Build automation scripts
  4. Integrate with your projects

Resources

Happy automating!