Browser MCP Tools Supported for Website Inspection: Complete Guide

The AI Website Cloner template supports Chrome MCP, Playwright MCP, Browserbase MCP, and Puppeteer MCP for automated website inspection, cascading through a preference-based fallback system when primary tools are unavailable.

The JCodesMore/ai-website-cloner-template leverages a Browser-MCP (Model Context Protocol) layer to automate the inspection and cloning of target websites. Understanding which browser MCP tools are supported for website inspection is essential for configuring the optimal automation pipeline, whether running locally with Chrome DevTools or remotely via hosted services.

Supported Browser MCP Tools

The template recognizes four primary MCP-compatible browser automation tools, evaluated in strict priority order. Each tool offers distinct capabilities for DOM traversal, CSS extraction, and network monitoring during the cloning process.

Chrome MCP

Chrome MCP provides direct integration with Chrome’s DevTools protocol, offering the most robust inspection capabilities including DOM traversal, CSS extraction, and network monitoring. According to the source code in /.windsurf/workflows/clone-website.md (line 26), this is the preferred option when available because it grants native access to Chrome’s internals.

Playwright MCP

Playwright MCP utilizes Microsoft Playwright’s cross-browser automation framework (supporting Chromium, Firefox, and WebKit) wrapped with MCP-compatible interfaces. The system selects this option when Chrome MCP is not detected but Playwright is installed, as documented in /.opencode/commands/clone-website.md (line 29).

Browserbase MCP

Browserbase MCP connects to the Browserbase hosted browser-automation service via MCP, enabling remote, containerized browsing sessions. This tool is chosen when a remote Browserbase session is explicitly configured in your environment.

Puppeteer MCP

Puppeteer MCP wraps Google Puppeteer (Chromium automation) with MCP calls. The template falls back to Puppeteer when both Chrome MCP and Playwright MCP are unavailable on the system.

Custom MCP Tools

The documentation indicates that any MCP-compatible tool following the same interface can be added, such as Selenium MCP or custom headless browsers. When none of the standard tools are present, the system prompts the user to specify which browser tool they have and how to connect it.

MCP Tool Selection Hierarchy

The selection logic follows a cascading priority chain defined across multiple configuration files. The preference order is strictly enforced: Chrome MCP → Playwright MCP → Browserbase MCP → Puppeteer MCP → Custom Tool.

This hierarchy is encoded in workflow definitions and command specifications like /.windsurf/workflows/clone-website.md (line 26) and /.opencode/commands/clone-website.md (line 29).

// Pseudo-code for selecting a browser MCP tool
type MCPTool = 'chrome' | 'playwright' | 'browserbase' | 'puppeteer' | 'custom';

async function selectMCPTool(): Promise<MCPTool> {
  if (await isChromeMCPAvailable()) return 'chrome';
  if (await isPlaywrightMCPAvailable()) return 'playwright';
  if (await isBrowserbaseMCPAvailable()) return 'browserbase';
  if (await isPuppeteerMCPAvailable()) return 'puppeteer';
  // Prompt the user for a custom tool if none are auto-detected
  const tool = await askUserForMCPTool(); 
  return tool as MCPTool;
}

Configuration Files and Documentation

Tool specifications reside across multiple integration points to ensure consistency across AI backends. The following files define the supported browser MCP tools:

• /.windsurf/workflows/clone-website.md (line 26) — Defines the candidate tools and preference order for Windsurf IDE integration.
• /.opencode/commands/clone-website.md (line 29) — Repeats the same tool list for OpenCode-compatible command versions.
• .github/skills/clone-website/SKILL.md and .claude/skills/clone-website/SKILL.md — Embed the instruction block across different AI backends.
• docs/research/INSPECTION_GUIDE.md — Provides the high-level checklist for what to capture during Chrome MCP inspection.
• CHANGELOG.md (line 69) — Notes the addition of Chrome MCP integration specifically for design-token extraction.
• scripts/sync-agent-rules.sh and scripts/sync-skills.mjs — Regenerate platform-specific command and skill files when the tool definitions are updated.

Implementation Details

The actual detection and launch sequence abstracts underlying browser APIs through the @opencode-ai/sdk MCP client. Below is the representative implementation pattern for executing website inspection once a tool is selected:

// Example usage inside the cloning workflow
async function runInspection(url: string) {
  const tool = await selectMCPTool();
  const browser = await launchMCPBrowser(tool, { headless: false });
  await browser.goto(url);
  // …perform scroll-sweep, responsive-sweep, asset enumeration, etc.
}

Core utilities that may be inspected by these MCP tools during cloning include src/lib/utils.ts and src/components/ui/button.tsx, which contain the design tokens and component structures the system attempts to replicate.

Summary

• Chrome MCP is the primary choice for website inspection, offering native DevTools protocol access.
• Playwright MCP serves as the first fallback, supporting cross-browser automation via Chromium, Firefox, and WebKit.
• Browserbase MCP enables remote hosted browsing when local browsers are not available.
• Puppeteer MCP acts as the secondary local fallback for Chromium-based automation.
• Tool selection priorities are hardcoded in /.windsurf/workflows/clone-website.md (line 26) and related skill definition files.

Frequently Asked Questions

What is the preferred browser MCP tool for website inspection?

Chrome MCP is the preferred tool because it provides direct access to Chrome’s DevTools protocol, enabling the most robust inspection capabilities including precise DOM traversal and network monitoring. The system checks for Chrome MCP availability first before evaluating other options.

Can I use custom browser automation tools with this template?

Yes, the template supports extensibility through custom MCP-compatible tools. If none of the standard options (Chrome, Playwright, Browserbase, or Puppeteer) are detected, the system prompts the user to specify their custom tool and connection parameters, as indicated by the "…etc." notation in the workflow definitions.

Where is the MCP tool preference order defined?

The preference order is defined in /.windsurf/workflows/clone-website.md at line 26 and mirrored in /.opencode/commands/clone-website.md at line 29. These files are synchronized across platform-specific skill directories (.github/skills/, .claude/skills/) via the scripts/sync-skills.mjs script to maintain consistency.

How does the template handle cases when no MCP tools are detected?

When no standard MCP tools are auto-detected, the template invokes askUserForMCPTool() to prompt for manual configuration. This ensures the cloning workflow can still proceed with user-specified custom browser automation tools that follow the MCP interface.

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