Guide April 9, 2026 5 min read

How to Send Browser Element Context to Claude Code

If you use Claude Code for frontend work, you've probably hit this wall: you see a bug on a live page, open DevTools, and then spend the next few minutes manually copying HTML structure, CSS selectors, and computed styles into your AI chat. This guide shows a faster way — using Clasp-it and MCP to send the full context in one click.

The Problem with Manual Copy-Paste

Browser DevTools is powerful, but it wasn't built for AI-assisted workflows. When you want Claude Code to fix a layout bug or update a component's styles, you need to give it context — the actual HTML structure, what CSS is being applied, what the selector is, and ideally what errors showed up in the console.

Doing this manually means:

Right-click → Inspect → copy the outer HTML
Open Computed tab → screenshot or copy relevant styles
Switch to Console → copy any relevant errors
Paste all of it into Claude Code with a description of the problem
Wait for the fix, then manually apply it to your source files

Each step breaks your focus. And you repeat it for every element you want to fix.

What Clasp-it Does Instead

Clasp-it is a Chrome extension that pairs with an MCP server. When you click an element, it captures everything Claude Code needs and makes it available via MCP — the Model Context Protocol that AI editors use to read external context.

What gets captured in one click:

HTML structure — the element's outer HTML and its immediate parent
CSS selector — the most specific unique selector for the element
Computed styles — the final styles actually applied by the browser
React props — if the element is part of a React component (Pro)
Console logs — any errors or warnings in the browser console (Pro)
Network requests — recent API calls and their status (Pro)
Screenshot — a visual snapshot of the element in context (Pro)

Setup: Two Minutes

Step 1 — Install the Chrome extension

Install Clasp-it from the Chrome Web Store. Sign up with your email and you'll get a free API key automatically.

Step 2 — Add the MCP server to Claude Code

Run this in your terminal:

claude mcp add --scope user --transport http clasp-it https://claspit.dev/mcp --header "Authorization: Bearer YOUR_API_KEY"

Replace YOUR_API_KEY with the key shown in your extension settings. This registers Clasp-it as a permanent MCP server — you only need to do this once.

Step 3 — Pick an element

Click the Clasp-it icon in your toolbar to activate the picker. Hover over any element on any page — you'll see it highlight. Click it. A small dialog appears where you type your instruction: "make this button larger", "fix the spacing between these items", "why is this text overflowing?".

Hit send. The pick is stored on the server and associated with your API key.

Step 4 — Tell Claude Code to fix it

Switch to Claude Code and type:

fix all recent picks using clasp-it

Claude Code calls the MCP tool, reads the full context you captured, locates the relevant files in your codebase, and applies the changes. You can also target a specific pick by ID if you want to fix one thing at a time.

Picking Multiple Elements at Once

You can pick as many elements as you want before switching to Claude Code. Each pick is stored separately with its own ID. When you tell Claude to "fix all recent picks", it processes them in sequence — reading the HTML, CSS, and your instruction for each one, then editing your source files.

This is particularly useful when you're implementing a design review: go through the page, pick everything that looks wrong, then let Claude fix the whole batch in one go.

Checking Pick Status

The extension sidebar shows the status of every pick: not started, in progress, or completed. Claude Code automatically updates the status as it works, so you can see exactly what's been fixed and what's still pending.

Try it free

10 picks per day on the free plan. No credit card required.

Add to Chrome

Common Questions

Does it work on any website?

Yes. Clasp-it works on any page you can open in Chrome, including localhost, staging environments, and production sites.

What if the element doesn't have a unique selector?

Clasp-it generates the most specific selector it can, using IDs, class names, and structural position. For React apps with dynamic class names (like CSS Modules or Tailwind JIT), it also captures the component name and props to help Claude identify the right file.

Does Claude Code need special permissions?

No. The MCP server is hosted at claspit.dev/mcp. Claude Code connects to it over HTTPS using your API key. There's no local process to run and no port to open.