CanIUse MCP

🚀 CanIUse MCP服务器-浏览器兼容性智能

一个强大的模型上下文协议（MCP）服务器，提供智能CSS/JS功能兼容性检查，可配置浏览器目标，polyfill支持和智能项目扫描。非常适合使用人工智能工具（如Cursor、Claude和其他MCP兼容客户端）的web开发人员。

](https://www.npmjs.com/package/caniuse-mcp-server) 

✨ 主要特点

• 🔍 智能项目扫描：自动检测代码库中的CSS/JS功能
• 🎯 可配置的浏览器目标：支持任何具有自定义基线的浏览器版本
• 💊 Polyfill感知检查：当您有可用的polyfills时，将功能标记为“受支持”
• ⚡ 批量兼容性分析：立即跨多个浏览器检查整个项目
• 🛠️ 可采取的补救措施：获取特定的npm安装命令、代码示例和配置
• 📋 完整的工具链生成：自动生成Babel、PostCSS、Webpack和CI配置
• 🔧 运行时配置：通过文件、环境变量或MCP命令进行配置

📦 安装

全局安装（推荐）

npm install -g caniuse-mcp-server

本地安装

npm install caniuse-mcp-server

🔌 MCP客户端的设置

选项1：全局安装（推荐）

首先，全局安装该软件包：

npm install -g caniuse-mcp-server

光标IDE

添加到光标设置(Cmd/Ctrl + , → MCP):

{
  "mcpServers": {
    "caniuse": {
      "command": "caniuse-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

克劳德桌面版

添加到 claude_desktop_config.json:

{
  "mcpServers": {
    "caniuse": {
      "command": "caniuse-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

选项2：使用npx（替代方案）

如果全局安装不起作用，请使用npx：

光标IDE

{
  "mcpServers": {
    "caniuse": {
      "command": "npx",
      "args": ["caniuse-mcp-server"],
      "env": {}
    }
  }
}

克劳德桌面版

{
  "mcpServers": {
    "caniuse": {
      "command": "npx",
      "args": ["caniuse-mcp-server"],
      "env": {}
    }
  }
}

选项3：直接Node.js路径

如果您在命令解析方面有问题：

找到你的全局npm bin路径：

npm config get prefix
# On macOS/Linux, usually: /usr/local/bin or ~/.npm-global/bin
# On Windows: C:\Users\[username]\AppData\Roaming\npm

在MCP配置中使用完整路径：

{
  "mcpServers": {
    "caniuse": {
      "command": "/usr/local/bin/caniuse-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

⚡ 快速开始

1.基本兼容性检查

// Check your project against default baseline (Chrome 37)
scan_project

2.配置您的目标浏览器

// Set up for Chrome 57 with CSS Variables polyfill
manage_config {
  "action": "set_baseline",
  "baseline": "chrome-57"
}

manage_config {
  "action": "add_polyfill", 
  "polyfill": "css-variables"
}

3.检查具体功能

// Check if features work in your target browsers
check_compatibility {
  "features": ["css-variables", "promise-allsettled"],
  "targets": ["chrome-57", "firefox-70"]
}

4.获取修复建议

// Get actionable remediation steps
get_fixes {
  "features": ["css-grid", "arrow-functions"],
  "includeCommands": true,
  "includeExamples": true
}

🛠️ 可用工具

核心工具

scan_project -智能项目分析

自动扫描您的项目并检测兼容性问题。

// Basic project scan
scan_project

// Advanced scanning with custom targets
scan_project {
  "projectPath": "./src",
  "targets": ["chrome-57", "firefox-esr", "safari-12"],
  "maxDepth": 3,
  "excludeDirs": ["node_modules", "dist"]
}

check_compatibility -功能测试

根据浏览器目标检查特定功能或文件。

// Test specific features
check_compatibility {
  "features": ["css-variables", "promise-allsettled"],
  "targets": ["chrome-57", "firefox-70"]
}

// Analyze specific files
check_compatibility {
  "files": ["src/styles/main.css", "src/utils/async.js"],
  "targets": ["chrome-57"]
}

get_fixes -获取解决方案

接收可操作的补救措施和polyfill建议。

get_fixes {
  "features": ["css-variables", "promise-allsettled"],
  "priority": "critical",
  "includeExamples": true,
  "includeCommands": true
}

generate_configs -构建工具设置

为您的工具链生成完整的构建配置。

generate_configs {
  "configType": "all",
  "target": "chrome-57",
  "includePolyfills": true,
  "projectType": "react"
}

manage_config -配置管理

配置基线、polyfills和浏览器目标。

// View current configuration
manage_config { "action": "view" }

// Set baseline browser
manage_config { 
  "action": "set_baseline", 
  "baseline": "chrome-57" 
}

// Add polyfill support
manage_config { 
  "action": "add_polyfill", 
  "polyfill": "css-variables" 
}

// Add custom browser target
manage_config {
  "action": "add_target",
  "targetName": "chrome-65",
  "browser": "chrome",
  "version": "65"
}

🎯 支持的浏览器目标

🔧 配置

配置文件(.caniuse-config.json)

创建一个 .caniuse-config.json 在项目根目录中自定义行为：

{
  "defaultBaseline": "chrome-57",
  "customTargets": {
    "chrome-57": { "browser": "chrome", "version": "57" },
    "chrome-65": { "browser": "chrome", "version": "65" }
  },
  "polyfills": [
    "css-variables", 
    "promise-allsettled"
  ],
  "overrides": {
    "css-variables": "supported",
    "promise-allsettled": "supported"
  }
}

快速配置设置

// Create a configuration template
manage_config { "action": "create_template" }

// Or use pre-built examples

从复制示例配置 examples/ 目录：

# CSS Variables support for older browsers
cp node_modules/caniuse-mcp-server/examples/css-variables-polyfill.json .caniuse-config.json

# Promise.allSettled polyfill configuration  
cp node_modules/caniuse-mcp-server/examples/promise-allsettled-polyfill.json .caniuse-config.json

# Enterprise multi-browser support
cp node_modules/caniuse-mcp-server/examples/enterprise-config.json .caniuse-config.json

环境变量

通过CI/CD的环境变量进行配置：

# Set default baseline
export CANIUSE_DEFAULT_BASELINE="chrome-57"

# Configure polyfills
export CANIUSE_POLYFILLS='["css-variables","promise-allsettled"]'

# Set feature overrides
export CANIUSE_OVERRIDES='{"css-variables":"supported","promise-allsettled":"supported"}'

💡 真实世界用例

1.CSS变量Polyfill支持

// Set up CSS Variables for older browsers
manage_config {
  "action": "add_polyfill",
  "polyfill": "css-variables" 
}

manage_config {
  "action": "set_override",
  "feature": "css-variables",
  "override": "supported"
}

// Now CSS Variables will be treated as supported
check_compatibility {
  "features": ["css-variables"],
  "targets": ["chrome-40", "ie-11"]
}

2.Promise.all已解决的Polyfill支持

// Configure Promise.allSettled polyfill
manage_config {
  "action": "add_polyfill",
  "polyfill": "promise-allsettled"
}

// Set baseline to older Chrome that needs polyfill
manage_config {
  "action": "set_baseline", 
  "baseline": "chrome-60"
}

// Check compatibility - will show as supported due to polyfill
check_compatibility {
  "features": ["promise-allsettled"],
  "targets": ["chrome-60", "firefox-70"]
}

// Get implementation guidance
get_fixes {
  "features": ["promise-allsettled"],
  "includeCommands": true,
  "includeExamples": true
}

3.企业旧版浏览器支持

// Scan for enterprise browser compatibility
scan_project {
  "targets": ["chrome-50", "firefox-esr", "safari-12", "ie-11"]
}

// Configure extensive polyfill support
manage_config { "action": "create_template" }
// Edit .caniuse-config.json to include:
// "polyfills": ["css-variables", "promise-allsettled", "fetch", "object-assign"]

4.现代发展，逐步加强

// Check latest browser features
check_compatibility {
  "features": ["css-container-queries", "css-cascade-layers"],
  "targets": ["chrome-latest", "firefox-latest", "safari-latest"]
}

// Get fallback strategies
get_fixes {
  "features": ["css-container-queries"],
  "includeExamples": true
}

📈 增强输出示例

扫描项目输出

{
  "status": "completed",
  "project": {
    "path": "./src",
    "scanned": "24 files",
    "jsFiles": 12,
    "cssFiles": 8,
    "featuresDetected": 15
  },
  "compatibility": {
    "targets": ["chrome-37"],
    "overallScore": 73,
    "criticalIssues": 3,
    "commonUnsupported": ["css-grid", "arrow-functions", "const"]
  },
  "recommendations": [
    {
      "type": "critical",
      "title": "Critical Features Unsupported",
      "message": "These essential features are unsupported: css-grid, arrow-functions",
      "action": "Implement polyfills or use alternative approaches immediately"
    }
  ],
  "nextSteps": [
    {
      "step": 1,
      "title": "Get specific fixes",
      "command": "Use get_fixes tool with features: css-grid, arrow-functions, const",
      "priority": "high"
    }
  ]
}

获取修复输出

{
  "features": ["css-grid"],
  "fixes": [
    {
      "feature": "css-grid",
      "priority": "critical",
      "alternatives": ["flexbox", "CSS tables", "float layouts"],
      "polyfills": ["CSS Grid Polyfill"],
      "commands": [
        {
          "type": "install",
          "description": "Install css-grid polyfills",
          "command": "npm install postcss-grid-kiss --save-dev"
        }
      ],
      "cssExample": "/* Instead of Grid */\n.container { display: grid; }\n\n/* Use Flexbox */\n.container { display: flex; }"
    }
  ],
  "quickStart": [
    {
      "step": 1,
      "title": "Install critical polyfills",
      "command": "npm install css-grid-polyfill --save",
      "priority": "critical"
    }
  ]
}

🔧 配置示例

Babel配置（.babelrc）

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "chrome": "37" },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ]
}

PostCSS配置

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['Chrome >= 37']
    },
    'postcss-custom-properties': {
      preserve: false
    }
  }
};

🏗️ 开发工作流集成

Git挂钩

# .husky/pre-commit
echo "🔍 Checking browser compatibility..."
npx caniuse-mcp-server scan_project

CI/CD管道

# .github/workflows/compatibility.yml
- name: Check Browser Compatibility
  run: |
    npm install -g caniuse-mcp-server
    caniuse-mcp-server scan_project
    caniuse-mcp-server get_fixes --features="css-grid,promise-allsettled"

🚨 故障排除

常见问题

Cursor/Claude中出现“未找到工具”错误

这是最常见的问题。按顺序尝试这些解决方案：

1.验证全局安装

# Check if package is installed globally
npm list -g caniuse-mcp-server

# If not installed, install globally
npm install -g caniuse-mcp-server

# Test the command directly
caniuse-mcp-server
# Should show: "🚀 Enhanced CanIUse MCP Server running on stdio"

2.检查你的路径

# Verify npm global bin is in your PATH
echo $PATH | grep $(npm config get prefix)/bin

# If not found, add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export PATH="$(npm config get prefix)/bin:$PATH"

# Then restart your terminal and MCP client

3.尝试不同的安装方法

# Method 1: Clean reinstall
npm uninstall -g caniuse-mcp-server
npm install -g caniuse-mcp-server

# Method 2: Install without global flag and use npx
npm install caniuse-mcp-server
# Then use "npx caniuse-mcp-server" in MCP config

# Method 3: Install via different package manager
# Using yarn
yarn global add caniuse-mcp-server

# Using pnpm
pnpm add -g caniuse-mcp-server

4.更新MCP配置格式 确保您的Cursor/Claude配置使用正确的格式：

❌ 不正确：

{
  "mcpServers": {
    "caniuse": {
      "command": "caniuse-mcp-server"
    }
  }
}

✅ 对的：

{
  "mcpServers": {
    "caniuse": {
      "command": "caniuse-mcp-server",
      "args": [],
      "env": {}
    }
  }
}

5.手动测试MCP服务器

# Test if the server responds to MCP protocol
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | caniuse-mcp-server

# Should return a JSON response with available tools

其他常见问题

“找不到模块”错误

# Make sure package is installed correctly
npm install -g caniuse-mcp-server

# Clear npm cache if needed
npm cache clean --force

# Or use npx for one-time execution
npx caniuse-mcp-server

配置未加载

# Check if config file exists and is valid JSON
cat .caniuse-config.json | jq '.'

# Reset to defaults if corrupted
manage_config { "action": "reset" }

Polyfills不起作用

// Verify polyfill is added
manage_config { "action": "view" }

// Check override is set
manage_config {
  "action": "set_override",
  "feature": "css-variables",
  "override": "supported"
}

macOS/Linux上的权限错误

# Fix npm permissions
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

# Or reinstall npm with a node version manager
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install node

平台特定问题

macOS

# If using Homebrew node
brew reinstall node

# Check npm prefix
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

视窗

# Run as Administrator and install globally
npm install -g caniuse-mcp-server

# Add npm global path to system PATH
# Usually: C:\Users\[username]\AppData\Roaming\npm

Linux

# Use node version manager to avoid permission issues
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

调试模式

使用环境变量启用详细日志记录：

export DEBUG="caniuse-mcp-server*"
caniuse-mcp-server

还有问题吗？

1. 检查Node.js版本：需要Node.js 18+

   node --version

1. 验证npm配置:

   npm config list
   npm doctor

1. 尝试干净的环境:

   # Create a test directory
   mkdir test-caniuse && cd test-caniuse
   npx caniuse-mcp-server

1. 报告问题：如果以上都不起作用，请在https://github.com/Amirmahdi-Kaheh/caniuse-mcp/issues与：

- 您的操作系统 - Node.js版本(node --version) - npm版本(npm --version) - 完整的错误消息 - 您正在使用的MCP客户端（Cursor、Claude Desktop等）

🔗 链接和资源

• NPM包: https://www.npmjs.com/package/caniuse-mcp-server
• 我可以使用数据库吗: https://caniuse.com
• 模型上下文协议: https://docs.anthropic.com/en/docs/build-with-claude/mcp
• 光标IDE: https://cursor.sh
• 克劳德桌面版: https://claude.ai/desktop

🤝 贡献

我们欢迎捐款！请参阅我们的投稿指南：

1. 报告问题：发现错误或缺少功能？打开一个问题
2. 功能请求：对新功能有想法吗？请告诉我们
3. 拉取请求：想贡献代码吗？分叉并提交PR
4. 文档：帮助改进我们的文档和示例

开发设置

git clone 
cd caniuse-mcp-server
npm install
npm run dev  # Start in development mode

📊 为什么使用CanIUse MCP？

之前

• caniuse.com手动查找
• 猜测polyfill的需求
• 试错浏览器测试
• 单独的兼容性检查工具

之后

• AI驱动的兼容性分析
• 自动polyfill推荐
• 智能项目范围扫描
• 集成开发工作流程

快70% 兼容性检查 有目共睹的结果 🚀

📄 许可证

麻省理工学院许可证©2025马赫迪亚·卡赫

专为开发者社区打造 -免费使用、修改和分发。