mcp-accessibility-scanner 1.0.0 → 1.0.2

package/Readme.md

@@ -1,6 +1,6 @@
-# MCP Accessibility Scanner
+# MCP Accessibility Scanner 🔍
 
-A Model Context Protocol (MCP) server for performing automated accessibility scans of web pages using Playwright and Axe-core.
+A Model Context Protocol (MCP) server that provides automated web accessibility scanning using Playwright and Axe-core. This server enables LLMs to perform WCAG compliance checks, capture annotated screenshots, and generate detailed accessibility reports.
 
 ## Features
 
@@ -10,30 +10,37 @@ A Model Context Protocol (MCP) server for performing automated accessibility sca
 
 ## Installation
 
+You can install the package using any of these methods:
+
+Using npm:
 ```bash
-# Clone repository
-git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
-cd mcp-accessibility-scanner
+npm install -g mcp-accessibility-scanner
+```
 
-# Install dependencies
-npm install
+### Installation in VS Code
+
+Install the Accessibility Scanner in VS Code using the VS Code CLI:
+
+For VS Code:
+```bash
+code --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
+```
 
-# Build project (compiles TypeScript and installs Playwright browsers)
-npm run prepare
+For VS Code Insiders:
+```bash
+code-insiders --add-mcp '{"name":"accessibility-scanner","command":"npx","args":["mcp-accessibility-scanner"]}'
 ```
 
-## Claude Desktop Configuration
+## Configuration
 
-Add the following to your Claude Desktop settings to enable the Accessibility Scanner server:
+Here's the Claude Desktop configuration:
 
 ```json
 {
   "mcpServers": {
-    "accessibility-checker": {
-      "command": "node",
-      "args": [
-        "path/build/server.js"
-      ]
+    "accessibility-scanner": {
+      "command": "npx",
+      "args": ["-y", "mcp-accessibility-scanner"]
     }
   }
 }
@@ -44,7 +51,7 @@ Add the following to your Claude Desktop settings to enable the Accessibility Sc
 The scanner exposes a single tool `scan_accessibility` that accepts:
 
 - `url`: The webpage URL to scan
-- `violationsTag`: Array of accessibility violation tags to check
+- `violationsTag`: Array of accessibility violation tags to check (optional)
 
 Example usage in Claude:
 ```
@@ -53,6 +60,13 @@ Could you scan example.com for accessibility issues related to color contrast?
 
 ## Development
 
+Clone and set up the project:
+```bash
+git clone https://github.com/JustasMonkev/mcp-accessibility-scanner.git
+cd mcp-accessibility-scanner
+npm install
+```
+
 Start the TypeScript compiler in watch mode:
 ```bash
 npm run watch
@@ -65,17 +79,16 @@ npm run inspector
 
 ## Project Structure
 
-- `src/`: Source code
-    - `index.ts`: MCP server setup and tool definitions
-    - `accessibilityChecker.ts`: Core scanning functionality
-- `dist/`: Compiled JavaScript output
-- `package.json`: Project dependencies and scripts
-- `tsconfig.json`: TypeScript configuration
+```
+├── src/              # Source code
+│   ├── index.ts     # MCP server setup and tool definitions
+│   └── scanner.ts   # Core scanning functionality
+├── build/           # Compiled JavaScript output
+├── package.json     # Project configuration and dependencies
+└── tsconfig.json    # TypeScript configuration
+```
 
-## Output
+## License
 
-The scanner provides:
-1. A visual report with numbered violations highlighted on the page
-2. A detailed JSON report of all found violations
-3. A full-page screenshot saved to Downloads
+MIT
 

package/build/accessibilityChecker.js

@@ -50,11 +50,11 @@ const playwright_1 = require("playwright");
 const playwright_2 = require("@axe-core/playwright");
 const node_path_1 = __importDefault(require("node:path"));
 const os = __importStar(require("node:os"));
-function scanViolations(url, violationsTag) {
-    return __awaiter(this, void 0, void 0, function* () {
+function scanViolations(url_1, violationsTag_1) {
+    return __awaiter(this, arguments, void 0, function* (url, violationsTag, viewport = { width: 1920, height: 1080 }, shouldRunInHeadless = true, downloadsDir = node_path_1.default.join(os.homedir(), 'Downloads')) {
         var _a;
         const browser = yield playwright_1.chromium.launch({
-            headless: true,
+            headless: shouldRunInHeadless,
             args: [
                 '--disable-blink-features=AutomationControlled',
                 '--disable-dev-shm-usage',
@@ -63,7 +63,7 @@ function scanViolations(url, violationsTag) {
             ]
         });
         const context = yield browser.newContext({
-            viewport: { width: 1920, height: 1080 },
+            viewport,
             userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
         });
         const page = yield context.newPage();
@@ -170,7 +170,6 @@ function scanViolations(url, violationsTag) {
                 });
             }
         }
-        const downloadsDir = node_path_1.default.join(os.homedir(), 'Downloads');
         const filePath = node_path_1.default.join(downloadsDir, `a11y-report-${Date.now()}.png`);
         const screenshot = yield page.screenshot({
             path: filePath,

package/build/index.js

@@ -18,9 +18,14 @@ const server = new mcp_js_1.McpServer({
 });
 server.tool("scan_accessibility", {
     url: zod_1.z.string().url(),
-    violationsTag: zod_1.z.array(zod_1.z.string())
-}, (_a) => __awaiter(void 0, [_a], void 0, function* ({ url, violationsTag }) {
-    const { report, base64Screenshot } = yield (0, accessibilityChecker_1.scanViolations)(url, violationsTag);
+    violationsTag: zod_1.z.array(zod_1.z.string()),
+    viewport: zod_1.z.object({
+        width: zod_1.z.number().default(1920),
+        height: zod_1.z.number().default(1080)
+    }).optional(),
+    shouldRunInHeadless: zod_1.z.boolean().default(true)
+}, (_a) => __awaiter(void 0, [_a], void 0, function* ({ url, violationsTag, viewport, shouldRunInHeadless }) {
+    const { report, base64Screenshot } = yield (0, accessibilityChecker_1.scanViolations)(url, violationsTag, viewport, shouldRunInHeadless);
     return {
         content: [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-accessibility-scanner",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Model Context Protocol (MCP) server for performing automated accessibility scans of web pages using Playwright and Axe-core",
   "main": "build/index.js",
   "types": "build/index.d.ts",