DEV Community

Cover image for I Built a Context-Aware AI Browser Mentor Powered by GitHub Copilot CLI
Edwar Diaz
Edwar Diaz

Posted on

I Built a Context-Aware AI Browser Mentor Powered by GitHub Copilot CLI

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

I Built a Context-Aware AI Browser Mentor Powered by GitHub Copilot CLI

What if GitHub Copilot CLI could see what you see, understand your context, and help you without breaking your workflow?

That question led me to build DevMentorAI — a browser extension that transforms Copilot CLI into a real-time AI mentor inside your browser.

Built entirely with GitHub Copilot CLI — from extension to backend to landing page to release workflows.

🧠 What I Built

DevMentorAI is a context-aware AI assistant that lives inside your browser and understands:

  • What page you're on
  • What text you've selected
  • What you're trying to write
  • What you're troubleshooting
  • What you want to improve

Instead of copying context into prompts, DevMentorAI sends context automatically to Copilot CLI.

✨ Core capabilities

  • 📄 Context capture from the current page
  • 📸 Screenshot understanding
  • ✍️ Grammar correction & rewriting
  • 🔄 Replace text directly inside inputs (emails, chats, forms)
  • 🛠 Works for development, DevOps, writing, learning, and more

No framework lock-in. No domain restriction. Just AI assistance anywhere.

🎥 Demo

🌐 Project Links

▶️ Full Walkthrough

📺 Video:
.

⚡ Feature Highlights

Context-aware assistance

Grammar correction replacing text directly in inputs

Installation from zero using NPX backend

🏗 How It Works

  1. Extension captures page context + optional screenshot
  2. Sends to local backend
  3. Backend communicates with Copilot CLI
  4. AI response returned
  5. Optional direct replacement into page inputs

This creates a seamless AI workflow without leaving the browser.

🔐 Privacy & Security

DevMentorAI runs locally and respects user control:

  • No credentials required
  • Uses your Copilot CLI session
  • Backend runs locally via NPX
  • Users control what context is shared

🤖 My Experience with GitHub Copilot CLI

Using GitHub Copilot CLI was both enriching and fun. I discovered capabilities far beyond what I previously experienced using Copilot inside editors.

I started with little experience using Copilot CLI, but by following the official documentation and experimenting with slash commands, I learned how to:

  • Create custom agents
  • Implement skills (including WXT extension knowledge)
  • Use advanced TypeScript skills
  • Plan and execute complex builds through the CLI

One of the most impressive features was agent-based planning mode. Copilot could:

  1. Plan the entire feature
  2. Execute it
  3. Iterate quickly

All from the terminal — lightweight and extremely fast.

🔍 What surprised me most

  • Copilot CLI enabled building an entire full-stack project:

    • Browser extension
    • Backend server
    • Landing page
    • Release workflows
    • NPX package

  • The planning file memory system was incredibly powerful.

🧪 Workflow I Discovered

As sessions grew large, context sometimes became less effective. I learned to:

  • Start a new session per major feature
  • Refine functionality within that session
  • Commit once complete

This dramatically improved results.

🛠 Problem Solving with Copilot

Occasionally, Copilot would get stuck in a loop trying the same solution. When that happened, guiding it to consider alternative perspectives helped it resolve issues successfully.

🎯 Why This Matters

DevMentorAI demonstrates a new paradigm:

AI assistance that adapts to your context instead of forcing you to adapt to it.

GitHub Copilot CLI made this possible.

👤 Author

Edwar Diaz
DEV: @botoom
GitHub: https://github.com/BOTOOM

Top comments (0)