Inspiration As web developers, we live with a constant "productivity tax." Before using a modern web feature, we instinctively open multiple tabs—MDN for the syntax, CanIUse.com for the support tables, and blog posts for real-world examples. This cycle of context-switching is a universal frustration that slows down innovation and creates uncertainty. The Google Baseline Tooling Hackathon's prompt resonated deeply with this experience. It was the perfect catalyst to answer the question: "What if our tools could give us the answer instantly?" Our inspiration was to go beyond a simple linter. We envisioned a tool with the seamless, intelligent feel of GitHub Copilot, but laser-focused on solving the specific problem of Baseline compatibility. We didn't just want to flag problems; we wanted to build an AI-powered co-pilot that would actively help developers write modern, cross-browser-compatible code, making the best practice the easiest path. What it does Baseline Sidekick is an AI-powered VS Code extension that transforms how developers interact with web standards. It's an intelligent co-pilot that provides real-time feedback, gamified incentives, and automated modernization tools directly within the editor. Key features include: ⚡ Real-Time Baseline Analysis: Instantly identifies non-Baseline CSS properties, JavaScript APIs, and HTML elements as you type, with clear diagnostics and rich hover information. 🤖 AI-Powered Modernization Assistant: Powered by the Google Gemini API, it goes beyond simple fixes: Generates intelligent polyfills for unsupported features. Suggests build-tool configurations (e.g., for PostCSS) to transpile modern syntax. Refactors entire code blocks from legacy patterns (like float layouts) to modern, Baseline-compliant alternatives (like Flexbox or Grid) with a single click. 🎮 Gamified Developer Experience: Calculates a real-time "Baseline Score" (from A+ to F) for every file, motivating developers to improve their code's quality and compatibility. Provides a full Workspace Audit to generate a comprehensive report on the project's overall health, making it easy to manage technical debt. How we built it Baseline Sidekick is built on a modern, robust, and performance-oriented technical stack, designed to feel like a native part of the VS Code experience. Data Source: We used the official web-features npm package as the single source of truth for all Baseline compatibility data, ensuring our extension is always accurate and up-to-date. Core Integration: The entire extension is written in TypeScript and leverages the VS Code Extension API for deep IDE integration, including the Diagnostics API, HoverProvider, and CodeActionProvider (for Quick Fixes). AI Intelligence: The "co-pilot" features are powered by the Google Gemini API. We engineered highly specific prompts to ensure the generated code for polyfills and refactoring is not only correct but also safe and efficient. Multi-Language Parsing Engine: To provide comprehensive analysis, we built a modular parsing system using industry-standard tools: PostCSS for CSS, Babel for JavaScript/TypeScript, and parse5 for HTML. Performance: To ensure a non-intrusive user experience, we implemented advanced caching mechanisms and debouncing on file analysis, preventing lag even in very large files. Challenges we ran into Building an intelligent assistant presented several unique challenges: Ensuring AI Accuracy and Safety: Getting a generative AI to produce code is easy; getting it to produce correct, efficient, and secure code is incredibly difficult. We spent a significant amount of time on prompt engineering and creating contextual "guards" to ensure the AI's suggestions were production-quality and wouldn't introduce new problems. Performance at Scale: Our initial prototype re-parsed files on every keystroke, which caused significant lag in larger projects. Overcoming this required architecting a smart caching system that would only re-analyze changed parts of a file, along with a debouncing mechanism to prevent unnecessary calls during rapid typing. The Nuance of "Baseline": We learned that Baseline isn't always a simple true or false. Some features, like float, are technically Baseline-supported but are considered legacy for layout. We had to build logic to differentiate between "unsupported" features and "discouraged" features to provide the most helpful developer guidance. Accomplishments that we're proud of Creating a True AI Co-pilot: We successfully moved beyond simple linting into the realm of AI-powered code generation. The ability to generate a context-aware polyfill or refactor an entire layout with one click is a paradigm shift, and we're incredibly proud of how seamlessly it works. The Gamified "Baseline Score": This was a breakthrough feature. It transforms the abstract goal of "writing compatible code" into a tangible, measurable, and even fun metric. Watching your score improve from a "C" to an "A+" provides a powerful feedback loop. A Seamless, Native User Experience: From the real-time underlines to the status bar score and the integrated Quick Fixes, the extension feels like it's a native part of VS Code, not a slow, third-party add-on. Achieving this level of polish and performance was a major goal. What we learned This project was a tremendous learning experience, both technically and conceptually. The Future of Dev Tools is Generative: We learned that the next generation of developer tooling won't just find problems—it will help solve them. Integrating generative AI allowed us to create a solution that is orders of magnitude more helpful than a traditional linter. Developer Experience (DX) is Everything: A tool can have the best features in the world, but if it's slow or confusing, no one will use it. We learned to obsess over performance and intuitive design to ensure the tool helps, rather than hinders, the creative flow of coding. The Power of a Clear Mission: Focusing on the single, clear problem statement from the Baseline hackathon allowed us to make better decisions and build a tool that is highly focused and incredibly useful for its intended purpose. What's next for Baseline Sidekick This hackathon is just the beginning. We believe Baseline Sidekick has the potential to become an essential tool for web development teams everywhere. Our roadmap includes: CI/CD Integration: Creating a command-line interface (CLI) version of the audit tool that can be plugged into GitHub Actions and other CI/CD pipelines to enforce Baseline compatibility standards automatically. Support for Web Frameworks: Extending our analysis to understand the nuances of frameworks like React (JSX), Vue, and Svelte, providing even more targeted recommendations. Team-Based Configuration: Allowing teams to create custom rulesets (e.g., ignoring specific features or enforcing a stricter version of Baseline) to fit their organization's needs. Deeper AI Integration: Exploring AI-powered analysis that can predict the performance impact of using certain polyfills or suggest alternative architectural approaches for better long-term compatibility.
Built With
- babel
- google-gemini-api
- node.js
- parse5
- postcss
- typescript
- vitest
- vscode-api
- web-features
Log in or sign up for Devpost to join the conversation.