MCP Quickstart

Connect your AI assistant to the VertaaUX MCP Server and get your first AI-suggested accessibility fix in 5 minutes

Get your first AI-suggested fix for a UX issue in under 5 minutes.

Goal: By the end of this guide, you'll have an AI-generated code patch for a real accessibility issue.

5-Minute Guide

Install MCP Server

Install the VertaaUX MCP Server globally:

npm install -g @vertaaux/mcp-server

Verify installation:

npx @vertaaux/mcp-server --version

Configure Claude Desktop

Open your Claude Desktop configuration file:

open ~/Library/Application\ Support/Claude/claude_desktop_config.json

Or create it if it doesn't exist:

mkdir -p ~/Library/Application\ Support/Claude
touch ~/Library/Application\ Support/Claude/claude_desktop_config.json

Open in File Explorer:

%APPDATA%\Claude\claude_desktop_config.json

Add the VertaaUX server configuration:

claude_desktop_config.json

{
  "mcpServers": {
    "vertaaux": {
      "command": "npx",
      "args": ["@vertaaux/mcp-server"],
      "env": {
        "VERTAAUX_API_KEY": "vx_live_your_key_here"
      }
    }
  }
}

Replace vx_live_your_key_here with your actual API key.

Restart Claude Desktop

Completely quit Claude Desktop (not just close the window) and reopen it.

macOS: Cmd+Q then reopen Windows: Right-click tray icon > Quit, then reopen

This loads the new MCP server configuration.

Run Your First Audit

In Claude Desktop, ask:

"Audit https://example.com for UX and accessibility issues"

Claude will call the audit_url tool and show you the results:

Audit completed for https://example.com

Summary:
- 3 critical issues
- 5 serious issues
- 8 moderate issues

Top issues:
1. [Critical] Button missing accessible name
2. [Critical] Form input lacks label association
3. [Serious] Color contrast ratio 3.2:1 (needs 4.5:1)

The first audit may take 30-60 seconds as the server initializes.

Get an AI-Suggested Fix

Ask Claude to suggest a fix for one of the findings:

"Suggest a fix for the button missing accessible name issue"

Claude calls suggest_fix and returns a code patch:

// Finding: Button missing accessible name
// Confidence: HIGH (92%)

// Search (original code):
<button onClick={handleSubmit}>
  <Icon name="check" />
</button>

// Replace with:
<button onClick={handleSubmit} aria-label="Submit form">
  <Icon name="check" />
</button>

// Explanation: Icon-only buttons need an aria-label
// to provide accessible text for screen readers.