caniuse-mcp

caniuse-mcp

An MCP server that provides browser compatibility data and web API support information using caniuse.com, MDN BCD, and Web Features, enabling developers to check feature support across browsers and against browserslist configurations.

Category
Visit Server

README

šŸ“Š Caniuse MCP

npm version License: MIT

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:

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


Made with ā¤ļø by yujeongJeon

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured