This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences
What I Built
Beacon is a browser extension that helps users instantly find what they’re looking for on any webpage — without scrolling, guessing, or starting a conversation.
Instead of relying on a search bar or a chat-first interface, Beacon observes the structure of the current page and proactively highlights relevant UI elements with short, contextual explanations. The user is guided visually to the right place, at the right time.
Beacon is designed for moments where users:
- Know what they want but not where it is
- Are overwhelmed by dense documentation or complex layouts
- Don’t want to stop and “talk to a bot” just to navigate a page
The core workflow it enhances is on-page discovery and orientation, turning static pages into guided, context-aware experiences.
Demo
- Repository: https://github.com/DYung26/beacon-ai
Demo flow:
Extension download: https://github.com/DYung26/beacon-ai/releases/download/v0.1.0/dist.zip
Unzip →
chrome://extensions→ Enable Developer Mode → Load unpacked
- Open a complex page (e.g. a GitHub profile or documentation site)
- Enable the Beacon extension
- Observe automatic highlights with explanatory tooltips
- Scroll the page and see Beacon re-evaluate what’s relevant
- Optionally toggle chat mode to ask a specific question
Demo Video:
Beacon non-conversational UI:
Beacon Chat (conversational UI):
How I Used Algolia Agent Studio
Beacon uses Algolia as a high-performance retrieval layer for structured UI data extracted from live webpages.
Each page is converted into a structured PageContext, which includes:
- Visible text and headings
- Interactive elements (links, buttons, inputs)
- CSS selectors
- Bounding boxes and viewport position
- Visibility metadata and page URL
This data is indexed into Algolia so that Beacon can:
- Retrieve relevant UI elements in milliseconds
- Scope results to the current page and viewport
- Rank elements before they reach the AI agent
The AI agent does not crawl the DOM itself. Instead:
- Algolia retrieves candidate elements extremely fast
- The agent reasons over those results to decide:
- Which elements to highlight
- Why each element is relevant to the user
- Beacon renders visual guidance directly on the page
Beacon follows an Agent Studio–style architecture where UI elements are indexed in Algolia, retrieved with low latency, and passed to an agent that reasons over context to decide what to highlight and why, without requiring a conversational interface.
Why Fast Retrieval Matters
Beacon’s experience depends on speed.
Because it reacts to:
- Page load
- Scrolling
- Viewport changes
- Optional user queries
…retrieval must be near-instant. Any noticeable delay would break the illusion of “intelligent guidance” and feel like a blocking chatbot.
Algolia enables Beacon to:
- Re-evaluate relevance as users move through a page
- Avoid expensive DOM reprocessing
- Keep AI reasoning focused and bounded
- Stay responsive without polling or heavy computation
Fast retrieval is what makes Beacon feel ambient and assistive, rather than interruptive.
Optional Conversational Interface
Beacon includes an optional conversational interface, but it is intentionally secondary.
The primary experience is non-conversational:
- Beacon highlights useful elements automatically
- Users get guidance without typing anything
Chat exists for cases where the user wants to be explicit:
- “Show me my GitHub username”
- “Where can I update my profile?”
- “Find the section about achievements”
When used, the chat:
- Receives the same PageContext as the auto-highlight system
- Routes queries through the same backend agent
- Produces targeted highlights instead of long textual answers
Conversation is used to refine intent, not to replace visual guidance.
This ensures Beacon remains a guidance system first — not just another chatbot.
Top comments (0)