Web Compat MCP

Web Compat MCP服务器

 ](https://www.npmjs.com/package/@shuji-bonji/web-compat-mcp) 

MCP服务器为整个Web平台提供浏览器兼容性数据。

回答问题： _“这在浏览器中真的有效吗？”_

完全离线 --所有数据都通过npm包捆绑在一起。无API调用，无延迟。

🇯🇵 日语版README在这里

建筑

┌─────────────────────────────────────────────┐
│           web-compat-mcp server             │
│                                             │
│  ┌───────────────┐  ┌───────────────────┐   │
│  │ @mdn/browser- │  │   web-features    │   │
│  │  compat-data  │  │  (W3C WebDX CG)   │   │
│  │  15K+ features│  │  1K+ features     │   │
│  │  BCD JSON     │  │  Baseline status  │   │
│  └───────┬───────┘  └────────┬──────────┘   │
│          │   cross-reference │              │
│          └────────┬──────────┘              │
│                   │                         │
│          ┌────────▼────────┐                │
│          │   7 MCP Tools   │                │
│          └────────┬────────┘                │
│                   │ stdio                   │
└───────────────────┼─────────────────────────┘
                    │
            MCP Client (Claude, etc.)

工具

标识符约定

这两个数据源使用不同的标识符方案，每个工具都需要一个特定的标识符方案：

BCD是细粒度的(api.PushManager, api.PushEvent, api.PushSubscription 是单独的条目），而web功能将相关规格分组为单个功能(push 涵盖所有三个）。当不确定确切的标识符时，运行 compat_search 第一。输入规范化处理烤肉串案例查询(view-transition → viewtransition)和尾随 .0 版本(17.0 → 17)自动。

快速开始

npx（不安装）

npx @shuji-bonji/web-compat-mcp

npm（全局）

npm install -g @shuji-bonji/web-compat-mcp
web-compat-mcp

MCP客户端配置

克劳德桌面版

添加 claude_desktop_config.json:

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

克劳德代码

claude mcp add web-compat -- npx -y @shuji-bonji/web-compat-mcp

VS代码（复制/继续）

添加 .vscode/mcp.json:

{
	"servers": {
		"web-compat": {
			"command": "npx",
			"args": ["-y", "@shuji-bonji/web-compat-mcp"]
		}
	}
}

使用示例

检查浏览器兼容性

“Safari中是否支持Push API？”

→ compat_check feature: "api.PushManager"

返回跨浏览器的版本支持、基线状态和MDN/spec文档的链接。

搜索功能

“查找CSS网格功能”

→ compat_search query: "grid" category: "css"

返回具有标准/实验/弃用标志的匹配功能ID。

比较功能

“比较fetch和XMLHttpRequest”

→ compat_compare features: ["api.fetch", "api.XMLHttpRequest"]

返回带有版本支持和基线状态的并排比较表。

检查基线状态

“容器查询是基线吗？”

→ compat_get_baseline feature: "container-queries"

返回基线级别（广泛可用/新可用/非基线）、浏览器支持和相关BCD功能。

按浏览器版本查找功能

“Chrome 120中添加了哪些CSS功能？”

→ compat_check_support browser: "chrome" version: "120" category: "css"

返回在指定浏览器版本中添加的功能。

工作流程：组合多种工具

“我想在我的PWA中使用Push API——今天现实吗？”

Step 1 → compat_check        feature: "api.PushManager"
         # Per-API browser versions (Chrome 42+, Safari 16+, Firefox 44+)

Step 2 → compat_get_baseline  feature: "push"
         # Feature-group view: Newly Available since 2023-03-27

Step 3 → compat_compare       features: ["api.PushManager", "api.Notification"]
         # Side-by-side when your PWA depends on both

与面向规范的服务器链接，例如 W3C MCP 或 RFCXML-MCP，法学硕士可以回答这两个问题 _“规格要求什么？”_ 和 _“今天浏览器中真正起作用的是什么？”_ 在一次谈话中。

输出格式

所有工具支持 response_format 参数：

• "markdown" （默认）--人类可读的表格和格式化文本
• "json" --结构化数据 structuredContent 用于程序化使用

补充MCP服务器

此服务器旨在与其他MCP服务器协同工作：

数据源

发展

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test              # Unit tests (66 tests)
npm run test:e2e      # E2E tests via JSON-RPC (10 tests)

# Lint & format (Biome 2.x)
npm run lint          # Check
npm run lint:fix      # Auto-fix
npm run format        # Format

# Type check
npm run typecheck

许可证

麻省理工学院——见 许可证