Integrations

VS Code Extension

Capture screenshots, run UX analysis, and browse actionable recommendations — all from inside VS Code, without switching windows.

Install from VS Code Marketplace

What it does

Capture screenshots at desktop, tablet, and mobile viewports
Submit analysis jobs and track progress in real time
View results in an interactive panel with severity filtering
Get copy-paste code snippets for each recommendation
9 analysis types: accessibility, usability, visual hierarchy, and more
Secure API key storage via VS Code SecretStorage

Requirements

VS Code 1.70 or later
Node.js — needed to run the Playwright MCP server locally
An InterfaceGuard API key — generate one under Settings → API Keys

Installation

Install the extension

Install directly from the VS Code Marketplace, or open the Extensions view in VS Code Ctrl+Shift+X / Cmd+Shift+X, search for InterfaceGuard, and click Install.

Alternatively, download the .vsix file, click the ⋯ menu in the Extensions view, and select Install from VSIX….

Set up the Playwright MCP server

The extension uses a local Playwright server to capture screenshots. Run these commands once:

# Install Playwright and its browsers
npm init playwright@latest
npx playwright install

# Start the screenshot server on port 3000
npx playwright run-server --port 3000

Keep this server running while you use the extension. Restart it any time with npx playwright run-server --port 3000.

Configure the extension

Use the built-in commands — open the Command Palette Ctrl+Shift+P / Cmd+Shift+P and run:

InterfaceGuard: Configure API Settings — enter your API key
InterfaceGuard: Configure Playwright MCP — verify the MCP endpoint (default: http://localhost:3000)

Or open Settings Ctrl+, and search “InterfaceGuard” to configure all options manually:

// settings.json (example values)
{
  "ux-analyzer.apiUrl": "",
  "ux-analyzer.mcpEndpoint": "http://localhost:3000",
  "ux-analyzer.defaultBrowser": "chromium",
  "ux-analyzer.defaultViewports": [
    { "width": 1920, "height": 1080, "deviceType": "desktop" },
    { "width": 768,  "height": 1024, "deviceType": "tablet"  },
    { "width": 375,  "height": 667,  "deviceType": "mobile"  }
  ]
}

Usage

Open the Command Palette and run commands in order, or click the 🔭 InterfaceGuard status bar item for a quick-pick menu.

InterfaceGuard: Capture Screenshots

Enter your app URL, select viewports (desktop, tablet, mobile), and wait for capture to complete.

InterfaceGuard: Analyze Application

Choose analysis types (accessibility, usability, consistency, etc.) and submit the job. Status updates appear in the status bar.

InterfaceGuard: Show Results

Opens the interactive results panel. Filter issues by severity or category, expand cards for recommendations and code snippets.

The Activity Bar panel (InterfaceGuard icon) shows the Analysis Results view and provides toolbar buttons for each command.

Troubleshooting

Cannot connect to Playwright MCP

Make sure the Playwright MCP server is running. Try: npx playwright run-server --port 3000. Check that the MCP endpoint in settings matches the port.

API key validation failed

Verify the key is correct in Settings → API Keys. If the key was recently regenerated, re-run "InterfaceGuard: Configure API Settings" to update it.

Screenshot capture failed

Ensure the URL is reachable from your machine. Try switching to a different browser (chromium, firefox, or webkit) via "InterfaceGuard: Configure Playwright MCP". Check the Output panel (View → Output → InterfaceGuard) for detailed errors.

No results showing

Wait for analysis to complete (watch the status bar). Run "InterfaceGuard: Show Results" manually. Check the Output panel for errors.

Ready to analyze your interface?

Create a free account to get your API key, then install the extension.

Start Free Review All Integrations