Point. Describe. Ship.
Chrome extension for visual feedback, video direction, and QA assertions on any web page. Click any element, describe what needs to change, and get structured annotation data that routes directly to your AI coding agent via MCP — or copy it to your clipboard.
npm install
npm run buildThen load dist/ into Chrome:
- Go to
chrome://extensions - Enable Developer mode (top right)
- Click Load unpacked → select the
dist/folder
Lens ships with an MCP server that lets any AI coding agent in VS Code read your annotations, reply, and resolve them — all through the standard Model Context Protocol.
Zero config. Open this project in VS Code. The .vscode/mcp.json file auto-registers the server. Your AI sees the lens_* tools immediately.
Already configured via .claude/settings.json when you open this project. If you want it globally:
{
"mcpServers": {
"lens": {
"command": "npx",
"args": ["tsx", "src/mcp-bridge/server.ts"],
"cwd": "/path/to/lens"
}
}
}Add to ~/.claude/settings.json.
Add to your extension's MCP config (check each extension's docs for the settings file location):
{
"mcpServers": {
"lens": {
"command": "npx",
"args": ["tsx", "src/mcp-bridge/server.ts"],
"cwd": "/path/to/lens"
}
}
}Add to .cursor/mcp.json in your project root:
{
"mcpServers": {
"lens": {
"command": "npx",
"args": ["tsx", "src/mcp-bridge/server.ts"],
"cwd": "/path/to/lens"
}
}
}Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"lens": {
"command": "npx",
"args": ["tsx", "src/mcp-bridge/server.ts"],
"cwd": "/path/to/lens"
}
}
}Once connected, your AI agent has these tools:
| Tool | Description |
|---|---|
lens_get_pending |
Get all pending annotations (optionally filter by project_slug) |
lens_get_session |
Get a session by ID or URL |
lens_acknowledge |
Mark annotation as seen |
lens_resolve |
Mark annotation as fixed (with optional message) |
lens_dismiss |
Dismiss annotation |
lens_reply |
Reply to an annotation thread |
When the AI resolves or replies, the Chrome extension updates in real time via SSE.
Click any element to report visual bugs. Lens captures the DOM selector, bounding box, computed styles, and React/Vue/Angular component tree automatically. You describe what's wrong; Lens packages the context.
Build cinematic sequences by selecting elements and assigning camera actions (zoom, pan, highlight, crossfade). Each annotation becomes a sequence step with timing, easing, and optional narration. Export as a Remotion composition manifest.
Click elements and define what should be true about them (exists, visible, text equals, style matches, layout within bounds). Export as a Playwright test file with real selectors.
- Activate Lens — Injects the overlay onto the current page
- Open Panel — Opens the side panel for annotation management and export
- Mode Buttons — Switch between Feedback, Video Director, and QA Assertion
| Key | Action |
|---|---|
⌘⇧L |
Toggle Lens on/off |
F |
Feedback mode |
V |
Video Director mode |
Q |
QA Assertion mode |
C |
Copy all annotations to clipboard |
H |
Hide/show markers |
Esc |
Deactivate Lens |
1-9 |
Jump to annotation by number |
- View all annotations in the current session
- Set project context (slug, name, repo) for MCP routing
- Export as Markdown, JSON, Playwright tests, or Remotion manifest
- Copy all feedback to clipboard
- Manage annotation status
Press C while Lens is active, or use the side panel's Copy button:
# 🔍 Lens Feedback — My App
**Page:** https://example.com/editor
**Date:** Mar 19, 2026
**Items:** 3
## 🔴 Blocking (1)
- **[Fix]** Button overlaps the sidebar on mobile
`<button>` → `div.editor-toolbar > button:nth-child(3)`
Component: EditorToolbar → ActionButton
┌─────────────────────────────────────────────────────┐
│ Chrome Extension (Manifest V3) │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌───────────┐ │
│ │ Content Script│ │ Side Panel │ │ Popup │ │
│ │ • Selection │ │ • Ann. list │ │ • Toggle │ │
│ │ • Highlight │ │ • Export │ │ • Mode │ │
│ │ • Annotation │ │ • Project │ │ • Panel │ │
│ │ popup │ │ context │ │ opener │ │
│ └──────┬───────┘ └──────┬───────┘ └─────┬─────┘ │
│ └─────────┬───────┴────────────────┘ │
│ ┌────────┴────────┐ │
│ │ Service Worker │ │
│ │ • IndexedDB │ │
│ │ • Session mgmt │ │
│ │ • MCP relay │ │
│ └────────┬────────┘ │
└───────────────────┼─────────────────────────────────┘
│
┌────────┴────────┐
│ MCP Server │
│ (stdio + :4848) │
│ • MCP tools │
│ • SSE stream │
└────────┬────────┘
│
┌────────┴────────┐
│ AI Agent │
│ (any MCP client)│
└─────────────────┘
src/
├── background/
│ ├── service-worker.ts # Session persistence, messaging, tab capture
│ └── mcp-server.ts # In-extension MCP tool handler
├── content/
│ ├── content.ts # Main content script entry
│ ├── selector-engine.ts # DOM targeting, CSS/XPath generation
│ ├── annotation-popup.ts # On-page annotation form
│ └── styles.ts # Injected CSS
├── sidepanel/
│ ├── index.html
│ ├── sidepanel.ts # Annotation list, export, project context
│ └── sidepanel.css
├── popup/
│ ├── index.html
│ ├── popup.ts # Mode toggle, side panel opener
│ └── popup.css
├── shared/
│ ├── raf-schema.ts # Annotation format types
│ ├── constants.ts # Design tokens, message types
│ ├── serializers.ts # Markdown, JSON, Remotion, Playwright exporters
│ └── storage.ts # IndexedDB wrapper
├── mcp-bridge/
│ └── server.ts # MCP stdio server + HTTP listener
└── icons/
└── generate-icons.ts # SVG → PNG icon generator
npm run dev # Watch mode
npm run typecheck # Type check
npm run build # Production buildAfter building, reload the extension in chrome://extensions.
MIT
Made with ❤ by RenderDraw
