Open source · Claude Code · MCP

Loupe

Pin a comment to any element on your live web app, attach a screenshot or a short recording, and move it across a five-stage board. Claude Code, Anthropic's coding agent, reads the feedback over the Model Context Protocol (MCP), an open standard that lets AI agents call external tools. Pins re-anchor after you redeploy.

$ npm install @loupekit/sdk

Installing the package does not show the widget yet. Next, initialize it: see Install with npm, or follow the first-comment tutorial.

View on GitHub Documentation Get started
The Loupe widget's Home tab: tiles for Open, Needs you, Resolved and Stale comments, This page and All scope chips, a Pin feedback on this page button, and a feed of recent comments.
What you get

Features

A browser widget, a Node API with a triage dashboard, an MCP server, a browser extension, a Laravel package and Loupe Hub. All open source.

Each comment carries its context to the code: the element's HTML, its computed styles and a screenshot.

How it works

Four ways to capture

Click an element with Inspect, drag a rectangle with Region, record a region for up to 20 seconds with Record, or drop a free Note anywhere on the page. The widget runs in a shadow root (a DOM subtree isolated from the page), so its CSS does not touch your page.

Survives redeploys

Each pin stores a fingerprint of its element: test id (its data-testid, data-test or stable id attribute), CSS path, XPath (a path expression through the DOM tree), text and attributes. When the markup changes, Loupe finds the element again. A pin it cannot place with confidence is marked as moved.

Five-stage board

Comments move through Queue, To Do, In Progress, In Review and Resolved. Filter by priority, change type, device and page, or open the Needs you view.

MCP for Claude Code

The Node MCP server has 19 tools. Claude reads a comment with its screenshot as an image, proposes an HTML and CSS change back to the dashboard, opens a pull request, and moves the comment to In Review. The Laravel package has its own MCP server with 4 tools.

Threads, mentions and reactions

Reply to any comment, @mention a teammate to notify them, and react with an emoji. The widget refreshes every 10 seconds, so new replies appear without a reload.

Loupe Hub routing

Group projects into organizations. A project sends each new comment from a member of its organization to another project in the same organization, or to a signed webhook. Between two projects, the receiver's status changes and both sides' replies sync back.

Authentication

The Node API checks a per-project secret and an HMAC (a keyed hash signed with that secret) of each user id. The Laravel package uses your app's sign-in and gates.

Browser extension

Comment on any site without installing anything on it. Start Loupe from the toolbar or the right-click menu. The extension captures the visible tab through the browser.

How it works

From a pin to a shipped change.

01

Pin a comment

A reviewer clicks an element on the live app and writes a title and a description. Loupe captures a screenshot, the element's HTML, its computed styles and an anchor. You can also drag a region to screenshot or record it, or drop a free note anywhere on the page.

02

Store

The comment saves to your backend: the Node API or your Laravel app. Screenshots and recordings upload as separate files, and the comment keeps their URLs. With no backend, comments stay in the browser's local storage.

03

Triage

Every comment starts in Queue. Move it through To Do, In Progress, In Review and Resolved on the dashboard, and set its priority and change type.

04

Ship with Claude

Claude Code reads the comment over MCP, with the screenshot as an image, the element's HTML and its styles. It proposes the changed HTML and CSS back to the dashboard and moves the comment to In Review. A person reviews the change and resolves it.

Get started

Pick your starting point.

Each guide solves one task, from installing the widget to routing tickets through Loupe Hub. New to Loupe? Read the complete guide first.

Start here

New to Loupe? Follow a tutorial end to end on your own machine.

Pin your first comment locally Route a ticket between two projects

Add Loupe to your app

Install with npm Add a script tag Run the local server Upgrade Loupe

Laravel

Install in Laravel Control who can use Loupe

Give and act on feedback

Use the widget Use the browser extension Connect Claude Code

Loupe Hub

Manage organizations and projects Route tickets between apps Verify Hub webhooks Self-host Loupe Hub

Reference

SDK options Node server MCP tools Loupe Hub

Explanation

Architecture How Loupe Hub works Authentication and privacy
FAQ

FAQ

What is Loupe?

Loupe is an open-source visual-feedback tool. You embed its widget in your web app, and signed-in reviewers pin comments to elements, attach screenshots or short recordings, and discuss them in threads. Claude Code reads the feedback over MCP.

How do comments survive a redeploy?

Each comment stores a fingerprint of its element: test id, CSS path, XPath, text and attributes. On load, Loupe tries a unique test id or id first, then a unique CSS path rooted at a stable id, then scores candidates by weighted similarity. A pin that scores below 0.5 is marked as moved instead of being attached to the wrong element.

Which stages does a comment move through?

Five: Queue, To Do, In Progress, In Review and Resolved. New comments start in Queue. The MCP tools tell an agent to stop at In Review when a change is ready, so that a person reviews and resolves it. The legacy statuses open and done map to Queue and Resolved.

How does Loupe connect to Claude Code?

Through MCP. The Node MCP server (@loupekit/mcp) has 19 tools, including list_comments, get_comment, update_status, propose_change and create_pr_for_thread. The Laravel package has a built-in MCP server with 4 tools: list-comments, get-comment, propose-change and update-status.

What is Loupe Hub?

Loupe Hub groups projects into organizations and routes tickets between them. A project can send each new comment from a member of its organization to another project in the same organization or to a signed webhook. When the receiving app changes the ticket's status or replies, Hub relays the update back to the sender.

Is Loupe free and open source?

Yes. Loupe is free, and its source is public on GitHub. The SDK (@loupekit/sdk), the MCP server (@loupekit/mcp), the shared package (@loupekit/shared) and the Laravel package (loupekit/laravel) are published under the MIT license.