W3c Mcp Server

W3C MCP サーバー

日本語版 README

W3C／WHATWG／IETF のウェブ仕様にアクセスするための MCP サーバーです。仕様、WebIDL 定義、CSS プロパティ、HTML 要素など、公式のウェブ標準データに AI アシスタントからアクセスできます。

インストール

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 のウェブ仕様を、任意のフィルターを指定して一覧表示します。

パラメーター：

• organization（任意）：組織で絞り込みます。"W3C"、"WHATWG"、"IETF"、または "all" を指定します
• keyword（任意）：タイトルまたは短縮名に含まれるキーワードで絞り込みます
• category（任意）：カテゴリで絞り込みます
• limit（任意）：結果の最大数（デフォルト：50）

get_w3c_spec

特定のウェブ仕様の詳細情報を取得します。

パラメーター：

• shortname（必須）：仕様の短縮名（例："service-workers"、"appmanifest"、"fetch"）

search_w3c_specs

検索クエリでウェブ仕様を検索します。

パラメーター：

• 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）のみを返します
• includeRelated（任意）：true の場合、タイトルに storage、caching、offline などが含まれる関連仕様（Storage、Storage Buckets、Storage Access API など）も含めます。coreOnly が true の場合は無視されます。

デフォルトでは、PWA_SHORTNAMES（src/constants/index.ts）に記載された仕様のみが返され、短縮名の完全一致で照合されます。

使用例

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.

ストレージ API を検索する

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

データソース

この MCP サーバーでは、以下の W3C／webref データパッケージを使用します。

パッケージ	説明
web-specs	すべての Web 仕様のメタデータ
@webref/idl	WebIDL インターフェース定義
@webref/css	CSS プロパティと値
@webref/elements	HTML 要素の定義

これらのパッケージは 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