W3C MCP 服务器

npm version License: MIT Node.js MCP Built with Claude Code

用于访问 W3C/WHATWG/IETF Web 规范的 MCP 服务器。为 AI 助手提供对官方 Web 标准数据的访问权限，包括规范、WebIDL 定义、CSS 属性和 HTML 元素。

安装

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

或者手动编辑 ~/.claude.json / 项目级的 .mcp.json，并填入上述相同的 mcpServers 代码块。

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`

获取所有与渐进式 Web 应用 (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.

搜索存储 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 仓库：

调试模式

通过环境变量启用调试日志记录：

# 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

w3c-mcp