Overview

Product managers pin visual feedback on the live product with the Loupe SDK or browser extension. This MCP server lets Claude Code read that feedback, open each comment with everything needed to make the change, and flow the status back when the work is done — closing the loop.

What Claude gets

Each comment arrives as a ready-to-act package: the natural-language request, the page URL, the target element (stable id / CSS path), its outer HTML, a curated slice of computed styles, and a screenshot URL. No more "the header looks off somewhere" — Claude knows the element, its state, and the page.

Tools

| Tool | Description | | --- | --- | | list_comments(status?, url?) | List comments, optionally filtered by status (open / in_progress / done) or page URL. | | get_comment(id) | The full Claude-ready package for one comment: request + element HTML + computed styles + screenshot URL. | | update_status(id, status) | Move a comment across the workflow (open → in_progress → done) so triage state stays in sync. |

Install

npm i -g @loupekit/mcp     # exposes the `loupe-mcp` binary

Also mirrored to GitHub Packages as @mohamed-ashraf-elsaed/mcp — add @mohamed-ashraf-elsaed:registry=https://npm.pkg.github.com to your .npmrc to install from there.

Configure Claude Code

Add Loupe to your MCP servers (e.g. in .mcp.json or via claude mcp add):

{
  "mcpServers": {
    "loupe": {
      "command": "loupe-mcp",
      "env": {
        "LOUPE_API": "https://loupe.yourbackend.com",
        "LOUPE_PROJECT_KEY": "pk_live_yourkey",
        "LOUPE_ADMIN_KEY": "sk_live_yoursecret"
      }
    }
  }
}

Then ask Claude Code: "List the open Loupe comments and fix the first one."

Environment variables

| Variable | Default | Description | | --- | --- | --- | | LOUPE_API | http://localhost:8787 | Base URL of the Loupe backend API. | | LOUPE_PROJECT_KEY | pk_demo_acme | The project whose comments to expose. | | LOUPE_ADMIN_KEY | (empty) | The project secret — authenticates the server as admin (X-Loupe-Admin). Required against a real backend. |

Where the comments come from

The dashboard is the human side of the same backlog Claude reads:

Transport

Runs over stdio using the official @modelcontextprotocol/sdk. The published package ships compiled JS (dist/index.js), so npm i -g @loupekit/mcp exposes a working loupe-mcp binary. From a source checkout it also runs directly with node index.ts (Node 24+ native type-stripping).

Related packages

| Package | Description | | --- | --- | | @loupekit/sdk | The embeddable widget that captures the feedback. | | @loupekit/shared | The canonical TypeScript types shared across the platform. |

License

MIT © Mohamed Ashraf Elsaed