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'
        }
      };