# How to Configure Browser MCP for the AI Website Cloner

> Learn to configure browser MCP for AI website cloning. Install and register automation tools like Chrome MCP or Playwright MCP using addMcpServer and verify with getMcpStatus before cloning.

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

---

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

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

```

For Chrome MCP specifically, use this configuration:

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

```javascript
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main//.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main//.opencode/commands/clone-website.md) and [`/.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main//.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main//.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/types.gen.d.ts) specifies local process-based servers, the skill documented in [`/.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main//.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.