Browser Use
ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Automated web QA via Chrome DevTools MCP — a11y, security, visual, env diff, CI; Aegis redaction.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
TARGET_DEV_URL, TARGET_STAGING_URL, SLACK_BOT_TOKEN, FIGMA_API_TOKEN, ARGUS_REDACT_SENSITIVEค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"argus": {
"command": "npx",
"args": [
"-y",
"argusqa-os"
],
"env": {
"TARGET_DEV_URL": "ใส่ค่าของคุณ",
"TARGET_STAGING_URL": "ใส่ค่าของคุณ",
"SLACK_BOT_TOKEN": "ใส่ค่าของคุณ",
"FIGMA_API_TOKEN": "ใส่ค่าของคุณ",
"ARGUS_REDACT_SENSITIVE": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add argus --env TARGET_DEV_URL='ใส่ค่าของคุณ' --env TARGET_STAGING_URL='ใส่ค่าของคุณ' --env SLACK_BOT_TOKEN='ใส่ค่าของคุณ' --env FIGMA_API_TOKEN='ใส่ค่าของคุณ' --env ARGUS_REDACT_SENSITIVE='ใส่ค่าของคุณ' -- npx -y argusqa-osเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"argus": {
"command": "npx",
"args": [
"-y",
"argusqa-os"
],
"env": {
"TARGET_DEV_URL": "ใส่ค่าของคุณ",
"TARGET_STAGING_URL": "ใส่ค่าของคุณ",
"SLACK_BOT_TOKEN": "ใส่ค่าของคุณ",
"FIGMA_API_TOKEN": "ใส่ค่าของคุณ",
"ARGUS_REDACT_SENSITIVE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"argus": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"argusqa-os"
],
"env": {
"TARGET_DEV_URL": "ใส่ค่าของคุณ",
"TARGET_STAGING_URL": "ใส่ค่าของคุณ",
"SLACK_BOT_TOKEN": "ใส่ค่าของคุณ",
"FIGMA_API_TOKEN": "ใส่ค่าของคุณ",
"ARGUS_REDACT_SENSITIVE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
TARGET_STAGING_URL envARGUS_REDACT_SENSITIVE envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub ironclawdevs27 ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: TARGET_DEV_URL, SLACK_BOT_TOKEN, FIGMA_API_TOKEN
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (10.0.0) เข้า registry 4 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Browser Use, Chrome DevTools MCP, MCP Server Browser
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้
ให้ AI ใช้เครื่องมือนักพัฒนาของ Chrome ตรวจหน้าเว็บ ดูว่าโหลดช้าตรงไหน และหาข้อผิดพลาด ทำโดยทีม Chrome DevTools
MCP server for browser use access
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
One line in your MCP config gives Claude (or any MCP agent) a real Chrome audit engine — 67 audit categories · 149 finding types · zero test files to write or maintain. And with Aegis, what it finds never leaks your secrets to the LLM.
[▶ See it in action → argus-qa.com](https://argus-qa.com)
Quick Start · The Fix Loop · What It Catches · Your Stack · MCP Tools · Full Setup · Reference
AI agents now write most of the code — and they judge their own work by whether it *compiles and looks done*, not by what actually happens in the browser. The uncaught exception on the third click. The form that posts credentials over HTTP. The 4-second LCP. The button that vanished in dark mode. The API endpoint hammered in an infinite loop.
Argus closes that gap. It drives a real Chrome (via the Chrome DevTools Protocol) against your locally-running app and hands the agent — or you — a structured, severity-ranked bug report. The agent fixes; Argus re-checks; the loop closes *before* the code leaves your machine.
| 🧪 No test files, ever | Argus audits the *rendered app* — DOM, console, network, pixels — not your source. Nothing to write, nothing to maintain when the agent refactors |
| 🤖 Built for the agent loop | The only QA engine Claude can call natively over MCP. Audit → fix → re-audit without leaving the conversation |
| 🔒 Safe for agents by default | Aegis: findings are redacted at every egress boundary — secrets, PII, and exploit detail never reach the LLM's context window (OWASP LLM02, default-ON, fail-closed) |
| 🧰 Also a normal QA tool | CLI batch audits, a GitHub Action PR gate, Slack reports with screenshots, dev-vs-staging diffs, watch mode — with or without an agent |
No install.
npxfetches Argus on first run.
1 — Add two lines to `.mcp.json` in your project root:
{
"mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] }, "argus": { "command": "npx", "args": ["-y", "argusqa-os"] } } }
Or via the Claude Code CLI:
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
claude mcp add argus -- npx -y argusqa-os
2 — Launch Chrome (auto-detects your Chrome, sets the right flags):
npx -y -p argusqa-os argus-chrome
Prefer launching Chrome manually? (macOS / Windows / Linux commands)
# macOS
open -a "Google Chrome" --args --remote-debugging-port=9222 --headless=new
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --headless=new --no-sandbox --disable-gpu --user-data-dir="$env:TEMP\chrome-argus"
google-chrome --remote-debugging-port=9222 --headless=new --no-sandbox
3 — Ask your agent:
Run argus_audit on http://localhost:3000
That's it. Findings come back structured and severity-ranked — into the conversation, to Slack, or as a local report.html. Something off? npx -y -p argusqa-os argus-doctor diagnoses your setup in one command.
This is what Argus looks like inside an agentic coding session:
You: Build me a checkout page with a card form.
Agent: [writes the code, dev server renders it]
You: Run argus_audit on http://localhost:3000/checkout Argus: ● 2 critical · 3 warnings ● uncaught TypeError in checkout.js (visible on submit) ● form posts over HTTP — security_no_https ▲ card inputs missing labels + autocomplete (a11y/WCAG) ▲ LCP 4.1s — hero image unoptimized ▲ duplicate POST /api/cart ×7 — likely render loop
Agent: [fixes all five]
You: Run argus_get_context Argus: ✓ resolved: 5 · persisting: 0 · new: 0
argus_get_context diffs against the previous snapshot, so the agent knows exactly what it fixed, what it broke, and what remains — no re-reading walls of output.
"But my agent can already drive a browser…" — it can. Driving isn't judging. A raw browser MCP (Playwright MCP, bare chrome-devtools-mcp) gives the agent hands and eyes; the agent must then *re-derive what to check* every session, burning context on console-log spelunking. Argus is the judgment layer on top: 149 codified finding types with thresholds, severity policy, cross-run baselines, flakiness filtering, dedup, root-cause hints — returned in one call, redacted by default.
32 analysis engines, 149 distinct issue types, zero test-file maintenance:
| Category | What it detects |
|---|---|
| JavaScript | Uncaught exceptions, unhandled promise rejections, console.error on critical routes |
| Network & API | HTTP 5xx, 401/403 auth failures, duplicate API calls (infinite loops), 4xx errors, broken links |
| Performance | LCP > 2500ms, CLS > 0.1, TTFB > 800ms, slow APIs > 1s/3s, payloads > 500KB/2MB, JS bundles > 500KB |
| Accessibility | axe-core (80+ WCAG rules), color-blind simulation, missing ARIA, keyboard focus, heading hierarchy |
| SEO | Missing meta description, OG tags, canonical, viewport, h1 |
| Security | Auth tokens in localStorage/URL, eval(), missing CSP/X-Frame-Options, CSP violations, missing SRI on external scripts, source map exposure, open redirects, npm CVEs |
| CSS | Cascade overrides, component style leaks, unused rules, React inline style conflicts |
| Content | null/undefined as visible text, lorem ipsum, broken images, empty data lists |
| Responsive | Horizontal overflow at 375px/768px, touch targets < 44×44px |
| Memory | Detached DOM nodes via V8 heap snapshot, heap growth across navigation |
| Visual | Pixel-level screenshot regression via pixelmatch (≥0.1% warning, ≥5% critical) |
| Figma | Design-to-implementation fidelity — 13 property types (color, spacing, typography, shadows, etc.) |
| Forms | Missing required, autocomplete, aria-describedby; unlabelled inputs |
| Fonts | FOIT, FOUT, missing fallbacks, slow loads > 1s, suboptimal formats |
| Motion | prefers-reduced-motion violations, autoplay without pause controls |
| Theme | Dark-mode gaps — static CSS vars, missing prefers-color-scheme handling |
| Network baseline | New requests, missing requests, status-code regressions vs saved HAR baseline |
| Environment diff | Dev vs staging — screenshot diff, DOM changes, console/network regressions |
And every finding is post-processed with:
| Post-processor | What it adds |
|---|---|
| Intelligent baseline filtering | Findings that flip-flop across runs are tagged noisy and downgraded to info — pure cross-run heuristics, no API calls (ARGUS_NOISE_FILTER=0 to disable) |
| Root cause linking | New findings are annotated with the recent git commits and files most likely to have caused them (ARGUS_ROOT_CAUSE=0 to disable) |
All findings are classified as
critical/warning/infoand routed to the right Slack channel — or surfaced in the local HTML report. For per-finding severity tables and detection methods, see REFERENCE.md.
Argus audits the rendered output, not your source — so it is framework-agnostic by construction. If it runs in Chrome, Argus can audit it:
| SPA frameworks | React, Vue, Angular, Svelte/SvelteKit, Solid, Preact, Astro… |
| Meta-frameworks | Next.js, Nuxt, Remix, Gatsby — plus framework-aware extras: Next.js & React Router route discovery, import-graph PR mapping ("this component changed → audit only the routes that render it"), monorepo path awareness |
| Server-rendered | Rails, Django, Laravel, Flask, Spring, PHP — anything that serves HTML to a browser |
| Static / no framework | Plain HTML/CSS/JS, docs sites, landing pages |
| APIs (via the page) | Response schema validation, status/timing checks on every request the page makes |
Honest limits: Chrome/Chromium rendering only (no Safari/Firefox engine differences), web only (no native mobile/desktop apps), and backend services are checked through the traffic the page generates — not as standalone API test suites.
Default ON. Argus audits your app for *secrets and vulnerabilities* — so its findings are exactly the data you least want leaving your machine. Aegis redacts them at every external boundary before they cross. For teams adopting AI agents, this is the difference between "we use an AI QA tool" and "we can tell our security lead exactly why it's safe."
A finding sent to an external sink — an MCP tool response (which lands in the calling agent's context window and transits to that agent's model provider), a Slack message, a GitHub PR comment + its ::error annotations, the hosted/CI HTML report, or CI logs — is reduced to a need-to-know projection: a sensitive finding crosses as its type + route + severity + a 🔒 marker, and never its raw payload (message, evidence, request/response bodies, headers, cookies, stack). URLs are projected with the query string stripped (tokens hide there). A benign finding keeps its message — but that message is still scrubbed for any accidentally-embedded secret or PII.
| Principle | Behavior |
|---|---|
| Local fidelity preserved | The on-disk JSON report and the locally-opened HTML keep 100% detail — redaction only removes detail on the way *out* |
| Fail-closed | On any classifier error or unknown finding shape, Aegis redacts *more*, never less |
| Deny-by-default | Only an explicit allowlist of safe fields ever crosses; a new field leaks nothing until deliberately allowlisted |
| 5-layer detection | Category rules ∪ 13 secret regexes ∪ statistical rarity (entropy / token-efficiency) ∪ 7 Luhn-validated PII rules ∪ context boosting |
| Opt-out | ARGUS_REDACT_SENSITIVE=0 → output is byte-identical to pre-Aegis |
This implements the OWASP LLM02:2025 — Sensitive Information Disclosure mitigations (data minimization, redaction, deny-by-default egress filtering) at Argus's own boundaries. An optional, local-only re-hydration vault (ARGUS_REDACT_VAULT=1) can mint reversible, information-free tokens for diff-stable artifacts — re-inflate locally with npm run report:rehydrate. Full behavior change is documented in CHANGELOG.md.
Ask Claude (or any MCP client) — no terminal required:
| Tool | Description |
|---|---|
argus_audit | Fast pass — JS, network, accessibility, SEO, security, CSS, content |
argus_audit_full | Deep pass — adds Lighthouse, responsive checks, memory leak detection, hover-state bugs |
argus_compare | Diff dev vs staging — screenshots, findings delta, environment regressions |
argus_get_context | Capture everything broken on the open tab — with resolved / new / persisting diff vs the last snapshot (the fix loop) |
| argus_watch_snapshot | Snapshot the open tab without navigating (preser
ตัดมาแค่ช่วงต้น อ่านต่อใน repo