📦

mcp

Browser visibility for AI assistants — MCP server + Chrome extension

0 installs

Trust: 39 — Low

Browser

Installation

npx @clueprint/mcp

Ask AI about mcp

I know everything about mcp. Ask me about installation, configuration, usage, or troubleshooting.

0/500

Loading tools...

Reviews

Documentation

Give your AI coding assistant eyes on the browser.
Select elements, capture regions, record flows — all visible to Claude via MCP.

https://github.com/user-attachments/assets/cef3acc1-df43-49ee-95d7-b18174993902

Install

npx @clueprint/mcp setup

The setup wizard installs the Chrome extension, configures the MCP server, and connects everything to Claude Code. Follow the on-screen instructions to load the extension.

What it does

Instead of describing what you see or copy-pasting HTML, clueprint lets your AI assistant observe the browser directly:

Action	What gets captured
Cmd+Shift+X then click an element	Tag, classes, styles, source file + line (React/Vue/Svelte/Angular), parent context, errors
Cmd+Shift+X then drag a region	Screenshot, elements within bounds, DOM structure, source components, visual analysis
Record a flow (via widget)	Clicks, scrolls, inputs, network requests, console errors, layout shifts
Activity buffer (last 30s)	Background capture of interactions, network, and errors without explicit recording
Run an audit	Console errors, network failures, performance metrics, accessibility issues
Snapshot & diff DOM	Capture DOM state, compare before/after to see what changed

All data flows through MCP so any compatible assistant can access it.

How it works

┌─────────────┐       WebSocket       ┌────────────┐       MCP        ┌─────────────┐
│   Chrome    │ ◄──────────────────► │  MCP       │ ◄──────────────► │  Claude     │
│  Extension  │                       │  Server    │                   │  Code       │
└─────────────┘                       └────────────┘                   └─────────────┘
 Captures DOM,                         Exposes tools                    Calls tools to
 styles, network,                      for browser                      understand what
 console, screenshots                  visibility                       you're seeing

Automated Testing & CI Integration

Clueprint supports headless environments for automated visual regression, accessibility audits, and responsive testing.

Available Tools

Tool	Description
`inspect`	Capture element details, computed styles, and run improvement checks
`audit`	Run page diagnostics: console errors, network failures, performance metrics
`snapshot_dom` / `diff_dom_snapshots`	Track DOM changes between states

Improvement Checks

Enable suggestImprovements to receive structured warnings with source locations:

mcp__clueprint__inspect({ suggestImprovements: true })

Responsive issues detected:

Fixed widths that overflow mobile viewports
Touch targets below WCAG 2.5.5 minimum (44×44px)
Off-screen positioned elements

Accessibility issues detected:

Missing alt text on images
Form inputs without labels
Color contrast violations
Heading hierarchy problems
Keyboard accessibility gaps

All warnings include source file locations when framework detection is available (React, Vue, Svelte, Angular).

CLI

npx @clueprint/mcp setup    # install extension + configure MCP
npx @clueprint/mcp status   # check installation health
npx @clueprint/mcp start    # start MCP server manually

Manual setup

If you prefer to configure things yourself

Build

pnpm install && pnpm run build

Load the extension

Open chrome://extensions/
Enable Developer mode
Click Load unpacked → select packages/chrome-extension/dist

Configure MCP

Add to your Claude Code MCP config:

{
  "mcpServers": {
    "clueprint": {
      "command": "node",
      "args": ["/path/to/clueprint/packages/mcp-server/dist/index.js"]
    }
  }
}

Development

# Watch extension
cd packages/chrome-extension && pnpm run watch

# Watch MCP server
cd packages/mcp-server && pnpm run dev

Requirements

Node.js 18+
Chrome
Claude Code (or any MCP-compatible assistant)

License

MIT

mcp