DEV Community

Daniel Oyekunle
Daniel Oyekunle

Posted on

Beacon — Context-Aware UI Guidance Without Forced Conversation

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

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

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

Demo Flow

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

Demo Video:

Beacon non-conversational UI:

Beacon non-conversational UI:

Beacon Chat (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.

Top comments (0)