# How to Configure Browser MCP Tools for Website Cloning

> Configure browser MCP tools for website cloning. Install an MCP implementation, start the server on port 9222, and register it using the OpenCode SDK for successful cloning.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-03

---

**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/main//.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/opencode.config.js) file to register the MCP server using the SDK's `addMcpServer` function:

```javascript
// 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:

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

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

```

Run the verification script:

```bash
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:

```bash
/clone-website https://example.com

```

The skill's pre-flight step (line 29 in [`clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```javascript
// 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:

```javascript
// 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/main//.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/main//.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/main//.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/master/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/opencode.config.js).