# Browser Automation Tools Used in the Reconnaissance Phase: Chrome, Playwright, Puppeteer & Browserbase

> Discover browser automation tools like Chrome Playwright and Puppeteer used in reconnaissance. Leverage AI website cloning with our template selecting your preferred tool.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: tutorial
- Published: 2026-07-05

---

**The ai-website-cloner-template supports four browser automation tools during reconnaissance: Chrome MCP, Playwright MCP, Browserbase MCP, and Puppeteer MCP, with Chrome as the default preference.**

During the reconnaissance phase of the `/clone-website` skill, the agent opens target sites using specialized **browser automation tools** referred to as "browser MCPs." The ai-website-cloner-template provides flexible support for multiple automation libraries, ensuring compatibility across different environments and agent configurations.

## Supported Browser Automation Tools

The template accepts four distinct MCP tools for browser automation. When multiple options are available, the agent prefers Chrome MCP.

### Chrome MCP (Preferred)

**Chrome MCP** provides direct control of a local Chrome instance and serves as the default automation method when available.

### Playwright MCP

**Playwright MCP** uses the Playwright library to drive Chromium, Firefox, or WebKit browsers programmatically.

### Browserbase MCP

**Browserbase MCP** connects to a Browserbase-hosted browser session for cloud-based automation requiring API authentication.

### Puppeteer MCP

**Puppeteer MCP** leverages the Puppeteer library for Chromium automation via the Chrome DevTools Protocol.

## Skill Definition and Configuration

The supported browser automation tools are declared across multiple skill definition files in the repository:

- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** – Central skill definition that lists the supported MCP tools and the reconnaissance workflow (see lines 122-124).
- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** – Windsurf agent configuration mirroring the same tool list.
- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** – Opencode-specific command definition enumerating the browser options.

If none of these tools are detected in the environment, the skill prompts the user to specify an available browser automation method before proceeding.

## Code Implementation Examples

During Phase 1 ("Navigate to the target URL with browser MCP"), agents invoke these tools using the following patterns to capture full-page screenshots.

### Chrome MCP Example

```javascript
// Open Chrome via the MCP helper
await browserMCP.open({ browser: "chrome", url: targetUrl });
await browserMCP.screenshot({ fullPage: true, path: "docs/design-references/full-desktop.png" });

```

### Playwright MCP Example

```javascript
import { chromium } from "playwright";

const pw = await chromium.launch();
const page = await pw.newPage();
await page.goto(targetUrl);
await page.screenshot({ path: "docs/design-references/full-desktop.png", fullPage: true });
await pw.close();

```

### Browserbase MCP Example

```javascript
const client = new BrowserbaseClient({ apiKey: process.env.BROWSERBASE_API_KEY });
const session = await client.startSession({ browser: "chrome" });
await session.goto(targetUrl);
await session.screenshot({ path: "docs/design-references/full-desktop.png" });
await session.close();

```

### Puppeteer MCP Example

```javascript
import puppeteer from "puppeteer";

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto(targetUrl, { waitUntil: "networkidle0" });
await page.screenshot({ path: "docs/design-references/full-desktop.png", fullPage: true });
await browser.close();

```

## Key Documentation Files

Understanding these files helps locate tool configurations and inspection guidelines:

- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** – Central skill definition that lists supported browser MCP tools and the reconnaissance workflow.
- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** – Duplicate skill spec for Windsurf agents containing the same MCP list.
- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** – Opencode-specific command definition enumerating browser tools.
- **[`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md)** – High-level description of the multi-phase pipeline including reconnaissance phase introduction.
- **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)** – Agent guide for performing site inspections once the browser MCP connects.

## Summary

- The ai-website-cloner-template supports **four browser automation tools** during reconnaissance: Chrome MCP, Playwright MCP, Browserbase MCP, and Puppeteer MCP.
- **Chrome MCP** serves as the default preference when multiple tools are available.
- Tool availability is defined in **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)**, [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), and [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md).
- Each tool follows a specific invocation pattern to capture full-page screenshots to `docs/design-references/full-desktop.png`.
- If no MCP tool is detected, the system prompts users to specify their available browser automation method.

## Frequently Asked Questions

### What is the default browser automation tool in the reconnaissance phase?

**Chrome MCP** is the default preference when multiple browser automation tools are available. The agent checks for Chrome first before falling back to Playwright, Browserbase, or Puppeteer alternatives.

### Where are the browser automation tool options defined?

The supported tools are explicitly listed in **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** (lines 122-124), with identical configurations in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) and [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md). These files specify which MCPs the agent can invoke during Phase 1 reconnaissance.

### Can I use cloud-based browser automation with this template?

Yes. The **Browserbase MCP** option connects to Browserbase-hosted sessions, allowing cloud-based automation. This requires setting the `BROWSERBASE_API_KEY` environment variable and using the Browserbase client pattern shown in the implementation examples.

### What happens if no browser automation tool is detected?

If none of the supported MCP tools (Chrome, Playwright, Browserbase, or Puppeteer) are detected in the environment, the skill prompts the user to specify which browser automation method they have available before proceeding with the reconnaissance phase.