CanIUse MCP

Instructions

Implementation Reference

• src/enhanced-tools.js:127-183 (handler)

  The primary handler function that executes the generate_configs tool logic. Parses input arguments, delegates config generation to FixGenerator, adds installation instructions, and formats the response.

  export function handleGenerateConfigs(args) {
    const {
      configType = 'all',
      target = 'chrome-37', 
      includePolyfills = true,
      projectType = 'react'
    } = args;
  
    const result = fixGenerator.generateWorkflowConfig(configType, {
      target,
      includePolyfills,
      projectType
    });
  
    // Add installation instructions
    const installInstructions = [];
    
    if (configType === 'all' || configType === 'babel') {
      const babelConfig = configType === 'all' ? result.babel : result;
      if (babelConfig.installCommand) {
        installInstructions.push({
          step: 'Install Babel dependencies',
          command: babelConfig.installCommand
        });
      }
    }
  
    if (configType === 'all' || configType === 'postcss') {
      const postcssConfig = configType === 'all' ? result.postcss : result;
      if (postcssConfig.installCommand) {
        installInstructions.push({
          step: 'Install PostCSS dependencies', 
          command: postcssConfig.installCommand
        });
      }
    }
  
    return {
      configType,
      target,
      projectType,
      configs: result,
      installation: installInstructions,
      instructions: [
        '1. Run the installation commands above',
        '2. Create the configuration files with the provided content',
        '3. Update your package.json scripts if needed',
        '4. Test your build process',
        '5. Run compatibility checks again to verify fixes'
      ],
      nextSteps: [
        'Test the build configuration with your project',
        'Run scan_project again to verify compatibility improvements',
        'Set up CI/CD integration if not already done'
      ]
    };
  }

• index.js:128-163 (registration)

  Registers the generate_configs tool with the MCP server, including title, description, input schema validation using Zod, and the handler callback.

  server.registerTool(
    "generate_configs",
    {
      title: "Config Generator",
      description: "Generate complete build configurations, CI/CD setups, and workflow files for browser compatibility",
      inputSchema: {
        configType: z.enum(["babel", "postcss", "webpack", "package-json", "ci", "git-hooks", "all"]).optional().default("all").describe("Type of configuration to generate"),
        target: z.string().optional().default("chrome-37").describe("Primary browser target for configuration"),
        includePolyfills: z.boolean().optional().default(true).describe("Include polyfill configurations"),
        projectType: z.enum(["react", "vanilla-js", "vue", "angular"]).optional().default("react").describe("Project framework type")
      }
    },
    async (args) => {
      try {
        const result = handleGenerateConfigs(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: "Check configuration parameters and try again."
            }, null, 2)
          }],
          isError: true
        };
      }
    }
  );

• src/fix-generator.js:350-378 (helper)

  Key helper method in FixGenerator class that orchestrates the generation of various configuration types (Babel, PostCSS, Webpack, etc.) based on the requested configType, delegating to specific generators.

  generateWorkflowConfig(type, options = {}) {
    const { target = 'chrome-37', includePolyfills = true, includeDevDeps = true } = options;
    
    switch (type) {
      case 'babel':
        return this._generateBabelConfig(target, includePolyfills);
      case 'postcss':
        return this._generatePostCSSConfig(target);
      case 'webpack':
        return this._generateWebpackConfig(target);
      case 'package-json':
        return this._generatePackageJsonConfig(includeDevDeps);
      case 'ci':
        return this._generateCIConfig();
      case 'git-hooks':
        return this._generateGitHooks();
      case 'all':
        return {
          babel: this._generateBabelConfig(target, includePolyfills),
          postcss: this._generatePostCSSConfig(target),
          webpack: this._generateWebpackConfig(target),
          packageJson: this._generatePackageJsonConfig(includeDevDeps),
          ci: this._generateCIConfig(),
          gitHooks: this._generateGitHooks()
        };
      default:
        throw new Error(`Unknown config type: ${type}`);
    }
  }

• src/fix-generator.js:380-414 (helper)

  Specific helper method for generating Babel configuration tailored for the target browser, including presets, plugins, required packages, and installation command.

  _generateBabelConfig(target, includePolyfills) {
    const targetVersion = target === 'chrome-37' ? '37' : '60';
    return {
      filename: '.babelrc',
      content: JSON.stringify({
        presets: [
          ['@babel/preset-env', {
            targets: { chrome: targetVersion },
            useBuiltIns: includePolyfills ? 'usage' : false,
            corejs: includePolyfills ? 3 : undefined
          }],
          '@babel/preset-react'
        ],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-transform-runtime'
        ]
      }, null, 2),
      packages: [
        '@babel/core',
        '@babel/preset-env',
        '@babel/preset-react', 
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-runtime',
        ...(includePolyfills ? ['core-js@3'] : [])
      ],
      installCommand: `npm install ${[
        '@babel/core',
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-runtime'
      ].join(' ')} --save-dev`
    };
  }