MCP Server

The Abilyo MCP server lets your AI editor scan accessibility issues, generate framework-aware fix alternatives, and map them back to source files in your repo. Apply happens through your editor's native file edit — no DOM theater.

Install

npm install -g @webability/mcp

IDE Setup

Claude Code

claude mcp add abilyo abilyo-mcp

Or manually:

{
  "mcpServers": {
    "abilyo": {
      "command": "abilyo-mcp"
    }
  }
}

Cursor

{
  "mcpServers": {
    "abilyo": {
      "command": "abilyo-mcp"
    }
  }
}

VS Code Copilot

{
  "servers": {
    "abilyo": {
      "command": "abilyo-mcp"
    }
  }
}

Tools

Usage

In your IDE chat:

"Scan localhost:3000 for accessibility issues, then fix the top 5 in my code"

"Run a flow scan on https://staging.example.com/login and walk through to checkout"

"Find the source file for .left-1\\/2 and show me the dropdown menu code"

The editor will chain: scan_page → detect_framework → generate_ai_fix → find_source → file edit.

End-to-End Example

You: scan localhost:3000 and fix all critical issues

Claude:
[calls scan_page with url="http://localhost:3000"]
Found 12 issues: 2 critical, 4 serious, 6 moderate.

[calls detect_framework — returns "tailwind"]

For each critical issue:
[calls generate_ai_fix with issue, html, framework="tailwind"]
[calls find_source with selector]
[opens src/components/Header.tsx and applies the edit]

Done — fixed 2 critical issues in:
- src/components/Header.tsx (line 23)
- src/components/Footer.tsx (line 47)

Tool Reference

scan_page

Returns structured JSON with summary, framework, and issues[] (id, impact, wcag, selector, html, fix).

flow_scan

Returns one consolidated report with deduplicated issues. Each issue lists which pages it appears on.

detect_framework

Returns: tailwind | mui | bootstrap | wordpress | nextjs | plain-css.

generate_ai_fix

Returns 1–3 alternatives:

• Color contrast → 3 options: minimal change, brand-aligned, high contrast
• Labels / ARIA → 1–2 options: concise, descriptive
• Touch targets → 1 option that increases tap area without breaking layout
• Focus visibility → 1 option matching the framework's idiom

Each alternative includes: label, attribute, value, explanation (with contrast ratio), frameworkCode (paste-ready snippet).

Powered by DeepSeek V4 Flash via OpenRouter — ~$0.0001/fix. Free for now.

visual_audit

Pixel-level accessibility audit via Claude vision. Catches issues that DOM scanners fundamentally cannot — they need to see pixels, not just markup.

What it catches:

• WCAG 1.4.11 — icon, border, focus ring, divider contrast (≥3:1 against adjacent colors)
• WCAG 2.4.7 — focus visibility (often missing or too subtle)
• WCAG 4.1.2 — affordance mismatches: text/shapes that look like buttons but aren't tagged as interactive (or vice versa)
• WCAG 1.4.5 — text rendered as images (fails screen readers, can't be resized)
• WCAG 2.5.8 — touch target spacing exceptions
• Visual hierarchy mismatches (text size suggests heading but isn't tagged)
• Color-only state differentiation (toggles, validation)
• Reading order anomalies (z-pattern layouts that don't match linear screen reader flow)

Example chain in your editor:

"Visually audit https://my-site.com on mobile, then fix the top 3 issues in my code"

The agent runs visual_audit → for each issue, runs find_source to locate the file → applies the fix.

Cost: ~$0.001/audit. Free for now while in beta.

find_source

Searches *.tsx, *.jsx, *.ts, *.js, *.vue, *.svelte, *.html, *.php, *.astro for the selector's identifying tokens (id, classes). Returns up to 10 candidate file paths.

Why MCP > Browser Apply

The editor already has the repo open. We just give it the right tools.