W3C MCP-Server

Japanische Version README

MCP-Server für den Zugriff auf W3C/WHATWG/IETF-Webspezifikationen. Bietet KI-Assistenten Zugriff auf offizielle Webstandard-Daten, einschließlich Spezifikationen, WebIDL-Definitionen, CSS-Eigenschaften und HTML-Elementen.

Installation

npm install -g @shuji-bonji/w3c-mcp

Oder verwenden Sie es direkt mit npx:

npx @shuji-bonji/w3c-mcp

Konfiguration

Claude Desktop

Fügen Sie dies zu Ihrer Claude Desktop-Konfigurationsdatei hinzu:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json Linux: ~/.config/Claude/claude_desktop_config.json

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

Claude Code

Fügen Sie den Server über die claude mcp CLI hinzu:

claude mcp add w3c -- npx -y @shuji-bonji/w3c-mcp

Oder bearbeiten Sie ~/.claude.json / .mcp.json auf Projektebene manuell mit dem oben gezeigten mcpServers-Block.

Cursor

Fügen Sie dies zu Ihren Cursor-MCP-Einstellungen hinzu (.cursor/mcp.json in Ihrem Projekt oder in den globalen Einstellungen):

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

Verfügbare Tools

Spezifikationssuche

list_w3c_specs

Listet W3C/WHATWG/IETF-Webspezifikationen mit optionaler Filterung auf.

Parameter:

• organization (optional): Filtern nach Organisation - "W3C", "WHATWG", "IETF" oder "all"

• keyword (optional): Filtern nach Schlüsselwort im Titel oder Kurznamen

• category (optional): Filtern nach Kategorie

• limit (optional): Maximale Anzahl der Ergebnisse (Standard: 50)

get_w3c_spec

Ruft detaillierte Informationen zu einer bestimmten Webspezifikation ab.

Parameter:

• shortname (erforderlich): Kurzname der Spezifikation (z. B. "service-workers", "appmanifest", "fetch")

search_w3c_specs

Durchsucht Webspezifikationen nach einer Suchzeichenfolge.

Parameter:

• query (erforderlich): Suchanfrage (z. B. "service worker", "manifest", "storage")

• limit (optional): Maximale Anzahl der Ergebnisse (Standard: 20)

WebIDL

get_webidl

Ruft WebIDL-Schnittstellendefinitionen für eine Spezifikation ab. WebIDL definiert die JavaScript-APIs.

Parameter:

• shortname (erforderlich): Kurzname der Spezifikation (z. B. "service-workers", "fetch", "dom")

list_webidl_specs

Listet alle Spezifikationen auf, für die WebIDL-Definitionen verfügbar sind.

CSS

get_css_properties

Ruft CSS-Eigenschaftsdefinitionen aus einer bestimmten Spezifikation oder allen Spezifikationen ab.

Parameter:

• spec (optional): Kurzname der Spezifikation (z. B. "css-grid-1", "css-flexbox-1")

• property (optional): Suche nach einer bestimmten CSS-Eigenschaft nach Namen

list_css_specs

Listet alle CSS-Spezifikationen auf, für die Eigenschaftsdefinitionen verfügbar sind.

HTML-Elemente

get_html_elements

Ruft HTML-Elementdefinitionen aus einer bestimmten Spezifikation oder allen Spezifikationen ab.

Parameter:

• spec (optional): Kurzname der Spezifikation (z. B. "html", "svg")

• element (optional): Suche nach einem bestimmten Element nach Namen (z. B. "video", "canvas")

list_element_specs

Listet alle Spezifikationen auf, für die HTML-Elementdefinitionen verfügbar sind.

PWA

get_pwa_specs

Ruft alle Progressive Web App (PWA)-bezogenen Spezifikationen ab.

Parameter:

• coreOnly (optional): Wenn true, werden nur die PWA-Kernspezifikationen zurückgegeben (Service Worker, Manifest, Push, Notifications)

get_spec_dependencies

Ruft grundlegende Informationen für eine Spezifikation ab.

Hinweis: Abhängigkeitsdaten (dependencies / dependents) werden vom vorgelagerten web-specs-Paket noch nicht bereitgestellt, daher geben diese Felder derzeit leere Arrays zurück. Nur die Basis-Spezifikationsmetadaten sind derzeit zuverlässig.

Parameter:

• shortname (erforderlich): Kurzname der Spezifikation

Anwendungsbeispiele

Service Worker APIs finden

Use the get_webidl tool with shortname "service-workers" to see the ServiceWorker interface definitions.

PWA-Technologien erkunden

Use get_pwa_specs to see all PWA-related specifications, then use get_w3c_spec for details on each one.

CSS Grid-Eigenschaften nachschlagen

Use get_css_properties with spec "css-grid-1" to see all CSS Grid layout properties.

Nach Storage-APIs suchen

Use search_w3c_specs with query "storage" to find all storage-related specifications.

Datenquellen

Dieser MCP-Server verwendet die folgenden W3C/webref-Datenpakete:

Diese Pakete werden vom W3C gepflegt und stellen maschinenlesbare Daten bereit, die aus offiziellen Spezifikationen extrahiert wurden.

GitHub-Repositories:

• https://github.com/w3c/browser-specs

• https://github.com/w3c/webref

Debug-Modus

Aktivieren Sie das Debug-Logging mit Umgebungsvariablen:

# Enable debug logging
W3C_MCP_DEBUG=true npx @shuji-bonji/w3c-mcp

# Enable performance logging only
W3C_MCP_PERF=true npx @shuji-bonji/w3c-mcp

Die Debug-Ausgabe enthält:

• Argumente für Tool-Aufrufe

• Ausführungszeit

• Leistung beim Laden von Daten

Architektur

src/
├── index.ts           # MCP server entry point
├── constants/
│   └── index.ts       # Centralized configuration constants
├── data/
│   └── loader.ts      # Data loading with caching
├── tools/             # Tool implementations
│   ├── list-specs.ts
│   ├── get-spec.ts
│   ├── search-specs.ts
│   ├── get-webidl.ts
│   ├── get-css.ts
│   ├── get-elements.ts
│   └── get-pwa-specs.ts
├── schemas/
│   └── index.ts       # Zod validation schemas
├── errors/
│   └── index.ts       # Custom error classes
├── utils/
│   ├── logger.ts      # Debug logging utilities
│   ├── mapper.ts      # Spec data mapping utilities
│   ├── search.ts      # Generic search utilities
│   └── suggestions.ts # Suggestion generation utilities
└── types/
    └── index.ts       # TypeScript type definitions

tests/
├── setup.ts           # Test setup
├── data/              # Data loader tests
├── tools/             # Tool tests
└── integration/       # MCP server integration tests

Leistung

• Start: ~70ms paralleles Vorladen aller Daten

• Spezifikationssuche: O(1) unter Verwendung eines Map-basierten Index

• Suche: Optimiert mit vorzeitigem Abbruch bei exakten Übereinstimmungen

Entwicklung

# Clone the repository
git clone https://github.com/shuji-bonji/w3c-mcp.git
cd w3c-mcp

# Install dependencies
npm install

# Build
npm run build

# Run in development mode
npm run dev

# Run with debug logging
W3C_MCP_DEBUG=true npm start

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Lint code
npm run lint

# Format code
npm run format

# Lint + format (auto-fix)
npm run check

Lizenz

MIT