OverlayQA — Claude Code MCP server: audits and setup
Audit public pages for accessibility, contrast, and design-token issues, then manage QA tickets from your coding editor. Useful when a review needs to lead straight to tracked issues.
claude mcp add --transport http mcp https://api.overlayqa.com/mcpWhat OverlayQA does
OverlayQA lets an agent check a URL for WCAG violations, color-contrast failures, and inconsistent design tokens. It can turn scan findings into issues, assign them, change their status, and manage workspace labels. Visual comparison can use a Figma frame, a saved design, or an uploaded image.
Auto Review and visual comparison need a projectId, a public url, and a fresh UUID requestId. The tools return a jobId; call get_review_result to read progress and findings. These reviews use the scan allowance and do not file issues automatically. Visual comparison provides AI findings rather than a deterministic pixel-diff result for CI. On first connection, a browser opens for OverlayQA account authorization, and the connection lasts 30 days.
Tool calls can record the supplied context, account and project details, scan URL, results, and editor information. Conversation text and source code are not sent, but the URL and project metadata are still recorded. Claude Code can connect to the hosted MCP endpoint with one command.
What it helps with
- check a page for WCAG violations
- find text and background pairs with failing contrast
- create QA issues from severe scan findings
- filter issues by status and severity
- compare a page with a Figma frame
Example prompts for the agent
- Check
https://example.comfor accessibility and contrast problems. - Scan the site and open issues for severe findings.
- Show open critical issues in the Acme Web project.
How to install OverlayQA
1Platform CLI: remote server
claude mcp add --transport http mcp https://api.overlayqa.com/mcp2Platform CLI
claude mcp add overlayqa -- npx -y @overlayqa/mcp1Platform CLI: remote server
codex mcp add overlayqa --url https://api.overlayqa.com/mcp2Platform CLI
codex mcp add overlayqa -- npx -y @overlayqa/mcpConfig file
{
"mcpServers": {
"overlayqa": {
"url": "https://api.overlayqa.com/mcp"
}
}
}{
"mcpServers": {
"overlayqa": {
"command": "npx",
"args": [
"-y",
"@overlayqa/mcp"
]
}
}
}Config file
{
"servers": {
"overlayqa": {
"type": "http",
"url": "https://api.overlayqa.com/mcp"
}
}
}{
"servers": {
"overlayqa": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@overlayqa/mcp"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http overlayqa https://api.overlayqa.com/mcp2Platform CLI
gemini mcp add overlayqa npx -y @overlayqa/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about OverlayQA
How do I install OverlayQA in Claude Code?
Run claude mcp add --transport http overlayqa https://api.overlayqa.com/mcp. On first connection, authorize your OverlayQA account in the browser tab that opens.
What does OverlayQA do?
It gives an AI coding agent tools for accessibility, contrast, and token audits, plus issue creation and management.
What does visual comparison require?
Provide a projectId, a public URL, and a new UUID requestId. The review uses the scan allowance and returns AI findings rather than a deterministic pixel-difference CI verdict.
