How to Configure Browser MCP for the AI Website Cloner

To configure browser MCP for the website cloning process, install a supported browser automation tool such as Chrome MCP, Playwright MCP, or Browserbase MCP, register it using the addMcpServer function with a valid McpLocalConfig object, and verify the connection via getMcpStatus before executing the /clone-website command.

The AI Website Cloner from the JCodesMore/ai-website-cloner-template repository relies on a browser MCP (Model Context Protocol) server to automate inspections during the cloning workflow. When you run the /clone-website skill, the system automatically detects available MCP implementations or prompts you to configure browser MCP connection details. Understanding how to properly set up this browser automation layer ensures seamless extraction of screenshots, design tokens, and interaction data.

Step-by-Step Browser MCP Configuration

The repository implements MCP discovery in /.opencode/commands/clone-website.md within the "Pre-Flight" section, where the skill checks for available browser automation tools. Follow these steps to ensure your MCP server is properly registered and accessible.

Install a Browser MCP Implementation

The cloner supports multiple browser MCP implementations, preferring Chrome MCP when available. Choose one of the following options:

• Chrome MCP – Install the official Model Context Protocol extension from the Chrome Web Store. This runs as a headless Chrome process exposing the MCP port on localhost:9222.
• Playwright MCP – Install the Node.js package via npm i -D @playwright/mcp to enable programmatic browser control.
• Browserbase MCP – Create a Browserbase account and obtain a session URL endpoint for remote browser automation.

Start the MCP Server

Each implementation requires a specific startup procedure:

• Chrome MCP: The server starts automatically when the extension is enabled and Chrome runs with remote debugging enabled.

• Playwright MCP: Execute the following command to start the server on port 9222:

  npx playwright mcp start --port 9222

• Browserbase MCP: The platform provides a WebSocket URL endpoint that remains active for the duration of your session.

Register the Server with addMcpServer

According to the McpLocalConfig type defined in /.opencode/node_modules/@opencode-ai/sdk/dist/v2/gen/types.gen.d.ts (lines 1326-1346), you must register your MCP server using the OpenCode SDK's addMcpServer function. Create or modify your opencode.config.js file:

// opencode.config.js
const { addMcpServer } = require('@opencode-ai/sdk');

addMcpServer({
  type: 'local',
  command: ['npx', 'playwright', 'mcp', 'start', '--port', '9222'],
  environment: { NODE_ENV: 'development' },
  enabled: true,
  timeout: 5000,
});

For Chrome MCP specifically, use this configuration:

addMcpServer({
  type: 'local',
  command: ['chrome', '--headless', '--remote-debugging-port=9222', '--disable-gpu'],
  environment: { CHROME_MCP: 'true' },
  enabled: true,
  timeout: 5000,
});

The McpLocalConfig schema requires type: "local" and command: string[], with optional environment variables and timeout values in milliseconds.

Verify MCP Availability

Before running the cloning skill, confirm your MCP server is reachable using the getMcpStatus function:

// scripts/mcp-status.mjs
import { getMcpStatus } from '@opencode-ai/sdk';

(async () => {
  const status = await getMcpStatus();
  console.log('MCP status:', JSON.stringify(status, null, 2));
})();

Run this verification script with node scripts/mcp-status.mjs. A successful response contains an entry with type: "local" and enabled: true, confirming the SDK can communicate with your browser automation layer.

Configuration Schema Reference

The McpLocalConfig interface in /.opencode/node_modules/@opencode-ai/sdk/dist/v2/gen/types.gen.d.ts defines the exact structure required for MCP registration:

• type: Must be "local" for process-based MCP servers
• command: Array of strings representing the executable and arguments
• environment: Optional object containing environment variables passed to the process
• enabled: Boolean flag determining if the server starts automatically
• timeout: Optional milliseconds to wait for server startup (default varies by implementation)

This schema ensures consistent behavior across Chrome MCP, Playwright MCP, and Browserbase MCP implementations.

Troubleshooting Connection Issues

If the skill cannot detect an MCP server during the pre-flight check defined in /.github/skills/clone-website/SKILL.md, the agent will prompt you with a fallback message:

No browser MCP tool was detected. Please provide the command to start one, e.g. chrome --headless --remote-debugging-port=9222 or provide the WebSocket URL of an existing MCP server.

To resolve this:

• Confirm the server is running on localhost:9222 or your specified port
• Check that the enabled flag is set to true in your configuration
• Verify the command array contains the correct executable path
• Ensure firewall rules allow connections to the MCP port

Summary

• Browser MCP is required for the /clone-website skill to automate website inspections and extract design data.
• Install Chrome MCP, Playwright MCP, or Browserbase MCP to provide the browser automation layer.
• Register your server using addMcpServer with a valid McpLocalConfig object containing type: "local", the appropriate command array, and enabled: true.
• Verify connectivity by calling getMcpStatus before executing the cloning command.
• Reference the skill documentation in /.opencode/commands/clone-website.md and /.github/skills/clone-website/SKILL.md for the complete pre-flight requirements.

Frequently Asked Questions

What is Browser MCP and why does the AI Website Cloner need it?

Browser MCP (Model Context Protocol) is a standardized interface that allows AI agents to control browser automation tools like Chrome, Playwright, or Browserbase. The AI Website Cloner uses this protocol to capture screenshots, extract CSS design tokens, and record user interactions during the inspection phase of the cloning process. Without a configured browser MCP, the /clone-website skill cannot access the target website's visual and structural data.

Which browser MCP implementations are officially supported?

The repository supports Chrome MCP (preferred), Playwright MCP, Browserbase MCP, and Puppeteer MCP. According to the pre-flight checklist in /.opencode/commands/clone-website.md, the skill automatically attempts to discover these implementations in that order. If none are found, the system falls back to manual connection prompt mode.

How do I verify my MCP configuration is working correctly?

Create a verification script using the getMcpStatus function from the @opencode-ai/sdk package. Run this script before executing the cloning command to confirm the SDK recognizes your McpLocalConfig registration. The status response should show your server with type: "local" and enabled: true, indicating successful communication between the AI agent and your browser automation tool.

Can I use a remote browser MCP server instead of a local one?

Yes, while the McpLocalConfig type in types.gen.d.ts specifies local process-based servers, the skill documented in /.github/skills/clone-website/SKILL.md accepts WebSocket URLs during the fallback prompt. If the automatic discovery fails, provide the remote endpoint (e.g., ws://remote-server:9222) when prompted, or configure the command array to launch a tunnel or remote connection script.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}