Pinpoint

Click the bug. Paste the context. Let your AI fix the right thing.

Turn any element in VS Code's Integrated Browser into clean, agent-readable
HTML and CSS context with a single click.

Pinpoint selecting an element in VS Code's Integrated Browser and pasting its context into an AI chat

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. It writes everything to a small Markdown report and puts an @.pinpoint/… mention on your clipboard.

Paste it into your AI chat. That's it.

Stop describing. Start pointing.

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.

What one click captures

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

Reports are readable Markdown, not raw DevTools noise, and live inside the workspace so sandboxed coding agents can access them.

Install

Install Pinpoint: Copy Frontend Context for AI from the VS Code Marketplace, or run:

code --install-extension marcellm01.tinysuite-pinpoint

Install from source

Clone the repository, then run the installer from its root.

macOS and Linux:

./install.sh

Windows PowerShell:

powershell -ExecutionPolicy Bypass -File .\install.ps1

The 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.

Use it in 10 seconds

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.md and copies its @ mention.
Paste into any AI chat that can read files in your workspace.
Keep clicking to capture more elements, or press Esc to stop.

Each click creates a cleanly named report. 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.

Built for the agent loop

Agent-agnostic. 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.

Security and privacy

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.
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 are written to .pinpoint/ in your workspace and their @ mentions are copied to your clipboard.
Sensitive content stays your responsibility. A report can contain text, attributes, URLs, and styles rendered by the selected element. Review captures before sharing them outside your machine.

Read the security policy for vulnerability reporting and support guide when something is not working.

How it works

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.

Requirements and limits

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

Help Pinpoint grow

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.

Pinpoint: Copy Frontend Context for AI

MarcellM01