The latest articles on DEV Community by Gaus Ahmed (@gaus_ahmed_369). https://dev.to/gaus_ahmed_369 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3894871%2F98161be1-58c7-4976-bedf-e8f54f5f209a.png https://dev.to/gaus_ahmed_369 en Gaus Ahmed Thu, 23 Apr 2026 20:21:30 +0000 https://dev.to/gaus_ahmed_369/how-i-built-an-ai-website-assistant-that-understands-any-page-in-real-time-3778 https://dev.to/gaus_ahmed_369/how-i-built-an-ai-website-assistant-that-understands-any-page-in-real-time-3778 <h2> The Problem </h2> <p>Users get stuck on websites. Complex dashboards, multi-step forms, confusing navigation. The result: support tickets, abandoned forms,<br> frustrated users. </p> <p>Tools like WalkMe solve this, but they cost ~$50K/year and require someone to manually build every walkthrough. When the UI changes,<br> flows break. </p> <p>I wanted something smarter. </p> <h2> What I Built </h2> <p><strong>DrGUI</strong> — an AI assistant that lives on any website. One script tag, and users get intelligent guidance for any task.</p> <p>Try it: <a href="https://drgui.in" rel="noopener noreferrer">drgui.in</a></p> <h2> How It Works </h2> <ol> <li>Add the script tag to your site </li> <li>The SDK scans the page DOM — fields, buttons, navigation, sections</li> <li>User asks a question or requests help </li> <li>The AI (Gemini 2.5 Flash) understands the page context and returns steps</li> <li>The SDK highlights elements and walks the user through each step </li> <li>After completing steps, it re-scans and auto-continues until done </li> </ol> <h2> The Tech Stack </h2> <ul> <li> <strong>SDK</strong>: Vanilla JS, Shadow DOM for CSS isolation</li> <li> <strong>Backend</strong>: Express.js, Our LLM</li> <li> <strong>Voice</strong>: Web Speech API (STT) + A TTS </li> <li> <strong>Languages</strong>: 9 Indian languages like Hindi, Tamil, Telugu, Marathi, Kannada, Malayalam, Bengali, Gujarati, English </li> </ul> <h2> The Interesting Parts </h2> <h3> Shadow DOM Isolation </h3> <p>The biggest challenge was making a widget that works on ANY website<br> without CSS conflicts. Shadow DOM was the answer, the entire chat<br><br> panel lives in its own isolated DOM tree. </p> <h3> AI Auto-Continuation </h3> <p>When the AI returns guidance steps, the SDK doesn't just show them, it tracks which steps are completed, re-scans the page after navigation, and sends a [CONTINUE] request with completedSelectors so the AI knows what's done and what's next. </p> <h3> Voice Chat Mode </h3> <p>The FAB button transforms into a voice orb with three states: </p> <ul> <li>Listening (pulsing animation) </li> <li>Thinking (breathing animation)</li> <li>Speaking (bouncing animation) </li> </ul> <p>STT pauses during TTS playback to prevent hearing its own voice. </p> <h2> Try It </h2> <p>The chatbot on <a href="https://drgui.in" rel="noopener noreferrer">drgui.in</a> is the product running on itself. Click the widget in the bottom-right corner and ask anything about the website. </p> <p>Free 7-day trial. Would love your feedback. </p> ai showdev ux webdev