yujeongJeon/caniuse-mcp

📊 Caniuse MCP

A Model Context Protocol (MCP) server providing browser compatibility data and web API support information using the caniuse.com database.

Features

• Multiple Data Sources: Combines data from CanIUse, MDN BCD, and Web Features for comprehensive compatibility information
• Browser Compatibility Data: Get detailed compatibility information for web features across all major browsers
• Baseline Status: See Web Features baseline status (high/low) for modern browser support
• Feature Search: Look up web features by name using comprehensive databases
• Always Up-to-Date: Queries the latest compatibility data in real-time
• MCP Compatible: Works seamlessly with any MCP-compatible client
• Smart Feature Sampling: Provides accurate compatibility data through intelligent sampling of feature variants and edge cases

[!NOTE] However, some MCP clients may not support sampling features, which could affect the comprehensiveness of the compatibility information returned.

Installation

npm install -g caniuse-mcp

Or with pnpm:

pnpm add -g caniuse-mcp

Usage

As an MCP Server

Add to your MCP client configuration.

Vscode with copilot:

{
  "servers": {
    "caniuse": {
      "command": "npx",
      "args": ["-y", "caniuse-mcp"]
    }
  }
}

Claude desktop:

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

Available Tools

1. caniuse_feature

Look up browser compatibility for web features.

Parameters:

• feature (string): The feature to look up (e.g., "flexbox", "grid", "promises", "fetch")

Example:

Please tell me the scope of the "promises" browser support.

Response:

Returns detailed compatibility information from multiple sources:

CanIUse Data:

• Support status for major browsers: Chrome, Firefox, Safari, Edge, iOS Safari, Chrome Android
• Version-specific support information
• Partial support details
• Notes about implementation differences
• Polyfill availability

Web Features Data:

• Baseline status (high/low/false) indicating cross-browser support maturity
• Related MDN documentation IDs
• Specification links
• Modern browser support information

MDN Browser Compatibility Data:

• Detailed API/feature support
• Experimental and deprecated status
• Standard track information

2. browserslist_compatibility_check

Check web feature compatibility against your browserslist configuration.

Parameters:

• feature (string): The feature to check compatibility for
• browserslistQuery (string, optional): Browserslist query string (e.g., "> 1%, last 2 versions")
• configPath (string, optional): Path to .browserslistrc file
• projectPath (string, optional): Path to project root with package.json or .browserslistrc

Example:

Check if array.at is compatible with my browserslist config: ">= 1%, not dead, Chrome >= 106, ios_saf >= 16"

Response:

Returns compatibility results filtered by your target browsers:

• Target browser list from your browserslist query
• Feature support status for each target browser version
• Identifies compatibility issues with specific browser versions
• Combines data from CanIUse, MDN BCD, and Web Features

Use Cases:

• Validate new web features against your project's browser support policy
• Check if a feature works in your target browsers before using it
• Analyze compatibility with company-specific browserslist configurations
• Ensure features work in specific browser version ranges

3. list_tools

List all available tools and their descriptions.

Example Response:

# Available Tools in caniuse-mcp

## caniuse-feature
Look up the compatibility of web features across different browsers using data from caniuse.com.

## browserslist-compatibility-check
Check web feature compatibility against your browserslist configuration.

## list-tools  
List all available tools and their descriptions

Supported Browsers

• Desktop: Chrome, Firefox, Safari, Edge
• Mobile: iOS Safari, Android Chrome, Samsung Internet
• Legacy: Internet Explorer (with polyfill information)

Feature Categories

The server supports compatibility data for:

• CSS Properties & Values
• HTML Elements & Attributes
• JavaScript APIs
• Web APIs (Fetch, WebSockets, etc.)
• ECMAScript Features
• Media & Graphics APIs
• Security Features
• Performance APIs
• And many more...

Development

Prerequisites

• Node.js 20+
• pnpm@10.6.5

Setup

# Clone the repository
git clone https://github.com/yujeongJeon/caniuse-mcp.git
cd caniuse-mcp

# Install dependencies
pnpm install

# Build the project
pnpm build

Scripts

• pnpm build - Build the TypeScript project
• pnpm lint - Run ESLint
• pnpm prettier - Check code formatting
• pnpm fix - Fix linting and formatting issues

Project Structure

src/
├── index.ts              # Main server entry point
├── lib/
│   ├── browserslist.ts   # Browserslist query parser
│   ├── caniuse-api.ts    # Caniuse API client
│   ├── caniuse-db.ts     # Data processing utilities
│   ├── compat-utils.ts   # Multi-source compatibility data aggregation
│   ├── consts.ts         # Constants and configuration
│   ├── mdn.ts            # MDN compatibility data
│   └── web-features.ts   # Web Features baseline data
└── tools/
    ├── index.ts          # Tools registry
    ├── registry.ts       # Tool registration system
    ├── browserslist-compat/
    │   ├── index.ts      # Browserslist compatibility
    │   └── schema.ts     # Input validation schemas
    ├── caniuse/
    │   ├── index.ts      # Multi-source feature 
    │   └── schema.ts     # Input validation schemas
    └── list-tools/
        └── index.ts      # Tools listing functionality

API Reference

Tool: caniuse_feature

Fetches compatibility data for a specified web feature.

Input Schema:

{
  feature: string // Feature name to look up
}

Output:

• Comprehensive browser support information
• Version-specific compatibility data
• Implementation notes and caveats
• Polyfill availability information

Tool: browserslist_compatibility_check

Checks web feature compatibility against browserslist configuration.

Input Schema:

{
  feature: string // Feature name to check
  browserslistQuery?: string // Browserslist query string
  configPath?: string // Path to .browserslistrc file
  projectPath?: string // Path to project root
}

Output:

• Target browser list from browserslist query
• Feature support status filtered by target browsers
• Compatibility issues with specific browser versions
• Combined data from CanIUse, MDN BCD, and Web Features

Tool: list_tools

Lists all available tools in the MCP server.

Input Schema:

{} // No parameters required

Output:

• Tool names and descriptions
• Usage information
• Available functionality overview

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License

Data Sources

This MCP server combines compatibility data from multiple authoritative sources:

• Caniuse.com - Comprehensive browser support tables for web technologies
• Web Features - Baseline status and cross-browser feature availability
• MDN Browser Compatibility Data - Mozilla's detailed compatibility database

By leveraging these three complementary data sources, the server provides the most complete and accurate browser compatibility information for web developers:

• CanIUse provides detailed version-by-version support history
• Web Features offers baseline status to quickly understand cross-browser maturity
• MDN BCD adds specification details and experimental/deprecated flags

References

• Model Context Protocol for the MCP specification
• FastMCP for the MCP server framework
• MCP Client Feature support matrix

Made with ❤️ by yujeongJeon