AgentLens is a tool that empowers AI development assistants to "see" real-world UI defects. It captures visual context via a browser extension and synchronizes it in real-time to your AI (like Cursor, Claude) through the MCP (Model Context Protocol), enabling a "Annotate to Fix" workflow.
No local compilation required. Start using it immediately:
- Download this repository and load
packages/extension/distin Chrome viachrome://extensions(Developer Mode).
Add the following configuration to your Claude Desktop or Cursor settings:
{
"mcpServers": {
"agentlens": {
"command": "npx",
"args": ["-y", "@p2k0/agentlens-mcp"]
}
}
}We have built-in a Visual Playground (apps/example) in the project, which you can use directly to experience the full AgentLens + MCP workflow:
-
Start the Playground: Run in the project root:
pnpm dev
Visit the online demo https://agentlens-example.vercel.app or locally at http://localhost:3000, and you will see a demo page containing preset UI issues.
-
Start the Trial:
- Ensure your AI editor (Cursor/Claude) has MCP configured.
- Limit the Playground page and open the AgentLens extension.
- Circle any element on the page and add comments (e.g., "This button color is wrong").
- Go back to the editor and send a command to AI: "Fix the issues I just annotated on the page".
- Experience the magic of AI automatically reading visual contexts and accurately fixing code!
- 🎯 Intuitive Annotation: Circle UI issues just like commenting in Figma.
- 🤖 Native MCP: Seamless synchronization with AI assistants without manual copy-pasting.
- 📸 Visual Enhancement: AI can directly see the DOM and snapshot when the issue occurs.
- ⚡ Auto-Fix: AI automatically locates source code and generates fix PRs.
If you want to run the full environment locally or perform secondary development:
pnpm install
pnpm run build
# Start MCP Sidecar
cd packages/mcp && pnpm run sidecarThis project is licensed under the Apache License 2.0.