DOCUMENTATION

Everything you need to get up and running

Step-by-step guides, reference docs, and examples for every LoopBack feature.

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

1

Install from the Chrome Web Store

Open the store link below and click Add to Chrome. Confirm the permissions prompt. The LoopBack icon will appear in your browser toolbar.
https://chromewebstore.google.com/detail/loopback/nfkpbieijipbfciccgedafjjpnnapjmj
2

Open the extension and sign in

Click the LoopBack icon to open the side panel. Sign in with your email or create a free account without leaving the extension.
3

Activate your license key (paid plans)

Go to Settings → License inside the side panel and paste your key. Activation is instant. After the first validation the extension works offline.
License key format: LBCK-XXXX-XXXX-XXXX-XXXX

Settings -> License -> paste key -> Activate
4

Pin your first comment

Navigate to any localhost page. Click the LoopBack launcher button, then click any element. Write a note and save. LoopBack records the screenshot, selector, viewport dimensions, and URL automatically.

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

1

Enter comment mode

Click the LoopBack launcher button at the bottom-right of the page (or open it from the extension side panel drawer). The cursor changes to a crosshair.
2

Click the element

Click any visible element. A pin marker is placed at exactly that point and a note input opens. The screenshot and selector are captured at this moment.
3

Write your note

Describe the issue clearly. Be specific: state what you see, what you expect, and the conditions that trigger it. LoopBack forwards this note verbatim to the generated prompt.
4

Save

Click Save. The marker stays on the page. You can continue clicking other elements to leave more comments before exiting comment mode.

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

1

Open Settings in the side panel

Click the gear icon or navigate to the Projects tab. Select New project.
2

Enter a name and base URL

The base URL supports wildcards. Use 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)
3

Save and start capturing

Click Create. LoopBack activates the project whenever you visit a matching URL.

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

1

Send a prompt to your AI agent

Copy the project queue as a prompt and paste it into Claude Code or your preferred tool. Let the agent run.
2

Reload the page and review

Once the changes are applied, reload the page and open the Retest tab in the LoopBack side panel.
3

Verify or reopen each item

Click each item to see the original screenshot and note side by side with the live page. Mark it Verified if the fix is correct, or Reopen if it still needs work.
4

Repeat until done

Reopened items populate a new prompt automatically. Paste it again and repeat until the progress bar reaches 100%.

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 flow

Inviting teammates

1

Open the dashboard

Sign in at the LoopBack web dashboard and navigate to Team.
2

Send invitations

Enter your teammate's email and click Invite. They receive an email with an accept link. Once accepted, their account is linked to your team workspace.
3

They install and sign in

The invited member installs the extension and signs in with the same email address they used to accept the invitation. The workspace loads automatically.
4

Manage seats from the dashboard

You can remove members, reassign seats, and view the extension version per device at any time 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.