DOM Lens
Copy elements from any website as context for
Cursor,
Claude,
OpenCode,
etc
Activate
Hold ⌘C
By default coding agents cannot access elements on any website. DOM Lens fixes this - works on React, Vue, Svelte, or any framework. Just point and click to provide context!
Agent
Which one?
You
make the button bigger!
With
DOM Lens
:
• Install once as a Chrome extension - works on all websites
• Hold ⌘C and click to grab any element
• React apps get component stack; others get markup, styles, and text
• Use with any tool: Cursor, Claude Code, OpenCode
Structured Output
DOM Lens provides structured, markdown-formatted output that AI agents can easily parse. React apps get component stack traces; other frameworks get markup, styles, and text.
Loading...
Install
The easiest way: install the Chrome extension above. It works on all websites without any code changes.
For development: you can also add DOM Lens directly to your app with a script tag:
<script
src="//unpkg.com/dom-lens/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
></script>
Or integrate with your build tool:
Next.js (App Router)
Add this inside of your app/layout.tsx:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/dom-lens/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
data-enabled="true"
/>
)}
</head>
<body>{children}</body>
</html>
);
}