PicassoWeb Documentation

Documentation / 02

Quick start

Connect PicassoWeb to an MCP client with `npx`, then make a first evidence capture.

View Markdown View on GitHub

Requirements

  • Node.js 20 or newer.
  • An MCP client that can launch a local stdio server.
  • Permission to inspect and reuse the target website and its assets.

The first run downloads Chromium, approximately 130 MB. The browser is cached for later runs.

Add PicassoWeb to your client

Add this server configuration to your MCP client:

json
{
  "mcpServers": {
    "picassoweb": {
      "command": "npx",
      "args": ["-y", "picassoweb"]
    }
  }
}

Restart or reload the client after saving its configuration. The client should expose the PicassoWeb tools after the server starts.

Use an existing Chromium installation

Set CHROME_EXECUTABLE_PATH when Chromium or Chrome is already available locally:

json
{
  "mcpServers": {
    "picassoweb": {
      "command": "npx",
      "args": ["-y", "picassoweb"],
      "env": {
        "CHROME_EXECUTABLE_PATH": "/absolute/path/to/chromium"
      }
    }
  }
}

Make the first capture

Ask the client to call analyze_site with a public URL:

json
{
  "url": "https://example.com",
  "viewportWidth": 1440,
  "viewportHeight": 900,
  "maxElements": 2500,
  "autoScroll": true
}

For a complete local bundle, use create_replication_kit:

json
{
  "url": "https://example.com",
  "outputDir": "/absolute/path/to/example-replication-kit",
  "includeMobile": true
}

The output directory contains desktop and mobile screenshots, original assets, design and layout JSON, an animation inventory, and a REPLICATE.md guide.

Install from source

Use the repository when contributing or testing unreleased changes:

bash
git clone https://github.com/blackridder22/PicassoWeb.git
cd PicassoWeb
npm install
npm run build

Then point the MCP client at the built entry point:

json
{
  "mcpServers": {
    "picassoweb": {
      "command": "node",
      "args": ["/absolute/path/to/PicassoWeb/dist/index.js"]
    }
  }
}

Next