Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Free WCAG 2.2/ADA/508 accessibility MCP: scan, AI fixes, verify, vision audit, localhost tunnel
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://mcp.webability.io/mcpเปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"webability": {
"command": "npx",
"args": [
"-y",
"@webability/mcp"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http webability https://mcp.webability.io/mcpclaude mcp add webability -- npx -y @webability/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"webability": {
"url": "https://mcp.webability.io/mcp"
}
}
}วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"webability": {
"command": "npx",
"args": [
"-y",
"@webability/mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"webability": {
"type": "http",
"url": "https://mcp.webability.io/mcp"
}
}
}วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"webability": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@webability/mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://mcp.webability.io/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 7 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
scan_pageScan a web page for WCAG accessibility issues. Works on any URL — deployed sites, localhost, staging. Returns `issues` (violations the scanner stands behind; findings the engines cannot decide are settled by the AI judge — a violation with a fix, or a pass recorded in `judged[]`
verify_fixRe-scan a specific element after applying an accessibility fix and confirm the violation is gone. After you edit the code and serve it (deployed, staging, or http://localhost:3000), call this with the URL and the selector you fixed to get a machine-checked verified: true|false (D
diff_scanCompare two scans of the same page and report what changed: `fixed[]` (in the baseline, gone now), `new[]` (regressions — not in the baseline, present now), `remaining[]` (still there). Page-level complement to verify_fix (one element). Baseline is a scan_history id (`baselineId`
start_auditKick off a FULL accessibility audit deliverable for a URL — a persistent, timestamped artifact, not an inline scan. Runs the server-side pipeline (axe + advanced checks + mobile viewports + annotated screenshots + optional agent spot-check) and produces a downloadable report and
add_siteAdd a website to the signed-in WebAbility account. The site gets the full widget for its first 30 days and a first scan. Returns the site id and plan tier. Next: put the get_install_snippet tag on the site, and use create_upgrade_link to get a payment link for the WebAbility Pro
list_sitesList the sites on the signed-in WebAbility account with each site id, plan tier and the date the current plan ends. Use it to check that a payment activated WebAbility Pro on a site. Needs a free WebAbility account.
get_install_snippetGet the one-line script tag that installs the WebAbility accessibility widget. Put it in the or before of every page of a site added with add_site. The widget finds the site by its domain, so the same tag works on every site. No account needed.
create_upgrade_linkGet a Stripe Checkout link that puts one site on the WebAbility Pro plan (the widget subscription). Give the link to the human who pays (your owner). When they pay, the plan activates on that site automatically; check with list_sites. You never handle card details. The site must
get_auditCheck an audit started with start_audit: returns overall status, per-step progress (scan → viewports → screenshots → agent → excel → publish), and — once complete — a severity summary plus short-lived download URLs for the report (JSON) and the Excel workbook. Poll every ~15s whi
flow_scanScan a multi-page user journey. Walks startUrl plus the `autoNavigate` URLs sequentially (deterministic — one page fully rendered and scanned before the next), then returns ONE consolidated report with issues deduplicated across pages, each carrying the same fix payload as scan_p
detect_frameworkDetect a page's stack as two separate fields: `framework` — the application framework, CMS or site builder (e.g. nextjs, nuxt, sveltekit, vitepress, astro, gatsby, wordpress, shopify, mediawiki, vue, react; "unknown" when no signal) — and `cssToolkit` (tailwind, bootstrap, mui, p
generate_ai_fixGenerate framework-aware fix alternatives for a specific accessibility issue. For color contrast issues, returns 3 alternatives (minimal, brand-aligned, high contrast); brand palette is auto-extracted from the live URL using our scanner if `brandColors` is omitted. For label/ARIA
visual_auditPixel-level accessibility audit using Claude vision. Catches issues that DOM scanners miss: icon contrast (1.4.11), focus visibility (2.4.7), "looks like a button but isn't" (4.1.2), text rendered as images (1.4.5), visual hierarchy mismatches. Takes a URL, opens it in a headless
scan_htmlScan a raw HTML snippet or component markup without serving it — IN-PROCESS by default (jsdom + WebAbility detectors + axe-core): milliseconds, no browser, no network, so it fits inside a tight edit loop. Fragments are auto-wrapped into a document. Returns scan_page's shape (issu
get_rulesList accessibility rules from both engines — axe-core (104) and the WebAbility detectors (90+) — with optional filters. Every rule carries `fixability` (mechanical | contextual | visual) and a `fix` op template, so you can pick the rules worth auto-fixing before scanning. Returns
check_color_contrastCheck text contrast against the WCAG AA threshold (4.5:1, or 3:1 for large text); the AAA verdict is shown only when you pass level: "AAA". Either pass a `foreground` / `background` color pair, or pass `url` + `selector` to read the element's own text color, background (composite
check_ariaValidate ARIA attribute + accessible name/role/value usage — in an HTML snippet (`html`) or on a live page (`url`), optionally limited to one element and its descendants (`selector`). Runs axe-core `cat.aria` and `cat.name-role-value` rules (aria-* attribute correctness, role val
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub snayyar00 ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตอบกลับใน 154 ms (HTTP 200)
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 17 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.10.1) เข้า registry 12 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, Readfirst
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.
What to read and check before changing a file: project rules, risks, checks and tests per file.
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Accessibility checks your coding agent can act on: scan a page with two engines, get a structured fix for each issue, then re-check that the fix landed.
Free. Hosted at https://mcp.webability.io/mcp. No API key for scans. MIT.
Claude Code (plugin)
/plugin marketplace add snayyar00/webability-mcp
/plugin install webability-accessibility@webability
or claude mcp add --transport http webability https://mcp.webability.io/mcp
Cursor: Add to Cursor
VS Code: Install in VS Code · or run code --add-mcp '{"name":"webability","type":"http","url":"https://mcp.webability.io/mcp"}'
Claude.ai / ChatGPT / any MCP client: add a custom connector with the URL https://mcp.webability.io/mcp.
Local (the browser runs on your machine, so it scans localhost directly): npx -y -p @webability/mcp webability-mcp
Real output, scan_page on https://demo.vercel.store (trimmed):
Found 16 high-confidence issue(s): 0 critical, 4 serious, 8 moderate, 4 minor.
20 additional finding(s) need human review — see incomplete[]. Do NOT auto-fix these.
missing_label · serious · WCAG 1.3.1 · input.text-md.w-full.rounded-lg fix: { op: "add-attribute", attribute: "aria-label" } fixability: contextual missing_table_scope · moderate · WCAG 1.3.1 · thead > tr > th:nth-of-type(1) (vite.dev/guide) fix: { op: "add-attribute", attribute: "scope", value: "col" } fixability: mechanical
verify_fix input.text-md.w-full.rounded-lg wcag=4.1.2 NOT RESOLVED: 1 violation still present → "verified": false
add-attribute, set-attribute, remove-attribute, add-element, remove-element, add-text-content, suggest.mechanical = apply as given. contextual = the op is known, the value (alt text, a label) needs judgment. visual = needs rendered output; propose, do not auto-apply.{file, line, column, component} from the live component tree.fixed[], new[], remaining[] for a page.| What you get | |
|---|---|
| No account | Scan and check tools on the hosted server. Fair-use limits per IP: 30 browser scans/h, 10 AI fixes/h |
Free account (OAuth prompt in your client, or npx -y @webability/cli login locally) | Adds visual_audit (vision pass), start_audit / get_audit (full report), and webability-tunnel (lets the hosted server scan your localhost) |
No trial, no credits, no paid tier on the MCP.
It cannot judge if alt text is meaningful or if a custom widget makes sense with a screen reader. Use it to clear the automated layer in source, then test with assistive technology.
Lite — local stdio (npx / webability-mcp) | Full — hosted (https://mcp.webability.io/mcp) | |
|---|---|---|
| Account | None | None for scan tools; free account (OAuth sign-in) for visual and full audits |
| Scan / fix / verify | Yes (on your machine) | Yes |
| AI judge for uncertain findings | Off until you set OPENROUTER_API_KEY (your key) | On, nothing to set (our key) |
find_source | Yes | No |
scan_history / generate_report_pdf | Yes | No |
visual_audit / start_audit / get_audit | Listed as stubs → connect Full (still free) | Yes — free with your account |
| PostHog / dashboard analytics | Optional env only | On by default on hosted |
| `localhost` / private addresses | Yes — the browser runs on your machine | Via a tunnel — see below |
Use Lite (stdio). It runs the browser on your machine, so http://localhost:3000 is just localhost:
claude mcp add webability-local -- npx -y -p @webability/mcp webability-mcp
Other clients: add npx -y -p @webability/mcp webability-mcp as a stdio server.
Full (hosted) cannot reach your machine directly, by design. It runs in our cloud, so localhost there means *our* localhost. Every URL is checked before any fetch and loopback / private / link-local addresses are refused: without that check, anyone could point the server at internal services or a cloud metadata endpoint. That check is not relaxed for anyone.
webability-tunnelCI, a remote agent, or a dashboard-triggered scan cannot run Lite, because there is no laptop in the loop. For those, open a tunnel:
WEBABILITY_API_KEY=<your-token> npx -y -p @webability/mcp webability-tunnel --port 3000
It prints a https://tunnel.webability.io/t/ / URL and a secret. Pass the URL as url and the secret as tunnel_secret:
"Scan https://tunnel.webability.io/t/abc123.../ with tunnel_secret <secret>"
Your machine dials out to the relay, so the URL is an ordinary public hostname and the SSRF check above still applies unchanged — nothing is weakened to make this work. Same idea as ngrok, with three differences that matter when the thing on the far side is your dev machine:
Authorization / Cookie are stripped before anything crosses in.Anyone holding both the URL and the secret can read your dev server. Treat the pair like a password, and prefer Lite whenever there is a human at a keyboard.
Third-party tunnels (ngrok, cloudflared) also work — the hosted scanner treats their hostnames like any other public site — but they expose your dev server to anyone who learns the URL. Vite users, either way: add the tunnel hostname to server.allowedHosts, or it answers 403 Blocked request to everything.
start_audit is the exception on both transports — its pipeline runs on our servers even under Lite, so it can never reach a localhost URL.
Optional env:
WEBABILITY_API_URL (default https://api.webability.io) for self-hosted backends.POSTHOG_PROJECT_API_KEY or POSTHOG_API_KEY to enable PostHog MCP Analytics for MCP initialize, tools/list, and tool-call usage events.POSTHOG_HOST (default https://us.i.posthog.com) for EU or self-hosted PostHog ingestion.WEBABILITY_POSTHOG_MCP_ANALYTICS=off to force-disable PostHog MCP Analytics even when a PostHog key is present.scan_page runs two engines in parallel and deduplicates the results:
| Engine | Rules | What it covers |
|---|---|---|
| WebAbility detectors | 60+ | Gradient-aware contrast, weak names, decorative icons, landmark hierarchy, ARIA correctness, link consistency, target size, keyboard traps |
| axe-core | 104 | Industry-standard WCAG 2.2 baseline |
Every scan returns:
The scanner judges uncertain findings itself. Text on a gradient or image background is measured from rendered pixels. What the engines still cannot decide goes to an AI judge, which returns a violation with a concrete fix (alt text, a colour that meets the ratio) or a pass with its reason (listed in judged[]). Anything neither can settle is dropped — nothing is left for a human to review. Each judge call sends the page URL, the finding's markup and nearby text, and, when the page can take one, a PNG crop of the element.
Hosted (`https://mcp.webability.io/mcp`): nothing to set. The judge runs on our side with our models, for anonymous and signed-in callers alike: the server posts each uncertain finding to WebAbility's API. If our judge is unreachable, the findings it would have settled are dropped, never guessed.
Local (`npx` / `webability-mcp`): the judge is off until you give it a key. It is not local inference: your machine calls the model endpoint with your key (OpenRouter, or the WEBABILITY_JUDGE_BASE_URL you set). Set OPENROUTER_API_KEY to turn it on (vision anthropic/claude-haiku-4.5, text-only deepseek/deepseek-v4-flash; override with WEBABILITY_JUDGE_BASE_URL, WEBABILITY_JUDGE_VISION_MODEL, WEBABILITY_JUDGE_TEXT_MODEL, budget WEBABILITY_JUDGE_TIMEOUT_MS, default 20 s). WEBABILITY_JUDGE=off disables it in both modes. Without a key, the model-free verdicts still run (a measured contrast pass, a decorative or 1x1 image, a reduced-motion rule) and land in judged[]; findings they cannot settle are dropped.
Every issue from scan_page, flow_scan, diff_scan and scan_html carries a machine-readable fix and a fixability tier, so an agent can act without parsing prose:
{
"id": "wa-missing_button_type-a1b2c3", "fixability": "mechanical", "fix": { "op": "add-attribute", "attribute": "type", "value": "button", "currentValue": "", "needsManualReview": false } }
| Field | Values |
|---|---|
fix.op | add-attribute · set-attribute · remove-attribute · add-element · remove-element · add-text-content · suggest |
fixability | mechanical — value known, apply as given · contextual — op known, value needs judgment (alt text, a label) · visual — needs rendered output (contrast, focus ring, target size); propose, never auto-apply |
fix.value is present only when the engine already knows it. The legacy fix.attribute / currentValue / suggestedValue / needsManualReview fields are unchanged. get_rules lists the tier for every rule so you can pick the auto-fixable set up front.
On a React ≤18 or Vue dev build, scan_page, flow_scan and diff_scan read the component tree of the live page and attach the JSX call site to each finding:
{ "selector": "img#hero", "source": { "framework": "react", "file": "/app/src/Hero.tsx", "line": 12, "column": 5, "component": "Hero" } }
Open that file — no find_source round-trip. React 19 dropped _debugSource; there you still get component. Production builds have no tree; pass sourceRoot (Lite only) and issues without a pointer get sourceCandidates[] from a token grep of the selector.
scan_page, flow_scan, scan_html and diff_scan accept:
| Param | Effect |
|---|---|
minImpact | minor · moderate · serious · critical — drop anything below |
rules[] | keep only these rule ids (missing_alt, image-alt, …) |
wcag[] | keep only these criteria; a prefix like 1.4 matches 1.4.3 |
format: "compact" | one line per element, rule metadata printed once — a fraction of the JSON tokens |
Filters apply before the 50-item cap, so minImpact: "serious" returns every serious issue on a 300-issue page. The scan_history archive keeps the unfiltered result.
scan_html (since v1.6.0)scan_html no longer launches a browser by default. It runs the WebAbility detectors and axe-core inside jsdom in the MCP process — milliseconds, no network — and returns the same issues / judged / summary shape as scan_page, with fix.op on every finding. Fragments are wrapped into a document automatically. jsdom has no layout, so visual-tier rules (contrast, target size, focus ring) are skipped and counted in skippedVisual; pass engine: "browser" for the previous headless-Chr
ตัดมาแค่ช่วงต้น อ่านต่อใน repo