Aura-Navigator

• 

  Demo

Inspiration

We're driven by the goal of making the digital world accessible to everyone. We saw a common struggle: talented people feeling lost or "clueless" when faced with unfamiliar software or complex websites. This digital friction isn't a user failure; it's a design gap. We envisioned an intelligent companion that could bridge that gap, empowering anyone to navigate the web with confidence and ease.

What it does

Aura Navigator is an AI-powered copilot for your browser. When you're unsure how to proceed on a website, you simply ask Aura Navigator a question in natural language, like "How do I update my profile?" Instantly, the extension transforms the page into an interactive tutorial. It dims the background and casts a spotlight on the exact element you need to click. As you follow along, it guides you step-by-step with clear visual cues and optional voice narration until your task is complete.

How we built it

To bring Aura Navigator to life, we engineered a lightweight and responsive browser extension using a modern web technology stack. The user interface was crafted with HTML, CSS, and vanilla JavaScript for maximum performance. For the core visual guidance system, we integrated the powerful Shepherd.js library to orchestrate the on-screen tours. We harnessed the browser's native Web Speech API for real-time voice synthesis, avoiding heavy dependencies. The "brain" of our operation is a client-side Natural Language Processing (NLP) model that interprets user commands and dynamically maps them to the correct actions on the page.

Challenges we ran into

Our primary technical hurdle was adapting to the infinite variability of the web. No two websites structure their code the same way, making it a significant challenge to create a universal system that can reliably identify elements like a "settings icon" or a "checkout button." To solve this, we developed a proprietary "smart selector" algorithm. This function goes beyond simple IDs or classes, analyzing a combination of ARIA labels, text content, and structural patterns to intelligently locate the user's target with high accuracy.

Accomplishments that we're proud of

Within the tight timeline of a hackathon, we built a fully functional, end-to-end prototype that delivers immediate value. We are especially proud of our smart selector algorithm, which proved to be a viable solution to the complex challenge of dynamic page analysis. The moment we first typed "log me out" and watched Aura Navigator perfectly execute the multi-step process on a live website was a testament to our successful integration of AI, DOM manipulation, and user interface design.

What we learned

This project was a masterclass in the intricacies of browser extension architecture and the practical application of client-side AI. We honed our skills in programmatically interacting with live web pages in a way that feels helpful, not intrusive. Most importantly, we learned how to design a user experience where AI isn't just a feature but a seamless and empowering partner in the user's journey.

What's next for Aura-Navigator

We see a clear and exciting path forward for Aura Navigator. Our roadmap is focused on four key areas: Evolving our AI Core: We plan to integrate a more sophisticated NLP model capable of understanding complex, multi-step intentions and conversational commands. User-Trainable Workflows: Our most anticipated feature is a "Record Mode" that allows users to perform a task once to "teach" Aura Navigator, which can then automate or guide that same workflow perfectly in the future. Championing Digital Inclusion: We will build out a dedicated suite of accessibility features, positioning Aura Navigator as a best-in-class tool for users with disabilities. A Path to Commercialization: We aim to develop a premium version for businesses, enabling them to create no-code, interactive onboarding tours and training modules for their employees and customers directly within their software.

Built With

• browserextensionapi
• css
• html5
• javascript
• manifestv3
• nlp.js
• serverless
• shepherd.js
• websearchapi