CanIUse MCP

Instructions

Implementation Reference

• src/enhanced-tools.js:96-125 (handler)

  Main handler function for the get_fixes tool. Parses arguments, validates input, calls FixGenerator.generateFixes, and formats the response.
  export function handleGetFixes(args) { const { features, priority = 'all', includeExamples = true, includeCommands = true } = args; if (!features || features.length === 0) { return { error: true, message: 'No features specified for fixes', suggestion: 'Provide an array of feature names that need fixes (from compatibility check results)' }; } const result = fixGenerator.generateFixes(features, { priority, includeExamples, includeCommands }); return { features, fixes: result.fixes, summary: result.summary, quickStart: result.quickStart, instructions: { step1: 'Review the fixes for each feature below', step2: 'Run the provided installation commands', step3: 'Follow the configuration instructions', step4: 'Use generate_configs tool for complete build setup' } }; }
• index.js:90-125 (registration)

  MCP server registration of the get_fixes tool, including input schema definition and error-handling wrapper around handleGetFixes.
  server.registerTool( "get_fixes", { title: "Fix Generator", description: "Get actionable remediation steps, polyfills, and alternatives for unsupported features", inputSchema: { features: z.array(z.string()).describe("Features that need fixes (from compatibility check results)"), priority: z.enum(["critical", "high", "medium", "low", "all"]).optional().default("all").describe("Filter fixes by priority level"), includeExamples: z.boolean().optional().default(true).describe("Include code examples in the response"), includeCommands: z.boolean().optional().default(true).describe("Include terminal commands for installation/setup") } }, async (args) => { try { const result = handleGetFixes(args); return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] }; } catch (error) { return { content: [{ type: "text", text: JSON.stringify({ error: true, message: error.message, suggestion: "Provide an array of feature names that need fixes." }, null, 2) }], isError: true }; } } );
• index.js:96-100 (schema)

  Zod input schema defining parameters for the get_fixes tool: features (required array), priority, includeExamples, includeCommands.
  features: z.array(z.string()).describe("Features that need fixes (from compatibility check results)"), priority: z.enum(["critical", "high", "medium", "low", "all"]).optional().default("all").describe("Filter fixes by priority level"), includeExamples: z.boolean().optional().default(true).describe("Include code examples in the response"), includeCommands: z.boolean().optional().default(true).describe("Include terminal commands for installation/setup") }
• src/fix-generator.js:201-245 (helper)

  Core generateFixes method in FixGenerator class that looks up fixes from the internal database, optionally generates commands and summaries for each feature.
  generateFixes(features, options = {}) { const { priority = 'all', includeExamples = true, includeCommands = true } = options; const fixes = features.map(feature => { const fixInfo = this.fixDatabase[feature]; if (!fixInfo) { return { feature, status: 'unknown', message: `No fix information available for ${feature}`, suggestions: [ 'Check caniuse.com for manual compatibility info', 'Search for polyfills or alternative implementations', 'Consider progressive enhancement' ] }; } const fix = { feature, priority: fixInfo.priority, alternatives: fixInfo.alternatives, polyfills: fixInfo.polyfills || [], buildSteps: fixInfo.buildSteps || [], documentation: fixInfo.documentation }; if (includeExamples) { if (fixInfo.cssExample) fix.cssExample = fixInfo.cssExample; if (fixInfo.jsExample) fix.jsExample = fixInfo.jsExample; } if (includeCommands) { fix.commands = this._generateCommands(feature, fixInfo); } return fix; }); return { fixes, summary: this._generateFixSummary(fixes), quickStart: this._generateQuickStart(fixes) }; }
• src/fix-generator.js:2-154 (helper)

  Constructor initializes FixGenerator with fixDatabase containing detailed fix information (priorities, alternatives, polyfills, build steps, examples) for various CSS/JS features.
  constructor() { this.fixDatabase = { // CSS Fixes 'css-grid': { priority: 'critical', alternatives: ['flexbox', 'CSS tables', 'float layouts'], polyfills: ['CSS Grid Polyfill'], buildSteps: [ 'npm install postcss-grid-kiss --save-dev', 'Add postcss-grid-kiss to PostCSS plugins' ], cssExample: `/* Instead of Grid */ .container { display: grid; grid-template-columns: 1fr 2fr; } /* Use Flexbox */ .container { display: flex; } .item1 { flex: 1; } .item2 { flex: 2; }`, documentation: 'https://css-tricks.com/snippets/css/complete-guide-grid/' }, 'flexbox': { priority: 'high', alternatives: ['CSS tables', 'inline-block', 'float layouts'], polyfills: ['flexibility.js', 'flexie'], buildSteps: [ 'npm install flexibility --save', 'Add flexibility polyfill to your HTML' ], cssExample: `/* Add vendor prefixes */ .container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }`, prefixes: ['-webkit-', '-moz-', '-ms-'], documentation: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/' }, 'css-variables': { priority: 'medium', alternatives: ['Sass variables', 'Less variables', 'PostCSS custom properties'], polyfills: ['css-vars-ponyfill'], buildSteps: [ 'npm install css-vars-ponyfill --save', 'npm install postcss-custom-properties --save-dev' ], cssExample: `/* Instead of CSS Variables */ :root { --main-color: blue; } .element { color: var(--main-color); } /* Use fixed values with Sass */ $main-color: blue; .element { color: $main-color; }`, documentation: 'https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties' }, 'object-fit': { priority: 'medium', alternatives: ['background-size on wrapper divs'], polyfills: ['object-fit-images'], buildSteps: [ 'npm install object-fit-images --save', 'Import and initialize polyfill in JS' ], cssExample: `/* Instead of object-fit */ img { object-fit: cover; } /* Use background approach */ .img-wrapper { background-image: url(image.jpg); background-size: cover; background-position: center; }`, jsExample: `import objectFitImages from 'object-fit-images'; objectFitImages();`, documentation: 'https://github.com/bfred-it/object-fit-images' }, // JavaScript Fixes 'arrow-functions': { priority: 'high', alternatives: ['function expressions', 'regular functions'], polyfills: [], buildSteps: [ 'npm install @babel/preset-env --save-dev', 'Add "@babel/preset-env" to .babelrc presets' ], jsExample: `// Instead of arrow functions const add = (a, b) => a + b; // Use regular functions const add = function(a, b) { return a + b; };`, babelConfig: { presets: [['@babel/preset-env', { targets: { chrome: '37' } }]] }, documentation: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions' }, 'const': { priority: 'high', alternatives: ['var declarations'], polyfills: [], buildSteps: [ 'npm install @babel/preset-env --save-dev', 'Configure Babel to transpile const/let' ], jsExample: `// Instead of const/let const value = 'hello'; let counter = 0; // Use var (with careful scoping) var value = 'hello'; var counter = 0;`, documentation: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const' }, 'template-literals': { priority: 'medium', alternatives: ['string concatenation'], polyfills: [], buildSteps: [ 'npm install @babel/preset-env --save-dev', 'Enable template literal transformation' ], jsExample: `// Instead of template literals const message = \`Hello \${name}!\`; // Use concatenation const message = 'Hello ' + name + '!';`, documentation: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals' }, 'promises': { priority: 'critical', alternatives: ['callbacks', 'async libraries'], polyfills: ['es6-promise', 'core-js'], buildSteps: [ 'npm install es6-promise --save', 'Import polyfill at app entry point' ], jsExample: `// Import Promise polyfill import 'es6-promise/auto'; // Or use callbacks function fetchData(callback) { // async operation callback(null, data); }`, documentation: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise' } };