ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที รีวิวและบัญชีผู้ใช้จะมาในขั้นถัดไป
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน

OverlayQA

โดย OverlayQAรุ่น 0.7.0i★ –iบนเครื่องหรือคลาวด์
ชื่อใน registrycom.overlayqa/mcp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: บนเครื่องหรือคลาวด์
  • ช่องทาง (transport): stdio, Streamable HTTP
  • หมวด: ออกแบบ ภาพ และเสียง

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ต้องเตรียมก่อน

  • รันบนคลาวด์ไม่ต้องลงโปรแกรมเพิ่ม ต่อผ่านอินเทอร์เน็ตได้เลย
  • npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:

  1. เปิด Settings → Connectors
  2. กด Add custom connector
  3. วางที่อยู่ด้านล่างแล้วกด Add
  4. ถ้าให้ล็อกอิน ให้ล็อกอินกับผู้ทำ
SettingsConnectors1+ Add2https://…3
https://api.overlayqa.com/mcp

หรือรันในเครื่องคุณ

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "overlayqa": {
      "command": "npx",
      "args": [
        "-y",
        "@overlayqa/mcp"
      ]
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add --transport http overlayqa https://api.overlayqa.com/mcp

หรือรันในเครื่องคุณ

claude mcp add overlayqa -- npx -y @overlayqa/mcp

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "overlayqa": {
      "url": "https://api.overlayqa.com/mcp"
    }
  }
}

หรือรันในเครื่องคุณ

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "overlayqa": {
      "command": "npx",
      "args": [
        "-y",
        "@overlayqa/mcp"
      ]
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "overlayqa": {
      "type": "http",
      "url": "https://api.overlayqa.com/mcp"
    }
  }
}

หรือรันในเครื่องคุณ

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "overlayqa": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@overlayqa/mcp"
      ]
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:

  1. เปิด ChatGPT บนเว็บ → Settings → Connectors (Apps)
  2. กด Create หรือ Add (บางแพ็กเกจต้องเปิด Developer mode ใน Advanced ก่อน)
  3. วางที่อยู่ด้านล่าง ตั้งชื่อ แล้วบันทึก
  4. ถ้าให้ล็อกอิน ให้ล็อกอินกับผู้ทำ
SettingsConnectors1+ Create2https://…3
https://api.overlayqa.com/mcp

ชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569

  • ✓ ผ่าน

    ตัวตนผู้ทำตรงกับ repo

    ชื่อใน registry ยืนยันโดเมน overlayqa.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)

  • … ยังไม่ตรวจ

    ยังมีคนดูแล

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    มีสัญญาอนุญาต (license)

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    endpoint ตอบ

    ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป

  • … ยังไม่ตรวจ

    ล็อกอินแบบ OAuth

    ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

  • ดาวมากกว่า 0% ของอีก 2169 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 70% ของอีก 2169 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 2169 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

OverlayQA ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.7.0) เข้า registry 14 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Figma Context MCP

โดย GLips

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

รันบนเครื่อง★ 16,165MITอัปเดต 5 เดือนที่ผ่านมา
ติดตั้ง

Claude Real Video

โดย HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

รันบนเครื่อง★ 2,284MITอัปเดต 2 เดือนที่ผ่านมา
ติดตั้ง

Figma MCP Server

โดย figma

server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma

รันบนคลาวด์★ 2,152อัปเดต 13 เดือนที่ผ่านมา
ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

OverlayQA MCP

OverlayQA MCP is a Model Context Protocol server that gives your AI coding agent accessibility and design-QA superpowers. Ask Claude Code, Cursor, or Windsurf to audit any URL for WCAG and color-contrast issues, then read, assign, discuss, label and resolve issues in your OverlayQA projects without leaving your editor.

You:   Scan staging.acme.com for accessibility issues, then open issues for the criticals.

Agent: scan_accessibility → 7 violations (2 critical, 3 high), score 71/100. scan_and_create_issues → created 2 issues in "Acme Web":

  • Buttons missing accessible names (WCAG 4.1.2): critical
  • Insufficient text contrast on .cta (WCAG 1.4.3): high

You: List the open criticals. Agent: list_issues(status=open, severity=critical) → 2 issues.

Install

One click:

Or add it to your editor's MCP config manually:

Claude Code (.mcp.json in your project root) / Cursor (~/.cursor/mcp.json) / Windsurf (~/.codeium/windsurf/mcp_config.json):

{

"mcpServers": { "overlayqa": { "command": "npx", "args": ["@overlayqa/mcp@latest"] } } }

Any MCP-compatible client works the same way. On first run a browser tab opens to connect your OverlayQA account (free, no card): pick the workspace, allow access, and the connection lasts 30 days. Credentials cache at ~/.overlayqa/auth.json; the access token is short-lived and refreshes in the background. Disconnect an editor at any time from Connected AI apps in the dashboard (app.overlayqa.com/mcp/connect).

Tools

Tools your agent can call. Each is written so the model picks the right one from natural language.

Audit

ToolWhat it does
scan_accessibilityRun a WCAG audit (axe-core) on any URL. Returns violations with severity, WCAG success criteria, and an overall score.
scan_contrastCheck color-contrast ratios across a page. Returns the failing foreground/background element pairs.
audit_tokensAudit a live URL's design-system tokens. Returns a 0-100 token-health score and findings (inconsistent font sizes, text colors, spacing, font families, border radii) with severity. Audits the live page only.

File and manage issues

ToolWhat it does
scan_and_create_issuesScan a URL and auto-create an issue for every violation above a severity threshold.
create_issueFile a QA issue with title, severity, type, description and optional assignee.
list_issuesPage through issues filtered by status, severity, type, labels, assignee, creator, page, creation time, or active/finished/ignored state. Each issue says who filed it and whether it still needs a reply.
update_issueEdit supplied issue fields, assignment, ignored state or status. Takes a UUID or display id such as OQ-12.
create_projectCreate a project for a site URL.
list_projectsList all projects on your team.
list_labelsRead the workspace label library, assigned labels, and your permissions.
create_labelCreate a reusable workspace label.
set_issue_labelApply or remove one label without changing issue text or other labels.
rename_labelRename a workspace label (owner/admin).
delete_labelDelete a workspace label and its assignments; keep the issues (owner/admin).

AI review workflows

ToolWhat it does
run_auto_reviewStart Auto Review using project settings, ignored findings and already-filed issues.
compare_visualStart visual comparison against a Figma frame, saved design or uploaded image, with optional measured spacing.
get_review_resultRetrieve progress, findings and screenshot evidence from a saved review.

Both start tools require projectId, a public url, and a new UUID requestId. They return a jobId immediately. Read it with get_review_result until complete or failed. Reuse the same request ID and inputs after a lost response; do not start another review just to read its result. Reviews use your scan allowance and do not automatically file issues. Visual comparison captures at the design’s authored width and returns AI findings, not a deterministic pixel-difference CI verdict.

What the server records

Every tool also accepts an optional context argument: one sentence on why the agent is calling it. OverlayQA records that sentence, the tool name, your account, project and issue ids, counts and scores, the URL a scan runs on, and your editor's name and version (from the MCP handshake) as product analytics. The sentence is capped and stripped of email addresses and credential-like strings before it is stored. Nothing else travels: not your conversation, not your code, not the tool's replies. Full detail: overlayqa.com/privacy.

Example prompts

  • "Scan example.com for accessibility issues."
  • "Check the contrast on our pricing page and tell me what's failing."
  • "Scan staging.acme.com and create issues for anything critical or high."
  • "Create a high-severity accessibility issue: the login button has no focus ring."
  • "List the open critical issues in the Acme Web project."
  • "Create a project for shop.acme.com, then scan it."

Pricing

ScansCreate issues & projects
Free3 / day, foreverno
14-day trial30 / dayyes
Paid10-30 / day by plan, unlimited on Proyes, with export to Linear / Jira / Asana / Notion

See overlayqa.com/pricing.

FAQ

Which editors does it work with? Claude Code, Cursor, Windsurf, and any MCP-compatible client (it speaks standard stdio MCP).

Is it free? Yes to start: 3 accessibility/contrast scans per day with no card. A 14-day trial raises that to 30 scans per day and unlocks issue and project creation. After that, creating issues and projects needs a paid plan (Pro has unlimited scans).

What does it actually scan? Any public URL. Accessibility uses axe-core mapped to WCAG success criteria; contrast checks foreground/background ratios and returns the failing element pairs.

Do I need an account? Yes, a free OverlayQA account. On first run a browser tab opens to connect it; the connection lasts 30 days and can be disconnected from the dashboard at any time.

Does it work with the OverlayQA Chrome extension? Yes. The MCP server and the extension share the same projects and issues, so anything you file from your editor shows up in the extension and the dashboard, and vice versa.

Prefer clicking to typing? Meet the extension

The MCP server is one way into OverlayQA. The [Chrome extension](https://chromewebstore.google.com/detail/overlayqa/pbnjikbncbjaaimelhlkfihgdkocmmei) is the other: click any element on a live page and it captures a screenshot plus the CSS, DOM, and metadata into a dev-ready issue in seconds, and runs AI accessibility and design-system audits right on the page. Same projects, same issues, shared with this server.

Links

License

MIT

Custom issue labels

Use list_labels with a project UUID to see that workspace's labels and your permissions. create_label creates a reusable label; set_issue_label applies or removes it from one issue without changing its other labels or text. Workspace owners and admins can use rename_label and delete_label; deletion removes the label's assignments, not its issues. list_issues accepts labelIds (match any), including unlabeled. Shared reports preserve the names present when shared.

Local verification can set OVERLAYQA_API_BASE and an isolated OVERLAYQA_AUTH_FILE; neither changes the default production endpoint or normal saved login.

Issue management in 0.3.0

Requires the matching issue-parity API deployment. Existing scans and status updates remain compatible with 0.2.0.

ToolWhat it does
get_issueRead description, ownership, labels, ignored state, screenshots, captured element/CSS, viewport evidence, and the issue's comments.
list_issuesFilter by one or more statuses, severities or types; labels; assignee (me, unassigned, or user ID); creator; and active/finished/ignored state. Follow hasMore with the next page.
list_project_membersFind teammate user IDs for assignment and mentions in a readable project's workspace.
create_issueChoose an assignee, use null for Unassigned, or omit to assign to yourself. Default type is General.
update_issueChange any supplied title, description, severity, type, status, assignee or ignored flag. Omitted fields remain unchanged. Ignoring never resolves an issue. Setting verified records a status; it does not run a scan.
move_issueMove by stable issue UUID into another writable project in the same workspace; retain comments and evidence. Read the returned display ID afterward.
list_commentsRead the discussion, audience, mentions and attachment metadata.
create_commentPost with explicit internal (Team only) or public (Team and clients) audience, mentions, and optional PNG/JPG/PDF files.
update_comment / delete_commentEdit or delete your own native comments. Edits preserve audience and files.
get_comment_attachmentRead a native comment file as filename and base64 bytes under the issue's access rules.

For mentions, use @[userId] in the text and include the same ID in mentionedUserIds. Comment creation requires a UUID requestId: reuse it when retrying that same submission after a lost response, so a retry does not post twice. Attachments are base64 bytes with filename and MIME type, up to ten PNG/JPG/PDF files and 10 MiB total per comment.

list_issues defaults to all states for compatibility. Use state: "active" for open/in-progress issues that are not ignored. finished includes resolved/verified/closed issues that are not ignored; ignored selects the independent ignore flag. All supplied filters intersect. Pages start at 1 and contain up to 100 issues; an empty filtered page is not a complete-project result unless hasMore is false.

To

ตัดมาแค่ช่วงต้น อ่านต่อใน repo

ถาม PopNx