BrowserCheck AI - Real-Time Web Compatibility Assistant

A VS Code extension that helps web developers safely use modern web APIs by providing real-time compatibility analysis, AI-driven fix suggestions, and browser support visualization.

Features

🔍 Real-Time Code Checker

• Scans JavaScript, TypeScript, CSS, and HTML files for experimental or deprecated features
• Uses MDN Baseline API data for accurate compatibility information
• Provides instant feedback through VS Code diagnostics

🤖 AI Fix Suggestions

• Generates fallback code and syntax alternatives using OpenAI API
• Provides one-click fixes through VS Code code actions
• Explains compatibility issues with context-aware suggestions

📊 Browser Support Visualizer

• Displays browser compatibility information on hover
• Shows support status across Chrome, Firefox, Safari, and Edge
• Includes version information and compatibility notes

🛠️ CLI Audit Tool

• Standalone command-line tool for CI/CD integration
• Scans entire repositories for compatibility issues
• Generates detailed reports with severity levels

Installation

1. Install dependencies:

npm install

2. Compile the extension:

npm run compile

3. Open in VS Code and press F5 to run the extension in a new Extension Development Host window

Configuration

Add your OpenAI API key to VS Code settings:

{
  "browsercheck.openaiApiKey": "your-api-key-here",
  "browsercheck.targetBrowsers": ["chrome", "firefox", "safari", "edge"]
}

Usage

VS Code Extension

1. Open any JavaScript, TypeScript, or CSS file
2. The extension automatically scans for compatibility issues
3. Hover over highlighted code to see browser support information
4. Use the lightbulb icon to apply AI-generated fixes

CLI Tool

# Scan current directory
node cli/index.js

# Scan specific directory
node cli/index.js /path/to/project

# Use in CI/CD
npm run audit && echo "No compatibility issues found"

Commands

• BrowserCheck: Scan for Browser Compatibility Issues - Manual scan trigger
• BrowserCheck: Show Browser Support - Display support information

Supported Features

JavaScript/TypeScript

• Optional chaining (?.)
• Nullish coalescing (??)
• Fetch API
• Async/await
• ES6 classes
• ES6 modules
• Modern array methods

CSS

• CSS Grid
• Flexbox
• CSS Variables
• CSS Feature Queries (@supports)
• CSS Calc
• CSS Transforms

Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

# Package extension
vsce package

Testing

Test the extension with the provided example files:

• test-files/example.js - JavaScript compatibility issues
• test-files/example.css - CSS compatibility issues

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details