MCP Server · npm

WebSketch IR tools, for LLM agents.

Four MCP tools that give LLM agents structured access to web page captures — validate, render to ASCII wireframe, diff two snapshots, or hash for change detection. Never throws. Always composable.

Quick start Read the Handbook

Install

npm install -g websketch-mcp # Then add to Claude Desktop: # { "mcpServers": { "websketch": { "command": "websketch-mcp" } } }

Validate + render

// In your LLM agent — call websketch_validate first const check = await mcp.call("websketch_validate", { capture }); if (!check.ok) throw new Error(check.error); // Then render to ASCII wireframe const wireframe = await mcp.call("websketch_render", { capture }); console.log(wireframe.ascii);

Diff + fingerprint

// Compare two captures for structural changes const delta = await mcp.call("websketch_diff", { before, after }); console.log(delta.added, delta.removed, delta.changed); // Deterministic hash for change detection const { hash } = await mcp.call("websketch_fingerprint", { capture }); // Same page structure → same hash, always

Four tools. One workflow.

Designed to be called in sequence — validate first, then render, diff, or fingerprint.

websketch_validate — call this first

Preflight check for any WebSketch IR capture. Never throws — always returns `{ ok: true }` or `{ ok: false, error: "..." }`. Gate every other tool behind it.

websketch_render — see the structure

Renders a validated capture to a compact ASCII wireframe. Gives LLMs a spatial, text-readable representation of any web page without images or HTML.

websketch_diff — detect changes

Compares two captures and returns added, removed, and changed nodes. Track UI regressions, confirm deployments, or assert layout invariants in agent workflows.

All four MCP tools

Each tool is a single MCP call with typed input and output.

Tool

Input

Output

websketch_validate

capture: WebSketchIR

{ ok: boolean, error?: string }

websketch_render

capture: WebSketchIR

{ ascii: string }

websketch_diff

before: WebSketchIR, after: WebSketchIR

{ added, removed, changed }

websketch_fingerprint

capture: WebSketchIR

{ hash: string }

Quick start

Install globally

npm install -g websketch-mcp

# Or run without installing:
npx websketch-mcp

Add to Claude Desktop

// claude_desktop_config.json
{
  "mcpServers": {
    "websketch": {
      "command": "websketch-mcp"
    }
  }
}

Typical agent workflow

// 1. Capture a page (via websketch-extension or websketch-ir CLI)
// 2. Validate before doing anything
const { ok } = await mcp.call("websketch_validate", { capture });

// 3. Render for the LLM to understand layout
const { ascii } = await mcp.call("websketch_render", { capture });

// 4. After a deploy, diff against the baseline
const delta = await mcp.call("websketch_diff", { before: baseline, after: capture });

// 5. Hash for lightweight change detection
const { hash } = await mcp.call("websketch_fingerprint", { capture });

Run from source

git clone https://github.com/mcp-tool-shop-org/websketch-mcp.git
cd websketch-mcp
npm ci && npm run build
npm link

# Runs as a stdio MCP server
websketch-mcp

Built for agent reliability

Designed to fail gracefully and compose cleanly.

Never throws

websketch_validate always returns a result — never an exception. Agents can safely gate downstream tool calls on `ok: true` without try/catch scaffolding.

Deterministic output

websketch_fingerprint produces the same hash for the same structure, every time. Use it for snapshot testing, cache keys, or regression detection in CI.

Part of the WebSketch ecosystem

Works with captures from websketch-extension (browser) and websketch-ir (CLI). One IR format across all tools — capture anywhere, process everywhere.