How it works
From a captured page to a verified change
Loopa's website annotation workflow has six steps. You capture, comment and approve. Your coding agent implements. Then you check the result on a fresh capture and decide what is done.
The whole workflow
The complete workflow
Step 1 of 6
Capture your Next.js website
Point Loopa at a running preview of your app: production, a staging deploy or a branch preview. A capture worker renders the route in a headless browser, waits for it to settle, takes a full-page screenshot and stores the cleaned HTML and assets.
What you do
- Create a project and name the repository it belongs to.
- Add a preview environment by its origin, for example https://preview.example.com.
- Register the build's git commit so captures are tied to known code.
- Choose a path such as /pricing and start the capture.
What Loopa keeps: The capture is immutable. You review exactly what was rendered for that build, with scripts disabled, so nothing shifts while you comment.
Capture a route
Step 2 of 6
Select elements and leave feedback
Open the capture in the review workbench. In Browse mode you scroll and switch routes. Press C for Comment mode, hover any element, click it and write what should change.
What you do
- Pick an element, or a point when the target is not a single element.
- Write the change in plain words: “Make the trial button the primary action.”
- Resize the captured page to 1440, 768 or 390 pixels wide.
- Reply, edit or dismiss in the thread next to the numbered pin.
What Loopa keeps: Each pin is anchored to the DOM element on that capture, with its selector, position and viewport. Edits keep their history.
Pin a comment
Step 3 of 6
Identify relevant source context
Every annotation collects the evidence an implementer needs. If the captured build carries source stamps, Loopa adds the component file and line that rendered the element as a source candidate, checked against the registered build.
What you do
- Open the Evidence tab to see the screenshot, route and viewport.
- Check the source candidate and whether it matches the build you registered.
- Use the Anchor tab to see how the pin is attached to the page.
What Loopa keeps: Source evidence is labelled for what it is: candidate, ambiguous or unknown. Without stamps, the visual context is still complete.
Context layers
Annotation evidence (simplified)
- route
- /pricing
- viewport
- 1440 × 900
- element
- button “Start free trial”
- screenshot
- Full-page capture, element region
- rendered by
- app/pricing/page.tsx:22Candidate from a source stamp on the registered build
Step 4 of 6
Collect feedback into an implementation batch
The Feedback view lists open comments across every route in the project. Select the ones that belong together and freeze them. A frozen batch fixes the instructions, the evidence, the repository and the base commit, so the agent works from the same snapshot you approved.
What you do
- Filter the feedback queue and select related comments from different pages.
- Freeze the selection into a batch and inspect its contents.
- Cancel the batch if something is wrong; nothing has run yet.
What Loopa keeps: Freezing only saves the batch. Running anything is a separate, explicit step.
Freeze and authorize
Step 5 of 6
Hand off to an authorized coding agent
Authorize one agent run for the frozen batch. Your coding agent, running where your code is checked out, connects to Loopa over MCP, claims the run, reads every item with its evidence and makes the changes on a branch.
What you do
- Tick “I authorize one agent run for these frozen instructions, repository and base commit.”
- Start your agent in the correct checkout and point it at the batch.
- Watch the run state; request a stop if you need to.
What Loopa keeps: The authorization covers one run and expires after 24 hours if unused. Loopa never edits your code itself; the agent does, with the access you gave it.
You
- Freeze batch
- Authorize one run
- Accept or reopen
Loopa
- Stores batch + evidence
- Records authorization
- Keeps reported results
Your agent
- Claims the run over MCP
- Edits code in your checkout
- Reports outcomes + checks
Step 6 of 6
Review the updated website and verify changes
The agent reports an outcome for each item, the checks it ran and the result commit. Capture the changed build, then compare each result with the original comment and its original capture.
What you do
- Read each item's outcome: implemented, blocked, needs clarification or not attempted.
- Open the result capture next to the original evidence.
- Accept the item, or reopen it with a reason to send it into the next loop.
What Loopa keeps: Only your decision changes an item's review state. The original capture and anchor stay available after the page changes.
Review the result
Run the loop on your own app
Capture one route, leave five comments and see what your agent does with real context.