mohamed-ashraf-elsaed/loupe

Loupe is an open-source visual feedback tool. You pin comments to elements of a live web page, and an AI agent such as Claude Code picks them up over MCP (Model Context Protocol, the standard that lets an agent call external tools).
Contents
- What you can do
- Choose how to install
- Try it in five minutes
- Packages
- Documentation
- Contributing
- Author
- License
What you can do
- **Pin feedback where it belongs.** Comment on a single element, drag a region, or leave a free note on the page. Pins re-anchor after a redeploy: Loupe finds the same element again, even when its markup changes.
- **Capture what you see.** Attach a screenshot or a short screen recording of a region. Elements marked with data-loupe-redact are left out of every screenshot. Screen recordings capture the real pixels, redacted elements included.
- **Discuss in threads.** Reply under each comment, @mention teammates, and react with 👍 🎉 👀 🙏 ❤️ 🚀.
- **Triage on a five-stage board.** Move comments through Queue, To Do, In Progress, In Review and Resolved.
- **Hand the backlog to an agent.** The @loupekit/mcp server gives Claude Code 19 tools, including list_comments, get_comment, propose_change and update_status. The Laravel package ships its own MCP server with those 4 core tools when the optional laravel/mcp package is installed (php artisan mcp:start loupe).
- **Run it inside Laravel.** The loupekit/laravel package stores comments in your database, uses your authentication and gates, and serves the board on your routes.
- **Route tickets between apps.** Loupe Hub, a separate server you host, sends a comment from one project to another in the same organization (a group of projects in Hub), and syncs status changes and replies both ways.
Choose how to install
| Integration | Use it when | Guide |
|---|---|---|
| Script tag | You want the widget on any page without a build step. | Embed Loupe with a script tag |
| npm package | Your app uses a bundler: React, Vue, or any single-page app. | Install Loupe from npm |
| Laravel | Your app is built on Laravel 11, 12 or 13. | Install Loupe in a Laravel app |
| Browser extension | You want to comment on a site you cannot change. | Use the browser extension |
| MCP clients | You want Claude Code, or another MCP client, to work through the comments. | Connect MCP clients |
| Local server and dashboard | You want the Node API and the Kanban board (columns that comment cards move across) on your machine. | Run the local server |
| Loupe Hub | You want to route tickets between several apps. | Self-host Loupe Hub |
Try it in five minutes
This quick start runs the local server, leaves one comment on the demo page, and shows it on the board.
Prerequisites
- **Node 24.** The local server runs its TypeScript files directly with node index.ts, which needs Node 24. Run node --version. You should see v24 followed by a minor version.
- **npm**, which comes with Node.
- **git**, to clone the repository.
Steps
1. Clone the repository and move into it:
Run every later command from this folder.
2. Install the workspace dependencies:
You should see npm finish with an added ... packages summary.
3. Build the packages:
You should see the command finish with no line that starts with npm error.
4. Create the demo project: