Problem Statement
Nobody likes writing PR/MR descriptions, so they're often skipped or one-liners — which makes review slower and history poorer. The information needed (what changed and why) is right there in the diff, but summarizing it by hand is tedious. The fix: read the diff already on the page and write the description for you, in place, without leaving GitHub/GitLab.
Proposed Solution
JagoPRBot is a Chrome extension that adds a Generate Description button to GitHub/GitLab MR creation pages. Clicking it opens a side panel that discovers all changed files, analyzes them file-by-file via an AI backend, and auto-fills the description textarea — with live progress, a usage dashboard, and regenerate/cancel controls.
Full Solution Details
- In-page generation — detects the MR page, reads any existing template in the textarea, scans the page for all changed files, processes each sequentially, polls the backend until ready, then prefills.
- Live progress — the side panel streams status ("Checking diffs… (11 files)", "Analyzing src/components/Button.tsx (3/11)", "Prefilling…").
- Template detection — respects/merges with an existing MR template.
- Usage tracking — shows remaining generations (e.g. 850/1000) and recent activity.
- Controls — Regenerate with one click; Cancel mid-process.
- Secure auth — enter a JagoPRBot API key once; stored securely across sessions, validated against the API; managed from the popup.
- Popup dashboard — usage, last-generated info, key management, settings, support links.
Technical Documentation
A TypeScript Chrome extension. A content script scrapes the MR page (existing description, the list of changed files, and each file's diff), a side panel drives the UX and shows real-time progress, and a popup is the account/usage dashboard. The flow is template-check → diff discovery → sequential file analysis → API submission → polling until the AI result is ready → prefill into the textarea. API keys are persisted securely in extension storage and validated server-side; the AI generation runs on a backend (the author's Claude-powered analysis service), keeping the heavy lifting and the key off the page.
Tech Stack
TypeScript, Chrome extension (content script + side panel + popup), Anthropic Claude (backend generation), polling-based async; secure key storage.
System Design
GitHub/GitLab MR page
│ content script: read template + discover changed files + diffs
▼
Side panel (live progress) ──► JagoPRBot backend (AI)
│ template-check → analyze file 3/11 → ... │ Claude generates description
│◄────────────── poll status ─────────────────────┘
▼
Auto-prefill description textarea · [Regenerate] [Cancel]
Popup dashboard: usage (850/1000) · last activity · API key mgmt
Smart Architectural Decisions
- Use the diff that's already on the page. Instead of integrating with GitHub/GitLab APIs and tokens, the content script reads the diff straight from the DOM — zero extra auth, works the moment you're on the MR page.
- Backend-side AI + polling. Running generation on a backend (with the API key there, not in the extension) keeps secrets safe, lets long analyses run without blocking, and the side panel polls for completion — the right async pattern.
- File-by-file with visible progress. Sequential per-file analysis with streamed status makes a slow AI task feel transparent and trustworthy, and scales to large PRs.
- Respects existing templates. Reading the current textarea/template before generating avoids stomping team conventions.
- Usage metering + key validation show it's built as a real (likely metered/SaaS) product, not a throwaway script.
Impacts
Turns a universally-disliked chore into one click: better, consistent PR descriptions generated from the actual diff, in place on GitHub/GitLab, improving review speed and repo history.
Demonstrated Skills
Chrome extension engineering (content script DOM scraping, side panel, popup, secure key storage); DOM/diff parsing across GitHub & GitLab; async backend integration with polling and progress streaming; LLM application design (diff → summary); product/SaaS concerns (usage metering, key validation, regenerate/cancel UX).