Click the element. Paste the context. Let your AI fix the right thing.
The agent-agnostic frontend element picker for VS Code.
Turn any element in the Integrated Browser into clean, agent-readable HTML and CSS context with a single click.
Built at TinySuite
Pinpoint comes from TinySuite, the same team behind TinySearch. We built it for our own frontend and agent workflows, kept reaching for it, and decided it was too useful to keep private, so we open-sourced it.
Your AI can read the code. It cannot see the element you are pointing at.
Pinpoint closes that gap. Pick an element in the live page and it captures the exact selector, markup, dimensions, matched and inherited CSS, resolved values, and CSS variables — plus a screenshot of the element itself. It writes everything to a small Markdown report, screenshot included, and puts an @.pinpoint/… mention on your clipboard.
Paste it into whichever agent you're already running — GitHub Copilot Chat, Cline, Roo Code, Continue, opencode, Claude Code, Codex CLI. Pinpoint is a plain VS Code extension, not a forked editor, so it installs right alongside the one you use instead of asking you to switch. That's it.
Instead of this:
The spacing is wrong on that card. No, the other card. The one under the weather summary. I think the class has "bottom" in it…
Do this:
- Click the Pinpoint icon in the Integrated Browser toolbar.
- Hover and click the broken element.
- Paste into your AI chat and say what you want changed.
@.pinpoint/weather-summary.md make this card stack cleanly on mobile
The agent gets the evidence it needs without a screenshot scavenger hunt, a wall of prompt text, or a guess at which component you meant.
| Context | Why your agent needs it |
|---|---|
| CSS selector and full DOM path | Finds the right element and traces it back to the source |
| Page URL and element dimensions | Understands where the bug appears and at what rendered size |
| Outer HTML | Sees the real rendered structure, classes, attributes, and content |
| Matched CSS rules | Knows which authored styles actually target the element |
| Inherited CSS | Finds typography, color, and layout coming from ancestors |
| Resolved values | Sees what the browser computed, without hundreds of default properties |
| CSS variables | Connects var(--token) references to their live values |
| Screenshot | Shows what the element actually looks like, not just its markup |
Reports are readable Markdown, not raw DevTools noise, and live inside the workspace so sandboxed coding agents can access them. The screenshot is saved alongside the report and embedded in it, so it's there even if your paste target only takes text.
Install Pinpoint: Copy Frontend Context for AI from the VS Code Marketplace, or run:
code --install-extension marcellm01.tinysuite-pinpointClone the repository, then run the installer from its root.
macOS and Linux:
./install.shWindows PowerShell:
powershell -ExecutionPolicy Bypass -File .\install.ps1The script packages the extension with vsce and installs the resulting .vsix. Installation requires Node.js (npx) and the code CLI on your PATH. Reload VS Code after installation.
- In VS Code, run Browser: Open Integrated Browser and load your app.
- Click the inspect icon in the browser tab's title bar.
- Hover over the page to preview selectors and dimensions.
- Click an element. Pinpoint creates a report such as
.pinpoint/weather-summary.mdplus a matching screenshot, and copies the report's@mention. - Paste into any agent that can read files in your workspace — Copilot Chat, Cline, Roo Code, Continue, opencode, Claude Code, Codex CLI, or otherwise — the mention links straight to the report, screenshot included.
- Keep clicking to capture more elements, or press Esc to stop.
Each click creates a cleanly named report and screenshot pair. Captures older than 24 hours are removed automatically, and the .pinpoint/ directory ignores its own contents so reports never pollute your commits.
Note
Some agents' @ file pickers do not autocomplete gitignored paths (including Codex). Paste the mention anyway. The path arrives as plain text and the agent can still read the file.
- Agent-agnostic. Ships as a standard VS Code extension, not a forked editor, so it installs next to whatever you already run — Copilot Chat, Cline, Roo Code, Continue, opencode, Claude Code, Codex CLI. No per-chat integration; if the agent can read your workspace, Pinpoint works with it.
- Prompt-efficient. Rich DOM and CSS context stays in an attached file instead of flooding the conversation.
- Safe picking. Pinpoint intercepts the click, so selecting a link, submit button, or delete button does not activate it.
- Local by design. Pinpoint itself makes no network requests. Captures stay in your workspace and clipboard.
- Low-noise output. Universal resets and unchanged browser defaults are filtered out.
- Fast cleanup. Reports expire automatically after one day.
- Best-effort screenshots. The screenshot is rendered from the live DOM, not a real browser screenshot API — video,
<canvas>, and cross-origin images without CORS headers may render blank, and very large elements skip the screenshot entirely. The rest of the capture is unaffected either way.
- No telemetry or accounts. Pinpoint does not collect usage data and does not require a sign-in.
- No network requests. The extension does not send captured content anywhere. Rendering the screenshot may cause the page itself to re-fetch its own already-displayed images and fonts (subject to the browser's normal cache) so they can be embedded in the image — nothing leaves the page's own security boundary, and nothing is sent by Pinpoint.
- User initiated. Pinpoint attaches VS Code's JavaScript debugger only after you click its inspect icon, injects the picker, and disconnects immediately.
- Local output. Reports and screenshots are written to
.pinpoint/in your workspace, and the report's@mention is copied to your clipboard. - Vendored screenshot renderer. The in-page rendering code is a vendored, unmodified copy of the open-source modern-screenshot library (MIT) — see THIRD_PARTY_NOTICES.md. It is bundled with the extension; nothing is fetched at install or run time.
- Sensitive content stays your responsibility. A report can contain text, attributes, URLs, and styles rendered by the selected element, and the screenshot can contain anything visibly rendered on the page. Review captures before sharing them outside your machine.
Read the security policy for vulnerability reporting and support guide when something is not working.
Integrated Browser
│
│ click an element
▼
Pinpoint captures live DOM + CSS
│
│ writes a local Markdown report
▼
.pinpoint/element-name.md
│
│ copies @.pinpoint/element-name.md
▼
Your AI chat
VS Code does not expose the Integrated Browser's page DOM through its public extension API. Pinpoint briefly attaches VS Code's JavaScript debugger, injects an isolated picker, and disconnects immediately. The picker uses a closed shadow DOM so the page cannot style its overlay, and capture-phase listeners so your click never reaches the page.
- VS Code 1.109 or newer
- The built-in Integrated Browser, not the legacy Simple Browser webview
- A loaded web page in the active Integrated Browser tab
- Cross-origin stylesheets follow the browser's security rules, so rules the page itself cannot inspect may be unavailable to Pinpoint
If Pinpoint saves you from explaining “the other div” one more time, star the repo and share it with someone building frontends with AI.
Found a bug or have an idea? Open an issue.
MIT © 2026 TinySuite