@loupekit/mcp 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/index.ts +1 -1
- package/package.json +4 -3
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @loupekit/mcp
|
|
2
|
+
|
|
3
|
+
**Model Context Protocol (MCP) server that hands [Loupe](https://github.com/mohamed-ashraf-elsaed/loupe)
|
|
4
|
+
comments to Claude Code as an actionable, fully-contextualized backlog.**
|
|
5
|
+
|
|
6
|
+
Product managers pin visual feedback on the live product with the
|
|
7
|
+
[Loupe SDK](https://www.npmjs.com/package/@loupekit/sdk) or browser extension. This MCP
|
|
8
|
+
server lets **Claude Code read that feedback**, open each comment with everything needed to
|
|
9
|
+
make the change — the request, the target element's HTML, its computed styles, and a
|
|
10
|
+
screenshot — and flow the status back when the work is done.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## What Claude gets
|
|
15
|
+
|
|
16
|
+
Each comment arrives as a ready-to-act package: the natural-language request, the page URL,
|
|
17
|
+
the target element (stable id / CSS path), its outer HTML, a curated slice of computed
|
|
18
|
+
styles, and a screenshot URL. No more "the header looks off somewhere" — Claude knows the
|
|
19
|
+
element, its state, and the page.
|
|
20
|
+
|
|
21
|
+
## Tools
|
|
22
|
+
|
|
23
|
+
| Tool | Description |
|
|
24
|
+
| --------------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
25
|
+
| `list_comments(status?, url?)` | List comments, optionally filtered by status (`open` / `in_progress` / `done`) or page URL. |
|
|
26
|
+
| `get_comment(id)` | The full Claude-ready package for one comment: request + element HTML + computed styles + screenshot URL. |
|
|
27
|
+
| `update_status(id, status)` | Move a comment across the workflow (`open` → `in_progress` → `done`) so triage state stays in sync. |
|
|
28
|
+
|
|
29
|
+
## Install
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm i -g @loupekit/mcp # exposes the `loupe-mcp` binary
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> Also mirrored to **GitHub Packages** as `@mohamed-ashraf-elsaed/mcp`. To install from there,
|
|
36
|
+
> add `@mohamed-ashraf-elsaed:registry=https://npm.pkg.github.com` to your `.npmrc`.
|
|
37
|
+
|
|
38
|
+
## Configure Claude Code
|
|
39
|
+
|
|
40
|
+
Add Loupe to your MCP servers (e.g. in `.mcp.json` or via `claude mcp add`):
|
|
41
|
+
|
|
42
|
+
```json
|
|
43
|
+
{
|
|
44
|
+
"mcpServers": {
|
|
45
|
+
"loupe": {
|
|
46
|
+
"command": "loupe-mcp",
|
|
47
|
+
"env": {
|
|
48
|
+
"LOUPE_API": "https://loupe.yourbackend.com",
|
|
49
|
+
"LOUPE_PROJECT_KEY": "pk_live_yourkey",
|
|
50
|
+
"LOUPE_ADMIN_KEY": "sk_live_yoursecret"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Then ask Claude Code: _"List the open Loupe comments and fix the first one."_
|
|
58
|
+
|
|
59
|
+
## Environment variables
|
|
60
|
+
|
|
61
|
+
| Variable | Default | Description |
|
|
62
|
+
| ------------------- | ------------------------- | -------------------------------------------------------------------- |
|
|
63
|
+
| `LOUPE_API` | `http://localhost:8787` | Base URL of the Loupe backend API. |
|
|
64
|
+
| `LOUPE_PROJECT_KEY` | `pk_demo_acme` | The project whose comments to expose. |
|
|
65
|
+
| `LOUPE_ADMIN_KEY` | _(empty)_ | The project secret — authenticates the server as admin (`X-Loupe-Admin`). Required against a real backend. |
|
|
66
|
+
|
|
67
|
+
## Transport
|
|
68
|
+
|
|
69
|
+
Runs over **stdio** using the official
|
|
70
|
+
[`@modelcontextprotocol/sdk`](https://www.npmjs.com/package/@modelcontextprotocol/sdk).
|
|
71
|
+
Node 24+ runs the TypeScript entry directly (native type-stripping) — no build step.
|
|
72
|
+
|
|
73
|
+
## Related packages
|
|
74
|
+
|
|
75
|
+
- [`@loupekit/sdk`](https://www.npmjs.com/package/@loupekit/sdk) — the embeddable widget that
|
|
76
|
+
captures the feedback.
|
|
77
|
+
- [`@loupekit/shared`](https://www.npmjs.com/package/@loupekit/shared) — the canonical types.
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
|
|
81
|
+
MIT © [Mohamed Ashraf Elsaed](https://github.com/mohamed-ashraf-elsaed)
|
package/index.ts
CHANGED
|
@@ -86,7 +86,7 @@ export async function updateStatus({ id, status }: { id: string; status: string
|
|
|
86
86
|
return wrap(`#${id} → ${status}`);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
const server = new McpServer({ name: "loupe", version: "0.
|
|
89
|
+
const server = new McpServer({ name: "loupe", version: "0.2.0" });
|
|
90
90
|
server.tool(
|
|
91
91
|
"list_comments",
|
|
92
92
|
"List Loupe product-feedback comments for the project as a task backlog. Use this to see what a PM has flagged, then work through the items.",
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@loupekit/mcp",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "MCP server that exposes Loupe comments to Claude Code as an actionable backlog.",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "MCP server that exposes Loupe comments to Claude Code as an actionable, fully-contextualized backlog.",
|
|
5
|
+
"keywords": ["loupe", "mcp", "model-context-protocol", "claude", "claude-code", "visual-feedback", "product-management", "ai"],
|
|
5
6
|
"license": "MIT",
|
|
6
7
|
"repository": { "type": "git", "url": "https://github.com/mohamed-ashraf-elsaed/loupe.git", "directory": "packages/mcp" },
|
|
7
8
|
"homepage": "https://mohamed-ashraf-elsaed.github.io/loupe/",
|
|
@@ -14,7 +15,7 @@
|
|
|
14
15
|
"test:client": "node test-client.ts"
|
|
15
16
|
},
|
|
16
17
|
"dependencies": {
|
|
17
|
-
"@loupekit/shared": "^0.
|
|
18
|
+
"@loupekit/shared": "^0.2.0",
|
|
18
19
|
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
19
20
|
"zod": "^3.24.1"
|
|
20
21
|
}
|