ai-ccesibility 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +240 -81
- package/dist/server.js +2 -2
- package/dist/server.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,30 +2,196 @@
|
|
|
2
2
|
|
|
3
3
|
Servidor MCP para orquestación de herramientas de accesibilidad web (axe-core, Pa11y, eslint-plugin-vuejs-accessibility).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<details>
|
|
6
|
+
<summary><h2>📚 Documentación</h2></summary>
|
|
6
7
|
|
|
7
8
|
- **[USAGE.md](./USAGE.md)** - Guía completa de uso, workflows y prompts efectivos
|
|
8
9
|
- **[EXAMPLES.md](./EXAMPLES.md)** - Ejemplos concretos de inputs/outputs para cada herramienta
|
|
9
|
-
- **[README.md](./README.md)** - Este archivo (configuración y reference rápida)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
</details>
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
<details>
|
|
14
|
+
<summary><h2>Instalación del servidor</h2></summary>
|
|
15
|
+
|
|
16
|
+
<details>
|
|
17
|
+
<summary><h3>Claude Desktop</h3></summary>
|
|
18
|
+
|
|
19
|
+
1. Abre el archivo de configuración:
|
|
20
|
+
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
21
|
+
- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
|
|
22
|
+
- **Linux**: `~/.config/Claude/claude_desktop_config.json`
|
|
23
|
+
|
|
24
|
+
2. Añade la configuración del servidor:
|
|
25
|
+
|
|
26
|
+
```json
|
|
27
|
+
{
|
|
28
|
+
"mcpServers": {
|
|
29
|
+
"ai-ccesibility": {
|
|
30
|
+
"command": "npx",
|
|
31
|
+
"args": ["-y", "ai-ccesibility"],
|
|
32
|
+
"env": {
|
|
33
|
+
"LOG_LEVEL": "info"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
3. Reinicia Claude Desktop
|
|
41
|
+
</details>
|
|
42
|
+
|
|
43
|
+
<details>
|
|
44
|
+
<summary><h3>Cursor</h3></summary>
|
|
45
|
+
|
|
46
|
+
#### Instalación rápida con un clic
|
|
47
|
+
|
|
48
|
+
[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=AI-ccesibility&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImFpLWNjZXNpYmlsaXR5Il19Cg%3D%3D)
|
|
49
|
+
|
|
50
|
+
#### Instalación manual
|
|
51
|
+
|
|
52
|
+
1. Crea o edita el archivo `.cursor/mcp.json` en tu directorio de trabajo
|
|
53
|
+
|
|
54
|
+
2. Añade la configuración:
|
|
55
|
+
|
|
56
|
+
```json
|
|
57
|
+
{
|
|
58
|
+
"mcpServers": {
|
|
59
|
+
"ai-ccesibility": {
|
|
60
|
+
"command": "npx",
|
|
61
|
+
"args": ["-y", "ai-ccesibility"]
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
3. Reinicia Cursor
|
|
68
|
+
</details>
|
|
69
|
+
|
|
70
|
+
<details>
|
|
71
|
+
<summary><h3>Windsurf</h3></summary>
|
|
72
|
+
|
|
73
|
+
1. Abre el archivo de configuración:
|
|
74
|
+
- **macOS**: `~/Library/Application Support/Windsurf/mcp_config.json`
|
|
75
|
+
- **Windows**: `%APPDATA%\Windsurf\mcp_config.json`
|
|
76
|
+
- **Linux**: `~/.config/Windsurf/mcp_config.json`
|
|
77
|
+
|
|
78
|
+
2. Añade la configuración del servidor:
|
|
79
|
+
|
|
80
|
+
```json
|
|
81
|
+
{
|
|
82
|
+
"mcpServers": {
|
|
83
|
+
"ai-ccesibility": {
|
|
84
|
+
"command": "npx",
|
|
85
|
+
"args": ["-y", "ai-ccesibility"],
|
|
86
|
+
"env": {
|
|
87
|
+
"LOG_LEVEL": "info"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
3. Reinicia Windsurf
|
|
95
|
+
|
|
96
|
+
</details>
|
|
97
|
+
|
|
98
|
+
<details>
|
|
99
|
+
<summary><h3>Claude Code</h3></summary>
|
|
100
|
+
|
|
101
|
+
1. Abre el archivo de configuración:
|
|
102
|
+
- **macOS**: `~/Library/Application Support/Code/User/globalStorage/anthropic.claude-code/settings/cline_mcp_settings.json`
|
|
103
|
+
- **Windows**: `%APPDATA%\Code\User\globalStorage\anthropic.claude-code\settings\cline_mcp_settings.json`
|
|
104
|
+
- **Linux**: `~/.config/Code/User/globalStorage/anthropic.claude-code/settings/cline_mcp_settings.json`
|
|
105
|
+
|
|
106
|
+
2. Añade la configuración del servidor:
|
|
107
|
+
|
|
108
|
+
```json
|
|
109
|
+
{
|
|
110
|
+
"mcpServers": {
|
|
111
|
+
"ai-ccesibility": {
|
|
112
|
+
"command": "npx",
|
|
113
|
+
"args": ["-y", "ai-ccesibility"],
|
|
114
|
+
"env": {
|
|
115
|
+
"LOG_LEVEL": "info"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
3. Reinicia VS Code o recarga la ventana (Cmd/Ctrl + Shift + P → "Developer: Reload Window")
|
|
123
|
+
</details>
|
|
124
|
+
|
|
125
|
+
</details>
|
|
126
|
+
|
|
127
|
+
<details>
|
|
128
|
+
<summary><h2>Uso</h2></summary>
|
|
129
|
+
|
|
130
|
+
Una vez configurado, puedes usar prompts como:
|
|
131
|
+
|
|
132
|
+
- "Analiza la accesibilidad de https://example.com con axe-core y Pa11y"
|
|
133
|
+
- "Revisa este HTML para problemas de accesibilidad: `<img src='foto.jpg'>`"
|
|
134
|
+
- "Analiza los archivos Vue en src/components/ para problemas de accesibilidad" (usa analyze-with-eslint)
|
|
135
|
+
- "Compara los resultados de axe-core y Pa11y en mi landing page" (usa analyze-all)
|
|
136
|
+
|
|
137
|
+
### Desarrollo Local
|
|
138
|
+
|
|
139
|
+
Si estás desarrollando o contribuyendo al proyecto, puedes usar rutas locales en lugar de npx:
|
|
140
|
+
|
|
141
|
+
**Claude Desktop / Windsurf / Claude Code**:
|
|
142
|
+
|
|
143
|
+
```json
|
|
144
|
+
{
|
|
145
|
+
"mcpServers": {
|
|
146
|
+
"ai-ccesibility": {
|
|
147
|
+
"command": "node",
|
|
148
|
+
"args": ["<RUTA_AL_PROYECTO>/dist/server.js"],
|
|
149
|
+
"env": {
|
|
150
|
+
"LOG_LEVEL": "debug"
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**Cursor**:
|
|
158
|
+
|
|
159
|
+
```json
|
|
160
|
+
{
|
|
161
|
+
"mcpServers": {
|
|
162
|
+
"ai-ccesibility": {
|
|
163
|
+
"command": "node",
|
|
164
|
+
"args": ["dist/server.js"],
|
|
165
|
+
"cwd": "<RUTA_AL_PROYECTO>"
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
> 💡 **Tip**: Recuerda ejecutar `pnpm build` cada vez que hagas cambios en el código para que se reflejen en el servidor.
|
|
172
|
+
|
|
173
|
+
</details>
|
|
174
|
+
|
|
175
|
+
<details>
|
|
176
|
+
<summary><h2>Herramientas Disponibles</h2></summary>
|
|
177
|
+
|
|
178
|
+
<details>
|
|
179
|
+
<summary><h3><code>analyze-with-axe</code></h3></summary>
|
|
14
180
|
|
|
15
181
|
Analiza una página web o contenido HTML para detectar problemas de accesibilidad usando axe-core.
|
|
16
182
|
|
|
17
183
|
**Parámetros:**
|
|
18
184
|
|
|
19
|
-
| Parámetro
|
|
20
|
-
|
|
21
|
-
| `url`
|
|
22
|
-
| `html`
|
|
23
|
-
| `options.wcagLevel`
|
|
24
|
-
| `options.rules`
|
|
25
|
-
| `options.excludeRules`
|
|
26
|
-
| `options.includeIncomplete`
|
|
27
|
-
| `options.browser.waitForSelector` | string
|
|
28
|
-
| `options.browser.viewport`
|
|
185
|
+
| Parámetro | Tipo | Requerido | Descripción |
|
|
186
|
+
| --------------------------------- | -------------------- | ---------- | -------------------------------------------------- |
|
|
187
|
+
| `url` | string | url o html | URL de la página a analizar |
|
|
188
|
+
| `html` | string | url o html | Contenido HTML raw a analizar |
|
|
189
|
+
| `options.wcagLevel` | "A" \| "AA" \| "AAA" | No | Nivel WCAG a verificar (default: AA) |
|
|
190
|
+
| `options.rules` | string[] | No | IDs de reglas axe específicas a ejecutar |
|
|
191
|
+
| `options.excludeRules` | string[] | No | IDs de reglas axe a excluir |
|
|
192
|
+
| `options.includeIncomplete` | boolean | No | Incluir resultados "needs-review" (default: false) |
|
|
193
|
+
| `options.browser.waitForSelector` | string | No | Selector CSS a esperar antes del análisis |
|
|
194
|
+
| `options.browser.viewport` | object | No | Dimensiones del viewport |
|
|
29
195
|
|
|
30
196
|
**Ejemplo de respuesta:**
|
|
31
197
|
|
|
@@ -60,33 +226,40 @@ Analiza una página web o contenido HTML para detectar problemas de accesibilida
|
|
|
60
226
|
"duration": 1234
|
|
61
227
|
}
|
|
62
228
|
```
|
|
229
|
+
</details>
|
|
63
230
|
|
|
64
|
-
|
|
231
|
+
<details>
|
|
232
|
+
<summary><h3><code>analyze-with-pa11y</code></h3></summary>
|
|
65
233
|
|
|
66
234
|
Analiza una página web o contenido HTML usando Pa11y.
|
|
67
235
|
|
|
68
236
|
**Parámetros similares a axe**, con `options.standard` para elegir el estándar WCAG (WCAG2AA, WCAG21AA, etc.).
|
|
237
|
+
</details>
|
|
69
238
|
|
|
70
|
-
|
|
71
|
-
|
|
239
|
+
<details>
|
|
240
|
+
<summary><h3><code>analyze-with-eslint</code></h3></summary>
|
|
72
241
|
Analiza archivos Vue.js para problemas de accesibilidad mediante análisis estático.
|
|
73
242
|
|
|
74
243
|
**Parámetros:**
|
|
244
|
+
|
|
75
245
|
- `files`: Array de rutas de archivos .vue
|
|
76
246
|
- `directory`: Directorio a analizar recursivamente
|
|
77
247
|
- `code`: Código Vue inline a analizar
|
|
248
|
+
</details>
|
|
78
249
|
|
|
79
|
-
|
|
80
|
-
|
|
250
|
+
<details>
|
|
251
|
+
<summary><h3><code>analyze-all ⭐</code></h3></summary>
|
|
81
252
|
**Tool de síntesis para análisis web** que ejecuta axe-core y Pa11y en paralelo y combina los resultados.
|
|
82
253
|
|
|
83
254
|
**Parámetros:**
|
|
255
|
+
|
|
84
256
|
- `url` o `html`: Target web a analizar (requerido)
|
|
85
257
|
- `tools`: Array de tools a ejecutar (default: `['axe-core', 'pa11y']`)
|
|
86
258
|
- `options.deduplicateResults`: Eliminar issues duplicados (default: `true`)
|
|
87
259
|
- `options.wcagLevel`: Nivel WCAG (default: `'AA'`)
|
|
88
260
|
|
|
89
261
|
**Respuesta incluye:**
|
|
262
|
+
|
|
90
263
|
- `issues`: Issues combinados y deduplicados
|
|
91
264
|
- `issuesByWCAG`: Issues agrupados por criterio WCAG
|
|
92
265
|
- `summary.byTool`: Conteo de issues por herramienta
|
|
@@ -95,7 +268,12 @@ Analiza archivos Vue.js para problemas de accesibilidad mediante análisis está
|
|
|
95
268
|
|
|
96
269
|
**Nota:** Para análisis de código Vue, usa `analyze-with-eslint` por separado. Esta herramienta está especializada en análisis web dinámico.
|
|
97
270
|
|
|
98
|
-
|
|
271
|
+
</details>
|
|
272
|
+
|
|
273
|
+
</details>
|
|
274
|
+
|
|
275
|
+
<details>
|
|
276
|
+
<summary><h2>Contexto Humano Enriquecido ✨</h2></summary>
|
|
99
277
|
|
|
100
278
|
Todos los issues incluyen automáticamente:
|
|
101
279
|
|
|
@@ -107,6 +285,7 @@ Todos los issues incluyen automáticamente:
|
|
|
107
285
|
- **Soluciones sugeridas** paso a paso
|
|
108
286
|
|
|
109
287
|
Ejemplo de issue enriquecido:
|
|
288
|
+
|
|
110
289
|
```json
|
|
111
290
|
{
|
|
112
291
|
"ruleId": "image-alt",
|
|
@@ -121,7 +300,34 @@ Ejemplo de issue enriquecido:
|
|
|
121
300
|
|
|
122
301
|
Los datos WCAG se mantienen en `src/data/wcag-criteria.json` y son fácilmente actualizables.
|
|
123
302
|
|
|
124
|
-
|
|
303
|
+
</details>
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
<details>
|
|
307
|
+
<summary><h2>Requisitos</h2></summary>
|
|
308
|
+
|
|
309
|
+
- Node.js ≥ 20
|
|
310
|
+
- pnpm
|
|
311
|
+
- Chrome/Chromium (descargado automáticamente por Puppeteer)
|
|
312
|
+
|
|
313
|
+
</details>
|
|
314
|
+
|
|
315
|
+
<details>
|
|
316
|
+
<summary><h2>Dependencias Principales</h2></summary>
|
|
317
|
+
|
|
318
|
+
- `@modelcontextprotocol/sdk` - SDK para servidores MCP
|
|
319
|
+
- `puppeteer` - Control de navegador headless
|
|
320
|
+
- `@axe-core/puppeteer` - Integración axe-core con Puppeteer
|
|
321
|
+
- `axe-core` - Motor de análisis de accesibilidad
|
|
322
|
+
- `pa11y` - Herramienta de testing de accesibilidad
|
|
323
|
+
- `eslint` + `eslint-plugin-vuejs-accessibility` - Linting estático de Vue.js
|
|
324
|
+
- `zod` - Validación de schemas
|
|
325
|
+
- `pino` - Logging estructurado
|
|
326
|
+
|
|
327
|
+
</details>
|
|
328
|
+
|
|
329
|
+
<details>
|
|
330
|
+
<summary><h2>Estructura del Proyecto</h2></summary>
|
|
125
331
|
|
|
126
332
|
```
|
|
127
333
|
src/
|
|
@@ -150,7 +356,10 @@ tests/
|
|
|
150
356
|
└── helpers/ # Utilidades para tests (mock server, etc.)
|
|
151
357
|
```
|
|
152
358
|
|
|
153
|
-
|
|
359
|
+
</details>
|
|
360
|
+
|
|
361
|
+
<details>
|
|
362
|
+
<summary><h2>Scripts</h2></summary>
|
|
154
363
|
|
|
155
364
|
```bash
|
|
156
365
|
pnpm build # Compila a dist/
|
|
@@ -165,69 +374,19 @@ pnpm test:coverage # Tests con reporte de cobertura
|
|
|
165
374
|
pnpm inspect. # Lanzar el inspector de mcp para debuggear herramientas de mcp
|
|
166
375
|
```
|
|
167
376
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
Añade el servidor a tu configuración:
|
|
377
|
+
</details>
|
|
171
378
|
|
|
172
|
-
|
|
379
|
+
<details>
|
|
380
|
+
<summary><h2>Instalación del proyecto</h2></summary>
|
|
173
381
|
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
"mcpServers": {
|
|
177
|
-
"ai-ccesibility": {
|
|
178
|
-
"command": "node",
|
|
179
|
-
"args": ["<RUTA_AL_PROYECTO>/dist/server.js"],
|
|
180
|
-
"env": {
|
|
181
|
-
"LOG_LEVEL": "info"
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
382
|
+
```bash
|
|
383
|
+
npm install -g ai-ccesibility
|
|
186
384
|
```
|
|
187
385
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
**Cursor** (`.cursor/mcp.json` en el directorio del proyecto):
|
|
386
|
+
O con pnpm:
|
|
191
387
|
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
"mcpServers": {
|
|
195
|
-
"ai-ccesibility": {
|
|
196
|
-
"command": "node",
|
|
197
|
-
"args": ["dist/server.js"],
|
|
198
|
-
"cwd": "<RUTA_AL_PROYECTO>"
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
388
|
+
```bash
|
|
389
|
+
pnpm add -g ai-ccesibility
|
|
202
390
|
```
|
|
203
391
|
|
|
204
|
-
>
|
|
205
|
-
|
|
206
|
-
Luego puedes usar prompts como:
|
|
207
|
-
- "Analiza la accesibilidad de https://example.com con axe-core y Pa11y"
|
|
208
|
-
- "Revisa este HTML para problemas de accesibilidad: `<img src='foto.jpg'>`"
|
|
209
|
-
- "Analiza los archivos Vue en src/components/ para problemas de accesibilidad" (usa analyze-with-eslint)
|
|
210
|
-
- "Compara los resultados de axe-core y Pa11y en mi landing page" (usa analyze-all)
|
|
211
|
-
|
|
212
|
-
## Configuración
|
|
213
|
-
|
|
214
|
-
| Variable | Default | Descripción |
|
|
215
|
-
|-------------|---------|----------------------------------|
|
|
216
|
-
| `LOG_LEVEL` | `info` | `debug`, `info`, `warn`, `error` |
|
|
217
|
-
|
|
218
|
-
## Requisitos
|
|
219
|
-
|
|
220
|
-
- Node.js ≥ 20
|
|
221
|
-
- pnpm
|
|
222
|
-
- Chrome/Chromium (descargado automáticamente por Puppeteer)
|
|
223
|
-
|
|
224
|
-
## Dependencias Principales
|
|
225
|
-
|
|
226
|
-
- `@modelcontextprotocol/sdk` - SDK para servidores MCP
|
|
227
|
-
- `puppeteer` - Control de navegador headless
|
|
228
|
-
- `@axe-core/puppeteer` - Integración axe-core con Puppeteer
|
|
229
|
-
- `axe-core` - Motor de análisis de accesibilidad
|
|
230
|
-
- `pa11y` - Herramienta de testing de accesibilidad
|
|
231
|
-
- `eslint` + `eslint-plugin-vuejs-accessibility` - Linting estático de Vue.js
|
|
232
|
-
- `zod` - Validación de schemas
|
|
233
|
-
- `pino` - Logging estructurado
|
|
392
|
+
</details>
|
package/dist/server.js
CHANGED
|
@@ -2132,7 +2132,7 @@ Note: For Vue source code analysis, use analyze-with-eslint separately.`,
|
|
|
2132
2132
|
// src/server.ts
|
|
2133
2133
|
var server = new McpServer({
|
|
2134
2134
|
name: "AI-ccesibility",
|
|
2135
|
-
version: "0.1.
|
|
2135
|
+
version: "0.1.3"
|
|
2136
2136
|
});
|
|
2137
2137
|
function registerTools() {
|
|
2138
2138
|
analyzeWithAxeTool.register(server);
|
|
@@ -2146,7 +2146,7 @@ function registerTools() {
|
|
|
2146
2146
|
}
|
|
2147
2147
|
async function main() {
|
|
2148
2148
|
logger.info("Starting AI-ccesibility Server", {
|
|
2149
|
-
version: "0.1.
|
|
2149
|
+
version: "0.1.3",
|
|
2150
2150
|
tools: ["analyze-with-axe", "analyze-with-pa11y", "analyze-with-eslint", "analyze-all"]
|
|
2151
2151
|
});
|
|
2152
2152
|
registerTools();
|