用途

Loupe 是一个开源的可嵌入视觉反馈工具，用于在实时网页上固定评论，并将这些反馈交给 AI 智能体（如 Claude Code）通过 MCP（Model Context Protocol，一种让智能体调用外部工具的标准）进行处理。它旨在将视觉反馈转化为可操作的任务列表。

主要能力

在正确位置固定反馈：可以对单个元素评论、拖拽一个区域，或在页面上留下自由备注。重新部署后，Loupe 会重新找到同一元素，即使其标记发生变化，评论也能重新锚定。
捕获所见内容：可以附加某个区域的截图或简短屏幕录制。标记了 data-loupe-redact 的元素会被排除在每张截图之外。屏幕录制会捕获真实像素，包括被遮蔽的元素。
线程讨论：可以在每条评论下回复、@提及队友，并使用 👍 🎉 👀 🙏 ❤️ 🚀 进行回应。
五阶段看板分诊：评论可以在 Queue、To Do、In Progress、In Review 和 Resolved 五个阶段之间移动。
将待办交给智能体：@loupekit/mcp 服务器为 Claude Code 提供 19 个工具，包括 list_comments、get_comment、propose_change 和 update_status。Laravel 包在安装可选的 laravel/mcp 包后自带 MCP 服务器，提供这 4 个核心工具（php artisan mcp:start loupe）。
在 Laravel 内运行：loupekit/laravel 包将评论存储在数据库中，使用你的认证和门禁，并在你的路由上提供看板。
在应用间路由工单：Loupe Hub 是一个单独托管的服务器，可将评论从一个项目发送到同一组织（Hub 中的一组项目）中的另一个项目，并双向同步状态变更和回复。

此快速开始会运行本地服务器，在演示页面上留下一条评论，并在看板上显示它。

前置条件：

Node 24。本地服务器直接使用 node index.ts 运行其 TypeScript 文件，这需要 Node 24。运行 node --version，应看到 v24 后跟一个小版本号。
npm，随 Node 一起提供。
git，用于克隆仓库。

步骤：

克隆仓库并进入目录：
```
git clone https://github.com/mohamed-ashraf-elsaed/loupe.git
cd loupe
```
后续所有命令都从此文件夹运行。
安装工作区依赖：
```
npm install
```
应看到 npm 以 added ... packages 摘要结束。
构建包：
```
npm run build
```
应看到命令完成，且没有以 npm error 开头的行。
创建演示项目：
```
npm run seed
```
应看到 Seeded project: pk_demo_acme，后跟一行 admin key。admin key 是项目密钥。仪表板会在其地址中要求它。其默认值为 sk_demo_acme_0f3b9c。
启动服务器：
```
npm start
```
应看到：[loupe] API + static on http://localhost:8787 (dashboard: /dashboard/ · demo: /demo/)。保持此终端运行。
在浏览器中打开 http://localhost:8787/demo/。应看到 Q3 Performance Overview 页面，右侧打开 Loupe 面板，并有一个简短导览。点击 Next 完成导览，然后点击 Done。
留下评论：在面板的 Home 标签上，点击 ✛ Pin feedback on this page。点击邀请表单中的 Send invite 按钮。输入标题和描述，然后点击 Comment。应看到 Send invite 按钮上出现编号为 1 的图钉。
在新浏览器标签中打开看板：http://localhost:8787/dashboard/?key=<ADMIN_KEY>，将 <ADMIN_KEY> 替换为步骤 4 中 npm run seed 打印的 admin key。应看到看板包含五列：Queue、To Do、In Progress、In Review 和 Resolved。你的评论是 Queue 列中的一张卡片。

Loupe 由 Mohamed Ashraf Elsaed 创建和维护。