关键词

浏览器兼容性Web开发caniuseMDN前端技术支持

项目简介

Caniuse MCP 是一个基于 Model Context Protocol (MCP) 的服务器，它利用 caniuse.com、MDN 浏览器兼容性数据 (BCD) 和 Web Features 等权威数据源，为 LLM (大型语言模型) 客户端提供关于 Web 技术浏览器兼容性的实时查询服务。它允许用户快速了解各种 Web 功能在主流浏览器上的支持状态、基线状态、API 详情以及与特定 'browserslist' 配置的兼容性。

主要功能点

  • 全面兼容性查询: 获取 CSS 属性、HTML 元素、JavaScript API、Web API 等在所有主流浏览器上的详细兼容性信息。
  • 基线状态识别: 查看 Web 功能的基线状态（高/低），了解现代浏览器对该功能的支持成熟度。
  • 智能特性搜索: 通过名称查询 Web 功能，聚合多个权威数据库的数据。
  • 实时更新数据: 始终查询最新的兼容性数据，确保信息的准确性。
  • 'browserslist' 兼容性检查: 根据您的 'browserslist' 配置（如项目中的 '.browserslistrc' 或 'package.json'），检查特定 Web 功能的兼容性，确保您的项目目标浏览器能够支持所需功能。
  • 工具列表: 可以查询服务器当前提供的所有工具及其详细说明。

安装步骤

您可以通过 npm 或 pnpm 全局安装此 MCP 服务器：

npm install -g caniuse-mcp

或者使用 pnpm:

pnpm add -g caniuse-mcp

服务器配置

要将 Caniuse MCP 服务器集成到您的 MCP 客户端（如 VS Code Copilot、Claude Desktop 等），您需要将其配置添加到客户端的服务器列表中。以下是配置示例：

{
  "servers": {
    "caniuse": {
      "command": "npx",
      "args": ["-y", "caniuse-mcp"]
    }
  }
}
  • 'servers': 这是 MCP 客户端中用于配置外部服务器的顶级键。
  • 'caniuse': 这是您为该 MCP 服务器定义的唯一名称，客户端会使用此名称来引用它。
  • 'command': 指定启动服务器的可执行命令。这里使用 'npx' 来运行全局安装的 'caniuse-mcp' 包。
  • 'args': 传递给 'command' 的参数列表。'-y' 允许 'npx' 自动确认安装，'caniuse-mcp' 是要运行的包名。

基本使用方法

配置完成后，您的 MCP 客户端即可通过 LLM 客户端调用 Caniuse MCP 服务器的工具。您可以通过自然语言向 LLM 提问，LLM 会根据需要调用相应的工具。

  • 查询浏览器兼容性: 示例提示: "请告诉我 'promises' 的浏览器支持范围。" LLM 客户端调用工具: 'caniuse_feature(feature="promises")' 结果: 返回关于 'promises' 在 Chrome, Firefox, Safari, Edge, iOS Safari 等浏览器上的详细兼容性数据，包括支持版本、部分支持、是否需要前缀等。

  • 检查 'browserslist' 兼容性: 示例提示: "检查 'array.at' 是否与我的 'browserslist' 配置 ''>= 1%, not dead, Chrome >= 106, ios_saf >= 16'' 兼容。" LLM 客户端调用工具: 'browserslist_compatibility_check(feature="array.at", browserslistQuery=">= 1%, not dead, Chrome >= 106, ios_saf >= 16")' 结果: 返回 'array.at' 在您指定 'browserslist' 配置下的目标浏览器中的兼容性状态，并指出潜在的兼容性问题。

  • 列出可用工具: 示例提示: "列出所有可用的工具。" LLM 客户端调用工具: 'list_tools()' 结果: 返回所有可用的工具名称、描述和参数信息。

信息

分类

开发者工具

访问项目