Website Guide Assistant

AI-powered Chrome extension that generates personalised summaries and step-by-step guides for any website, making the web accessible for kids, intermediate, and beginners using Chrome's Built-in AI.

Comment

1 Whatt Is

Website Guide Assistant is an AI-powered Chrome extension that makes any website instantly accessible and understandable for all users—from kids learning their first browser to elders navigating complex interfaces, to beginners and intermediate users tackling unfamiliar web applications.

Using Chrome's Built-in AI (Gemini Nano), it automatically analyzes the current webpage and generates personalized content in two modes:

  • Summary Mode: Quick 2-3 sentence overviews tailored to your experience level
  • Steps Guide Mode: Visual, step-by-step walkthroughs with 5-10 customizable steps, including actions, locations, expected results, and helpful tips

The extension works on ANY website—e-commerce platforms, social media, educational sites, government portals, or news websites—delivering context-aware guidance that adapts to your needs.

2 How We Builtt

We created Website Guide Assistant using modern web technologies optimized for Chrome extensions:

Frontend & UI:

  • React 18 + TypeScript: Component-based architecture with type safety for reliable code
  • Tailwind CSS + shadcn/ui: Beautiful, accessible design with dark/light mode support
  • Vite + CRXJS: Fast development and production builds for Chrome Manifest V3

AI Integration:

  • Chrome Built-in AI APIs:
    • Prompt API: Generates personalized summaries and step-by-step instructions
  • Gemini Nano: All AI processing runs locally on the device for privacy and offline access

Core Functionality:

  • Content Scraping: Chrome content scripts extract page metadata (title, URL, buttons, forms, navigation) using DOM analysis and messaging API
  • Prompt Engineering: Custom JSON-structured prompts ensure consistent, parseable AI output
  • State Management: React hooks handle website data, AI sessions, and user preferences
  • Accessibility: ARIA labels, keyboard navigation, and theme switching for diverse users

Technical Architecture:

  1. Content Script: Runs on web pages to collect structural data
  2. Popup UI: React-based interface for user interaction and results display
  3. Background Service Worker: Manages AI sessions and storage
  4. Local Storage: Caches guides and user preferences using Chrome storage API

The extension communicates via Chrome's messaging API between content scripts and the popup, ensuring smooth real-time updates while maintaining security isolation.

3 Challenges We Ran Into

Technical Challenges:

  1. Chrome AI API Stability: The Built-in AI APIs are experimental and required enabling Chrome flags (#prompt-api-for-gemini-nano-multimodal-input). We faced issues with model availability and had to implement fallback mechanisms for inconsistent responses.

  2. JSON Output Parsing: While our prompts requested structured JSON, the AI sometimes returned markdown or mixed formats. We developed robust parsing with error handling and fallback to text rendering.

  3. Cross-Website Compatibility: Different websites have varying DOM structures. Our scraper needed to handle complex layouts (single-page apps, dynamic content) while respecting privacy and avoiding intrusive scraping.

  4. Extension Size Constraints: Chrome extensions have strict size limits. We optimized our bundle size using Vite's tree-shaking and lazy loading while maintaining rich UI components.

  5. Offline Model Management: Gemini Nano requires significant download time (22GB). We implemented progress indicators and graceful degradation for users without the model installed.

Design Challenges:

  1. Age-Appropriate Language: Crafting prompts that generate content suitable for 8-year-olds while maintaining utility for adults was complex. We iterated extensively on prompt engineering.

  2. Visual Step Flow: Creating the step-by-step flow diagram that works within extension popup constraints required custom React components and responsive design.

  3. Theme Consistency: Ensuring dark/light mode consistency across all shadcn/ui components while maintaining accessibility standards was challenging.

User Experience Challenges:

  1. Loading States: AI generation takes 1-2 minutes. We designed engaging loading animations and clear progress indicators to maintain user trust.

  2. Error Handling: When websites can't be scraped (chrome:// pages, SPAs without content), we needed intuitive fallbacks and helpful error messages.

4 Accomplishments We're Proud Of

Technical Achievements:

  • Successful AI Integration: Full integration with Chrome's experimental Built-in AI APIs, including custom TypeScript definitions for undocumented features
  • Robust Content Scraping: Universal website analyzer that works across diverse site architectures while respecting privacy
  • JSON-Structured Output: Pioneering approach to generating parseable AI responses for programmatic manipulation
  • Performance Optimization: Achieved 60+ FPS in the extension popup despite complex AI operations and rich UI

Design & UX Achievements:

  • Beautiful, Accessible UI: Modern design with shadcn/ui components, dark/light mode, and WCAG 2.1 compliance
  • Visual Step Flow: Custom React component creating intuitive step-by-step diagrams within extension constraints
  • Multi-User Support: Three distinct experience levels with tailored language, tone, and complexity

Functional Achievements:

  • Universal Compatibility: Works on any website, from simple blogs to complex single-page applications
  • Offline Privacy: Complete local processing with no data transmission or server dependencies
  • Customizable Guidance: User-selectable step count (5-10 steps) and instant quick-tip functionality

Innovation Achievements:

  • Age-Appropriate AI: First extension to deliver genuinely different experiences for kids, elders, and beginners
  • Interactive Step Details: Expandable step information with action, location, expectations, and tips
  • Progress Metadata: Unique feature showing estimated time, difficulty level, and completion status

Hackathon Achievements:

  • Complete MVP: Fully functional extension with polished UI, ready for production deployment
  • Documentation: Comprehensive README, API usage explanation, and installation guide
  • Demo Video: Professional 2-minute presentation showcasing all features and use cases

5 What We Learned

Technical Learnings:

  • Chrome AI Ecosystem: Deep understanding of experimental APIs, model management, and client-side processing limitations
  • Prompt Engineering: Art of crafting precise prompts that generate structured, reliable outputs across diverse use cases
  • Extension Development: Manifest V3 architecture, content script isolation, and messaging API patterns
  • Performance Optimization: Bundle size management, lazy loading, and smooth animations in constrained environments

Design Learnings:

  • Accessibility First: Importance of ARIA labels, keyboard navigation, and theme consistency in extensions
  • Progressive Disclosure: Showing only relevant information while maintaining discoverability
  • Visual Hierarchy: Creating intuitive flow diagrams within tight spatial constraints

AI & Ethics Learnings:

  • Age-Appropriate Content: Balancing simplicity with utility across vastly different user capabilities
  • Privacy by Design: Ensuring no data leaves the device while maintaining functionality
  • AI Reliability: Handling inconsistent model outputs and providing graceful fallbacks

Hackathon Learnings:

  • Scope Management: Building a complete MVP within time constraints while maintaining quality
  • Documentation Importance: Clear setup instructions and API explanations are as crucial as the code
  • User-Centric Design: Validating features through iterative testing with different user personas

Professional Growth:

  • Full-Stack Web Development: From React components to Chrome APIs to AI integration
  • Technical Communication: Explaining complex concepts (client-side AI, extension architecture) clearly
  • Project Management: Breaking down a complex project into manageable milestones

6 What's Next for Website Guide Assistant

Immediate Enhancements:

  • Multilingual Support: Integrate Chrome's Translator API for global accessibility
  • Voice Guidance: Audio step-by-step instructions using Web Speech API
  • Interactive Elements: Highlight and annotate actual page elements during guidance
  • Guide Saving: Local storage for favorite guides and progress tracking

Advanced Features:

  • Community Contributions: Open-source prompt library for different website types
  • Element Highlighting: Visual overlays showing exactly where to click
  • Progress Tracking: Step completion status and resume functionality
  • Screen Reader Support: Enhanced ARIA labels and semantic structure

Enterprise & Platform Integration:

  • Corporate Training: Integration with enterprise learning management systems
  • Education Partnerships: Curriculum integration for digital literacy programs
  • Accessibility Compliance: Full WCAG 2.2 AA certification

Monetization & Growth:

  • Premium Features: Advanced analytics, custom prompts, team collaboration
  • Chrome Web Store: Official publication with update roadmap
  • Cross-Browser: Firefox and Edge extension development
  • Mobile Web App: PWA version for mobile browser access

Research & Innovation:

  • AI Personalization: User preference learning and adaptive guidance
  • Natural Language Interaction: Voice commands and conversational interface
  • Collaborative Editing: Real-time guide co-creation with teams
  • Analytics Dashboard: Usage insights for website owners

Social Impact:

  • Non-Profit Partnerships: Digital literacy programs for underserved communities
  • Senior Center Integration: Deployment in community centers and libraries
  • School Curriculum: Educational tool for computer literacy classes
  • Accessibility Certification: Official recognition as assistive technology

Website Guide Assistant has the potential to become the default web navigation companion, making the internet truly accessible for everyone regardless of technical ability or age.

Built With

  • chrome-built-in-ai-apis
  • chrome-extensions-manifest-v3
  • chrome-storage-api
  • content-scripts
  • crxjs
  • eslint
  • gemini-nano
  • github
  • localstorage
  • markdown-rendering
  • messaging-api
  • nextjs
  • prettier
  • prompt-api
  • react-18
  • react-hooks
  • rewriter-api
  • shadcn/ui
  • summarizer-api
  • tailwind-css
  • typescript
  • vite
  • webpack-(dev-dependencies)
  • writer-api
Share this project:

Updates