Getting Started
LoopBack is a Chrome extension that lets you leave comments directly on any web page running in your browser, capturing a screenshot, viewport size, page URL, and the CSS selector of the element you clicked. Those comments become a single AI-ready prompt you can paste into Claude Code or any other AI coding tool.
The typical workflow looks like this: open your localhost app, click the LoopBack launcher to enter comment mode, click elements that need changes, write your notes, then hit "Copy as prompt." Paste the result into your AI agent and all the context it needs is already there.
LoopBack works entirely on-device by default. Screenshots are saved to your local disk, and feedback stays in the extension until you explicitly share it with a team workspace. There is no background upload and no telemetry without your consent.
Next
Continue reading Installation to keep making progress with LoopBack.
Installation
LoopBack is distributed exclusively through the Chrome Web Store. No CLI, no build step, no manual unpacking. Install it in under a minute and it is ready to use on any tab.
Requirements
- ▸Google Chrome 120+ or Microsoft Edge 120+
- ▸A LoopBack account (free tier available, no credit card required)
- ▸Internet connection for first-time account activation
Steps
Install from the Chrome Web Store
https://chromewebstore.google.com/detail/loopback/nfkpbieijipbfciccgedafjjpnnapjmjOpen the extension and sign in
Activate your license key (paid plans)
License key format: LBCK-XXXX-XXXX-XXXX-XXXX
Settings -> License -> paste key -> ActivatePin your first comment
Next
Continue reading Capturing Feedback to keep making progress with LoopBack.
Capturing Feedback
Capturing feedback in LoopBack means clicking an element on the page and writing a note. The extension automatically records everything an AI agent or developer needs to reproduce and fix the issue: a full-element screenshot saved to local disk with an absolute path, the computed CSS selector of the clicked element, the viewport width and height, and the current page URL.
Comment markers appear as small pins anchored to the exact pixel you clicked. They persist across page navigations within a project and are SPA-aware, meaning they reattach to the correct element even when a React or Vue app re-renders the DOM. Each marker displays the author name so that in team workspaces everyone knows who left which note.
To open an existing marker, click its pin on the page. The drawer opens and shows the note, the captured screenshot thumbnail, and the full metadata. You can edit the note, mark the item resolved, or promote it to a retest item from the same drawer.
How to leave a comment
Enter comment mode
Click the element
Write your note
Save
Next
Continue reading Projects to keep making progress with LoopBack.
Projects
Projects let you group feedback by URL pattern. This solves a common problem: several apps running on the same port. If your frontend is on localhost:3000 and your Storybook is also on localhost:3000 at different times, projects keep their feedback queues separate.
Each project has a name, a base URL or URL pattern, and an optional description. When you open a tab that matches a project pattern, LoopBack loads that project's markers and feedback queue automatically. You can switch projects from the side panel or from the launcher drawer.
Team workspaces share projects across all seats. When a teammate opens the same URL, they see the same project queue and any markers left by other members. The workspace syncs the team feed every time the extension is opened.
Creating a project
Open Settings in the side panel
Enter a name and base URL
http://localhost:3000/* to match every path or a more specific pattern to scope the project.Project name: My App
Base URL: http://localhost:3000/*
Description: (optional)Save and start capturing
Next
Continue reading Prompts to keep making progress with LoopBack.
Prompts
The primary output of LoopBack is a structured prompt you can paste directly into Claude Code, Cursor, or any other AI coding tool. Click Copy as prompt from the side panel and the entire queue of unresolved items is serialised into a single block of text.
Each item in the prompt includes the page URL, the element selector, the viewport dimensions, the absolute path to the saved screenshot, and your note. The AI agent receives every piece of context in one paste with no manual assembly required.
You can also copy individual items by opening a marker and clicking Copy item. This is useful when you want to direct an agent to fix one specific issue without changing others.
Example prompt structure
[LoopBack Feedback - My App]
URL: http://localhost:3000/dashboard
Viewport: 1280x800
Selector: .dashboard-header > button:nth-child(2)
Screenshot: /Users/you/loopback/screenshots/capture-001.png
Note: Button label says "Export" but clicking it does nothing. Should trigger a CSV download.
---
URL: http://localhost:3000/settings
Viewport: 375x812
Selector: form#profile-form input[name="email"]
Screenshot: /Users/you/loopback/screenshots/capture-002.png
Note: Email input accepts invalid formats without showing a validation error.Next
Continue reading Retest to keep making progress with LoopBack.
Retest
After your AI agent applies fixes, the retest workflow helps you verify each one systematically. The Retest tab shows every item that was sent to the agent, grouped by project. Each item can be marked Verified or Reopened depending on whether the fix worked.
A progress bar at the top of each project's retest list shows how many items have been verified versus how many are still open. This gives you a quick visual signal of how close the iteration is to complete. Reopened items go back into the active queue so you can copy them into the next prompt without re-pinning.
In team workspaces the retest state is shared. Any seat that marks an item verified updates the status for every other member immediately. This prevents duplicate verification effort when multiple reviewers are working in parallel.
Retest steps
Send a prompt to your AI agent
Reload the page and review
Verify or reopen each item
Repeat until done
Next
Continue reading Team and Licenses to keep making progress with LoopBack.
Team and Licenses
The Team plan gives you a shared workspace where up to five seats can collaborate on the same project queues. Each team member installs the extension on their own device and signs in with their account. The team admin invites members from the dashboard and assigns seats without touching any config files.
Seat enforcement is per device. Each activated device occupies one seat. If you replace a machine you can deactivate the old device from your dashboard and free the seat for the new one. The dashboard also shows the installed extension version for each device so you can confirm all seats are running the latest build before a release.
You can hold multiple licenses under a single account. This is useful for agencies or consultants who manage separate workspaces for different clients. Each license has its own set of seats and its own project namespace that does not overlap with others.
License plans
Pro - $9.99 - 1 seat, all features, 1 license
Team - $99.00 - 5 seats, shared workspaces, team sync, invite flowInviting teammates
Open the dashboard
Send invitations
They install and sign in
Manage seats from the dashboard
Need help or have a billing question?
Visit Support or review the License terms for full details on seat enforcement, refunds, and transferability.