How to Configure Browser MCP Tools for Website Cloning

Configure browser MCP tools for website cloning by installing a supported MCP implementation, starting the server on port 9222, and registering it via the OpenCode SDK's addMcpServer function with a valid McpLocalConfig object.

The AI Website Cloner template by JCodesMore automates website inspection and cloning through Model Context Protocol (MCP) browser automation. When you invoke the /clone-website skill, the system checks for available browser MCP tools and uses them to capture screenshots, extract design tokens, and perform interaction sweeps.

Understanding the MCP Discovery Mechanism

The /clone-website skill implements an automatic discovery system that prefers Chrome MCP and falls back to alternative agents like Playwright MCP, Browserbase MCP, or Puppeteer MCP.

How Discovery Works

According to the source code in [/.opencode/commands/clone-website.md](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.opencode/commands/clone-website.md), the skill executes a pre-flight check that calls the OpenCode SDK's addMcpServer and getMcpStatus helpers. The SDK searches for a local MCP configuration defined by the McpLocalConfig type.

Configuration Schema Requirements

The McpLocalConfig type is defined in /.opencode/node_modules/@opencode-ai/sdk/dist/v2/gen/types.gen.d.ts (lines 1326-1346). The configuration object requires:

• type: Must be set to "local"
• command: Array of strings representing the shell command to launch the server
• environment: Optional object for environment variables
• timeout: Optional number representing the connection timeout in milliseconds
• enabled: Boolean indicating whether the server starts automatically

Step-by-Step Configuration Guide

1. Install a Browser MCP Implementation

Choose one of the supported browser MCP implementations:

• Chrome MCP: Install the official Model Context Protocol extension from the Chrome Web Store
• Playwright MCP: Install via npm: npm i -D @playwright/mcp
• Browserbase MCP: Obtain a Browserbase account and API key from the Browserbase platform

2. Start the MCP Server

Each implementation requires a specific startup method:

• Chrome MCP: The server starts automatically when the extension is enabled in Chrome
• Playwright MCP: Run the command: npx playwright mcp start --port 9222
• Browserbase MCP: Use the WebSocket URL provided by the Browserbase dashboard

3. Register the Server with OpenCode SDK

Create or modify your opencode.config.js file to register the MCP server using the SDK's addMcpServer function:

// 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,
});

The fields correspond exactly to the McpLocalConfig interface defined in the OpenCode SDK types.

4. Verify MCP Connectivity

Before running the clone operation, verify that the SDK can connect to your MCP server:

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

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

Run the verification script:

node scripts/mcp-status.mjs

A successful response shows an entry with type: "local" and enabled: true.

5. Execute the Clone Command

With the MCP server running and registered, invoke the skill:

/clone-website https://example.com

The skill's pre-flight step (line 29 in clone-website.md) will detect the browser automation capability and proceed with the inspection phase.

Configuration Examples for Different Implementations

Chrome MCP Setup

Register Chrome MCP as a headless process with remote debugging:

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

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

Playwright MCP Setup

Configure Playwright MCP with explicit port binding:

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

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

Troubleshooting Connection Issues

If the skill cannot locate an MCP server during the pre-flight check documented in [/.github/skills/clone-website/SKILL.md](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.github/skills/clone-website/SKILL.md), the agent prompts you to provide connection details manually.

When prompted, supply either:

• The command string to launch the server (e.g., chrome --headless --remote-debugging-port=9222)
• The WebSocket URL of an existing MCP server (e.g., ws://localhost:9222)

The skill automatically attempts auto-discovery on localhost:9222 before requesting manual input.

Summary

• Browser MCP tools are required for the AI Website Cloner to inspect target websites and capture design assets.
• Chrome MCP is the preferred implementation, with automatic fallback to Playwright MCP, Browserbase MCP, or Puppeteer MCP.
• Configuration requires creating a McpLocalConfig object via addMcpServer with the correct command array, environment variables, and timeout settings.
• Verification uses the getMcpStatus function from the @opencode-ai/sdk package to confirm connectivity before running /clone-website.
• Manual fallback is available if automatic discovery fails on the default port 9222.

Frequently Asked Questions

What happens if no browser MCP tool is detected?

According to the skill documentation in [/.github/skills/clone-website/SKILL.md](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.github/skills/clone-website/SKILL.md), the agent will prompt you to supply either a startup command or a WebSocket URL for an existing MCP server. The skill cannot proceed with website cloning without an active browser automation endpoint.

Can I use Browserbase MCP instead of local Chrome?

Yes. The discovery mechanism in [/.opencode/commands/clone-website.md](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.opencode/commands/clone-website.md) explicitly lists Browserbase MCP as a supported fallback. Configure it by providing the Browserbase WebSocket URL in your opencode.config.js or when prompted by the agent.

Where is the MCP configuration schema defined?

The TypeScript interface McpLocalConfig is defined in /.opencode/node_modules/@opencode-ai/sdk/dist/v2/gen/types.gen.d.ts at lines 1326-1346. This type defines the required fields: type, command, environment, timeout, and enabled.

Does the AI Website Cloner support automatic MCP discovery?

Yes. The SDK automatically checks for MCP servers running on localhost:9222 before requesting manual configuration. If you start Chrome MCP or Playwright MCP on the default port, the /clone-website skill will connect without requiring explicit registration in opencode.config.js.

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