Inspiration
As web developers and learners, we often face the challenge of understanding and modifying complex HTML and CSS structures efficiently. Inspired by the idea of making coding more interactive and collaborative, we created styleX—a tool designed to simplify code analysis and editing with the help of AI, empowering users to tackle web development challenges effectively.
What it does
styleX bridges the gap between users and AI to provide real-time insights into HTML and CSS code. It allows users to analyze, modify, and understand website structures seamlessly. Through an interactive chatbot-style interface, users can ask questions, get explanations, and make changes to code with guided AI support.
How we built it
We built styleX using the following technologies: Frontend: HTML, CSS, and JavaScript to create an intuitive side panel and interactive user interface. Backend/Logic: Leveraged JavaScript and Chrome Extension APIs for seamless integration with web pages. AI Integration: Using gemini nano added capabilities for natural language interactions to interpret user inputs and provide actionable insights. Manifest v3: Structured the extension using Chrome’s latest extension framework for optimal performance and security.
Challenges we ran into
Ensuring compatibility with diverse website structures and handling dynamic content. Debugging complex interactions between the side panel and active web pages. Balancing AI precision while keeping responses simple and actionable for users.
Accomplishments that we're proud of
Successfully implemented a live gemini chatbot interface for real-time HTML and CSS suggestions for the user. Developed an interactive UI with smooth animations and modern design principles. Created a robust tool that aids both beginners and experienced developers.
What we learned
Development of Chrome Extensions and use of Gemini Nano. Deepened our understanding of Chrome Extension APIs and the Manifest v3 framework. Gained insights into making AI-driven tools more accessible and user-friendly. Learned to handle real-time data processing and dynamic webpage interactions efficiently.
What's next for styleX
Adding support for JavaScript analysis and editing. Introducing collaborative features for team-based web development. Enhancing AI capabilities to provide more detailed feedback and coding suggestions. Launching a mobile-friendly version of the extension. Integrating with popular code editors like VS Code for seamless workflow extension.
Log in or sign up for Devpost to join the conversation.