1. Conduid
  2. Browser
  3. mcp
MCP server · Browser

mcp

by · github.com/mariojankovic/clueprint

Browser visibility for AI assistants — MCP server + Chrome extension

Unclaimed browser
InstallView source
39Low

Scored 6 months ago · breakdown

About mcp

mcp is an MCP server published by git+mariojankovic in the Browser category: browser visibility for AI assistants — MCP server + Chrome extension.

Install

Install
npx @clueprint/mcp
Claude Code
claude mcp add clueprint -- npx -y @clueprint/mcp
npx
npx -y @clueprint/mcp

This server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.

Tools (2)

auditRun page diagnostics: console errors, network failures, performance metrics

Parameters not published.

inspectCapture element details, computed styles, and run improvement checks

Parameters not published.

Ask AI

✦

Ask AI about mcp

Powered by Claude · Grounded in docs

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

Security checks

  • ✓README presentThe repository ships documentation.
  • !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.

4 checks have not been run yet.

README

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

Build

pnpm install && pnpm run build

Load the extension

  1. Open chrome://extensions/
  2. Enable Developer mode
  3. 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

README copy captured when this server was indexed; it may lag the repository. The original is authoritative.

Questions

About mcp

How do I install mcp?

Run npx @clueprint/mcp, then add the server to your MCP client's configuration.

Is mcp safe to use with an AI agent?

Its trust score is 39 out of 100 (low). It passes 1 of the 2 static security checks run so far; the failures are listed above. It has no ConduID identity yet, so agent calls to it are not receipted.

Is mcp still maintained?

Conduid hasn't recorded a commit date for this repository yet. Check the repository directly for recent activity.