MCP Integration

MCP Integration

Because comments live in a database, an MCP server turns them into something Claude Code can act on directly — with the full context needed to make the change.

Configure Claude Code

{
  "mcpServers": {
    "loupe": {
      "command": "node",
      "args": ["/absolute/path/to/loupe/packages/mcp/index.ts"],
      "env": {
        "LOUPE_API": "http://localhost:8787",
        "LOUPE_PROJECT_KEY": "pk_demo_acme",
        "LOUPE_ADMIN_KEY": "<admin key from npm run seed>"
      }
    }
  }
}

Tools

Tool	Purpose
list_comments(status?, url?)	The backlog — open feedback as tasks
get_comment(id)	Full context: request, page, target element HTML, computed styles, screenshot URL
update_status(id, status)	Mark in_progress / done — closes the loop back to the PM

The workflow

Open the repo in Claude Code and say:

"List the open Loupe comments and work through them."

Claude calls list_comments, then get_comment for each — receiving the exact element, its HTML and styles, and a screenshot — makes the change, and calls update_status. The PM sees it move to Done on the dashboard.

Sequence

sequenceDiagram
  actor Dev as Developer
  participant Claude as Claude Code
  participant MCP as @loupekit/mcp
  participant API as @loupekit/server
  Dev->>Claude: "work through Loupe comments"
  Claude->>MCP: list_comments
  MCP->>API: GET /v1/comments (admin)
  API-->>Claude: backlog
  Claude->>MCP: get_comment(id)
  MCP-->>Claude: request + HTML + styles + screenshot URL
  Claude->>Claude: make the change
  Claude->>MCP: update_status(done)

Loading