Integrations

MCP Server

Connect InterfaceGuard directly to Claude Code, Cursor, Windsurf, or any MCP-compatible AI tool. Ask your assistant to analyze a URL and it handles everything — screenshot capture, job submission, results, and fix prompts.

What it does

Works with Claude Code, Cursor, Windsurf, and any MCP-compatible tool
Headless Chromium screenshot capture built in — no extra setup
8 MCP tools covering the full capture → analyze → fix workflow
Claude Code skill (SKILL.md) for guided, best-practice agent sessions
AI-generated coding fix prompts ready to paste as tasks
Issue resolution tracking synced to the backend
Zero-config defaults — only your API key is required
Desktop, tablet, and mobile viewport capture in one call

Prerequisites

Node.js 18 or later
An InterfaceGuard API key — generate one under Settings → API Keys
Playwright Chromium — installed once for screenshot capture (step 1 below)

Installation

Install the MCP server and Chromium

# Install globally (or use npx — no install needed)
npm install -g @cre8tivsystems/interfaceguard-mcp

# Install Chromium for screenshot capture (one-time)
npx playwright install chromium

Configuration

Keep your API key out of version control

Never place UXA_API_KEY in a project-scoped .claude/settings.json that is committed to version control. Use ~/.claude/settings.json (user-level, untracked) instead, or inject via a secret-management tool (op run, direnv, or a CI secret store).

Claude Code

Add to ~/.claude/settings.json (user-level — applies to all projects):

~/.claude/settings.json

{
  "mcpServers": {
    "ux-analyzer": {
      "command": "npx",
      "args": ["-y", "@cre8tivsystems/interfaceguard-mcp"],
      "env": {
        "UXA_API_KEY": "your-api-key"
      }
    }
  }
}

Cursor

Add the same block to ~/.cursor/mcp.json:

~/.cursor/mcp.json

{
  "mcpServers": {
    "ux-analyzer": {
      "command": "npx",
      "args": ["-y", "@cre8tivsystems/interfaceguard-mcp"],
      "env": {
        "UXA_API_KEY": "your-api-key"
      }
    }
  }
}

Windsurf and other MCP clients

Use the same JSON block in your client's MCP configuration file. The server communicates over stdio, which all MCP clients support. Consult your client's documentation for the location of its MCP config file.

Variable	Required	Description
UXA_API_KEY	Yes	InterfaceGuard API key from the web app
UXA_API_URL	No	Analysis service URL. Defaults to the production endpoint. Set to `http://localhost:8080` for local development.

Using the Claude Code skill (SKILL.md)

The MCP server ships with a SKILL.md file — a Claude Code skill that gives the assistant a best-practice workflow for orchestrating UX analysis sessions. With the skill installed, you can simply say “analyze the UX of http://localhost:3000” and Claude Code handles the rest.

Install the skill

Copy SKILL.md from the installed package into your Claude Code skills directory:

# Copy the skill to your global Claude Code skills folder
cp "$(npm root -g)/@cre8tivsystems/interfaceguard-mcp/SKILL.md" ~/.claude/skills/interfaceguard.md

Or add it at the project level by copying it into your project's .claude/skills/ directory (only if that path is in .gitignore).

Agent workflow

When the skill is active, the agent follows this 7-step orchestration automatically:

1. capture_screenshots(url, viewports?, fullPage?)
   → Returns captureId

2. list_projects()
   → Agent picks the project whose repositoryUrl matches
     the current git remote (or asks you to choose)

3. submit_analysis(captureId, projectId, analysisTypes?)
   → Returns jobId

4. get_job_status(jobId)   [polls every ~5 seconds]
   → Waits until status === "completed"

5. get_results(jobId)
   → Returns issues[] and recommendations[]

6. enhance_prompt(issue)
   → Returns a ready-to-paste coding fix prompt

7. resolve_issue(jobId, issueId, resolved: true)
   → Marks the issue fixed on the backend

MCP tools reference

Tool	Description
capture_screenshots	Open a URL in headless Chromium and capture at desktop, tablet, and/or mobile viewports
list_projects	List InterfaceGuard projects available to your API key
submit_analysis	Submit captured screenshots for UX analysis; returns a jobId
get_job_status	Check job progress (0–100%) and completion status
get_results	Fetch the full analysis result: issues, recommendations, and severity summary
enhance_prompt	Generate an AI-powered coding fix prompt for a specific issue
resolve_issue	Mark an issue resolved or reopen it on the backend
cancel_job	Cancel a pending or in-progress analysis job

Analysis types

analysisType value	What it checks
accessibility	WCAG 2.1 AA audit — color contrast, focus management, screen reader support
usability	Ease of use, cognitive load, CTA clarity, task completion
consistency	Visual and interaction consistency across screens
visual-hierarchy	Content prioritization, reading flow, visual weight
color-scheme	Color harmony, contrast ratios, color-blindness risk
layout	Spacing, grid alignment, margin consistency, responsive issues
design-system	Extract design tokens and check component pattern adherence
branding	Brand color and identity consistency across screens
expert-review	Holistic senior designer critique across all dimensions

Goal-based presets

Goal	Recommended analysisTypes
Accessibility audit	["accessibility"]
Full UX review	["accessibility", "usability", "visual-hierarchy", "expert-review"]
Design system extraction	["design-system", "color-scheme", "branding"]
Quick sanity check (default)	["accessibility", "usability", "consistency"]
Pre-launch review	all 9 types

Troubleshooting

UXA_API_KEY environment variable is required

Set UXA_API_KEY in the env block of your MCP client config. The server throws at startup if the variable is missing.

No capture found for captureId "..."

The MCP server process restarted between capture_screenshots and submit_analysis, clearing the in-memory store. Run capture_screenshots again to get a fresh captureId.

Playwright / Chromium not found

Run: npx playwright install chromium. This downloads the browser binary used for screenshot capture.

networkidle timeout on capture

The page may have long-polling or streaming connections that prevent the networkidle event. The server times out after 30 seconds and proceeds with whatever has loaded.

API 401 Unauthorized

Verify UXA_API_KEY is correct. Generate a new key under Settings → API Keys in the InterfaceGuard web app if needed.

Ready to add UX analysis to your AI workflow?

Create a free account to get your API key, then configure the MCP server in your tool of choice.

Start Free Review All Integrations