DEV Community: Daniel Oyekunle

Beacon — Context-Aware UI Guidance Without Forced Conversation

Daniel Oyekunle — Mon, 16 Feb 2026 02:17:19 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Beacon is a browser extension that helps users instantly find what they’re looking for on any webpage — without endless scrolling, guessing, or being forced into a chatbot conversation.

Modern websites are dense. Documentation portals, dashboards, developer profiles, and admin panels often overwhelm users with layered navigation and visual noise. Even when users know what they want, they often don’t know where it is.

Beacon solves this by:

Observing the structure of the current page
Extracting interactive and visible elements
Ranking what’s most relevant
Visually highlighting those elements with short contextual explanations

Instead of answering with long paragraphs of text, Beacon answers with guided interaction.

The primary experience is non-conversational:

No required typing
No chat-first workflow
No context switching

Users simply enable Beacon — and the page becomes guided.

There is an optional chat mode, but it enhances the visual guidance rather than replacing it. If a user asks:

“Where do I edit my profile?”
“Show me my GitHub username”
“Find the achievements section”

Beacon responds by highlighting the relevant UI elements directly on the page.

To me, Beacon represents a shift away from AI that interrupts — toward AI that orients.

Demo

Repository: https://github.com/DYung26/beacon-ai
Extension download: https://github.com/DYung26/beacon-ai/releases/download/v0.1.0/dist.zip

Unzip → chrome://extensions → Enable Developer Mode → Load unpacked

Demo Flow

Open a complex page (e.g. GitHub profile or documentation site)
Enable the Beacon extension
Observe automatic highlights with contextual tooltips
Scroll and see Beacon re-evaluate relevance
Optionally toggle chat mode for a specific request

Demo Video:

Beacon non-conversational UI:

Beacon Chat (conversational UI):

My Experience with GitHub Copilot CLI

Beacon was built iteratively using GitHub Copilot CLI directly inside the terminal.

Rather than constantly switching between documentation, search engines, and my editor, I relied on Copilot CLI as a terminal-native development partner.

Here’s how it impacted my workflow:

1. Faster Scaffolding and Refactoring

I used Copilot CLI to:

Generate structured TypeScript interfaces (like PageContext)
Refactor DOM extraction logic
Improve type safety across modules
Suggest cleaner architectural patterns

Instead of searching for patterns, I described what I wanted in natural language and refined from there.

2. Understanding and Debugging Complex Logic

Beacon relies heavily on:

DOM parsing
Scroll listeners
Mutation observers
Dynamic highlight overlays

When something behaved unexpectedly, I used Copilot CLI to:

Explain sections of my code
Suggest why certain event listeners re-triggered
Identify edge cases in viewport calculations
Propose performance improvements

This significantly reduced debugging time and improved iteration speed.

3. Build & Extension Workflow Optimization

Packaging a browser extension involves:

Manifest configuration
Bundling logic
Build scripts
Release packaging

Instead of searching syntax and configuration examples manually, I used Copilot CLI to:

Generate packaging commands
Improve build scripts
Validate extension configuration structure
Improve installation documentation

It made the build-test-adjust cycle much tighter.

4. Staying in Flow

The biggest impact wasn’t just speed — it was focus.

Because Copilot CLI operates directly in the terminal, it reduced context switching. I could:

Ask architectural questions
Refactor on demand
Generate utilities
Explain unfamiliar code
Iterate rapidly

All without leaving my working environment.

Beacon itself is about reducing friction in user navigation.

Copilot CLI reduced friction in development.

Why This Project Matters

Beacon tackles a subtle but important UX problem:

AI experiences are increasingly conversational by default.

But not every problem needs a conversation.

Sometimes users don’t want to ask.
They just want to be shown.

Beacon demonstrates how structured context + intelligent ranking can create a proactive guidance system that feels lightweight and assistive.

And building it with Copilot CLI reinforced something powerful:

AI works best not when it replaces thinking — but when it accelerates it.

Beacon — Context-Aware UI Guidance Without Forced Conversation

Daniel Oyekunle — Mon, 09 Feb 2026 05:10:16 +0000

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.