W3C MCP Server

日本語版 README

W3C/WHATWG/IETF Web仕様にアクセスするためのMCPサーバー。AIアシスタントに対し、仕様書、WebIDL定義、CSSプロパティ、HTML要素などの公式Web標準データへのアクセスを提供します。

インストール

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

または、npxで直接使用します：

npx @shuji-bonji/w3c-mcp

設定

Claude Desktop

Claude Desktopの設定ファイルに追加します：

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

claude mcp CLIを使用してサーバーを追加します：

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

または、上記と同じ mcpServers ブロックを ~/.claude.json またはプロジェクトレベルの .mcp.json に手動で編集して追加します。

Cursor

CursorのMCP設定（プロジェクト内の .cursor/mcp.json またはグローバル設定）に追加します：

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

利用可能なツール

仕様の検索

list_w3c_specs

W3C/WHATWG/IETFのWeb仕様をフィルタリングして一覧表示します。

パラメータ：

• organization (任意): 組織でフィルタリング - "W3C", "WHATWG", "IETF", または "all"

• keyword (任意): タイトルまたはショートネームのキーワードでフィルタリング

• category (任意): カテゴリでフィルタリング

• limit (任意): 結果の最大数（デフォルト: 50）

get_w3c_spec

特定のWeb仕様に関する詳細情報を取得します。

パラメータ：

• shortname (必須): 仕様のショートネーム（例: "service-workers", "appmanifest", "fetch"）

search_w3c_specs

クエリ文字列でWeb仕様を検索します。

パラメータ：

• query (必須): 検索クエリ（例: "service worker", "manifest", "storage"）

• limit (任意): 結果の最大数（デフォルト: 20）

WebIDL

get_webidl

仕様のWebIDLインターフェース定義を取得します。WebIDLはJavaScript APIを定義します。

パラメータ：

• shortname (必須): 仕様のショートネーム（例: "service-workers", "fetch", "dom"）

list_webidl_specs

WebIDL定義が利用可能なすべての仕様を一覧表示します。

CSS

get_css_properties

特定の仕様またはすべての仕様からCSSプロパティ定義を取得します。

パラメータ：

• spec (任意): 仕様のショートネーム（例: "css-grid-1", "css-flexbox-1"）

• property (任意): 名前で特定のCSSプロパティを検索

list_css_specs

プロパティ定義が利用可能なすべてのCSS仕様を一覧表示します。

HTML要素

get_html_elements

特定の仕様またはすべての仕様からHTML要素定義を取得します。

パラメータ：

• spec (任意): 仕様のショートネーム（例: "html", "svg"）

• element (任意): 名前で特定の要素を検索（例: "video", "canvas"）

list_element_specs

HTML要素定義が利用可能なすべての仕様を一覧表示します。

PWA

get_pwa_specs

Progressive Web App (PWA) 関連のすべての仕様を取得します。

パラメータ：

• coreOnly (任意): trueの場合、主要なPWA仕様（Service Worker, Manifest, Push, Notifications）のみを返します

get_spec_dependencies

仕様の基本情報を取得します。

注意: 依存関係データ（dependencies / dependents）は、アップストリームの web-specs パッケージではまだ公開されていないため、これらのフィールドは現在空の配列を返します。現時点では、ベースとなる仕様のメタデータのみが信頼できます。

パラメータ：

• shortname (必須): 仕様のショートネーム

使用例

Service Worker APIの検索

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

PWA技術の探索

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

CSS Gridプロパティの調査

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

Storage APIの検索

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

データソース

このMCPサーバーは、以下のW3C/webrefデータパッケージを使用しています：

これらのパッケージはW3Cによって管理されており、公式仕様から抽出された機械可読なデータを提供しています。

GitHubリポジトリ:

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

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

デバッグモード

環境変数でデバッグログを有効にします：

# 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

デバッグ出力には以下が含まれます：

• ツール呼び出しの引数

• 実行タイミング

• データ読み込みのパフォーマンス

アーキテクチャ

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

パフォーマンス

• 起動: すべてのデータの並列プリロードに約70ms

• 仕様検索: Mapベースのインデックスを使用してO(1)

• 検索: 完全一致での早期終了により最適化

開発

# 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

ライセンス

MIT