Check browser compatibility for any web feature via caniuse-mcp (npx)
When building for the web, agents need to verify that CSS/JS/HTML features work across target browsers before recommending them. caniuse-mcp exposes the full caniuse.com + MDN + web-features dataset over MCP — no API key, no auth, credential-free via npx.
Recipe: Check browser compatibility for web features via caniuse-mcp
Server: [email protected] (npm) Transport: stdio Launch: npx -y [email protected] Auth: none — fully credential-free Tools: 3 (caniuse_feature, browserslist_compatibility_check, list_tools)
Tool 1: caniuse_feature
Look up any web feature by keyword. Returns merged results from caniuse.com, MDN, and web-features — per-browser version support with "supported", "partial", "not_supported" status and notes (flag requirements, known bugs).
Input schema:
{"feature": "string (required) — e.g. 'flexbox', 'grid', 'container-queries', 'array.at'"}Tool 2: browserslist_compatibility_check
Check a feature against a browserslist query (e.g. > 1%, last 2 versions, not dead) or a project's .browserslistrc / package.json config. Returns which target browsers support the feature and which don't.
Input schema:
{
"feature": "string (required)",
"browserslistQuery": "string (optional) — e.g. '> 1%, last 2 versions, not dead'",
"configPath": "string (optional) — path to .browserslistrc",
"projectPath": "string (optional) — project root to auto-find config"
}When to use
- Agent recommending a CSS feature → check if it works in the user's target browsers
- Reviewing code that uses modern JS APIs → verify compatibility
- CI/agent workflow checking a PR's new CSS against the project's browserslist
Gotchas
- Response can be large: a single query for "grid" returns 45KB+ because it matches multiple sub-features (css-grid, css-grid-lanes, subgrid, plus dozens of MDN property entries). Agents should extract only the top-level caniuse entry or filter by source.
- The
browserslist_compatibility_checktool's "Target Browsers" summary line is the most actionable part — skip the per-entry detail unless debugging a specific version. - Feature names are fuzzy-matched: "container-queries" returns 12 entries including size queries, style queries, scroll-state queries, and anchor position queries. Be specific ("css-container-queries") to narrow results.
{ "server": "[email protected]", "transport": "stdio", "launch": "npx -y [email protected]", "protocol_version": "2024-11-05", "handshake": { "initialize": { "request": { "jsonrpc": "2.0", "id": 1, "method": "initialize", "params": { "protocolVersion": "2024-11-05", "capabilities": {}, "clientInfo": { "name": "pathfinder", "version": "1.0.0" } } }, "response": { "result": { "protocolVersion": "2024-11-05", "capabilities": { "tools": {}, "logging": {}, "completions": {} }, "serverInfo": { "name": "caniuse-mcp", "version": "1.0.0" } } } }, "tools_list": { "request": { "jsonrpc": "2.0", "id": 2, "method": "tools/list", "params": {} }, "tool_count": 3, "tools": ["caniuse_feature", "browserslist_compatibility_check", "list_tools"] } }, "calls": [ { "method": "tools/call", "tool": "caniuse_feature", "args": { "feature": "container-queries" }, "result_summary": "12 entries returned from caniuse, web-features, and MDN sources. CSS Container Queries (Size): Chrome 106+, Firefox 110+, Safari 16.0+, Edge 106+. CSS Container Style Queries: Chrome 111+ (partial, custom properties only), Firefox 151+, Safari 18.0+ (partial).", "status": "success" }, { "method": "tools/call", "tool": "browserslist_compatibility_check", "args": { "feature": "css-grid", "browserslistQuery": "> 1%, last 2 versions, not dead" }, "result_summary": "45KB response. Target browsers: and_chr 148, chrome 118/147+, ios_saf 18.5+, edge 147-149, firefox 150-151, safari 26.3-26.4, samsung 29-30, op_mob 80, and_uc 15.5, opera 127/131. CSS Grid fully supported across all targets.", "status": "success" } ] }