Chrome Extension + MCP Server

Pick any element.
Fix it with Claude.

Click any element on any webpage. Clasp It captures the HTML, CSS, and context — Claude Code reads it and makes the edit.

Add to Chrome — it's free See setup →

How it works

1

Pick an element

Click the Clasp It icon, then click any element on any webpage. A prompt box appears.

2

Describe the change

Type what you want — "make this button bigger", "fix the spacing", "change to primary style".

3

Claude fixes it

Switch to Claude Code and say "fix my recent picks". It reads the context and edits your code.

Two-minute setup

One extension, one terminal command. That's it.

1

Install the Chrome extension

Add Clasp It from the Chrome Web Store. Sign up with your email to get a free API key.

2

Connect to Claude Code

Run once in your terminal — your API key is shown in the extension settings.

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

3

Start picking

Click any element, type your instruction, hit send. Then tell Claude Code: "fix all recent picks using clasp-it".

Simple pricing

Free to start. Upgrade when you need more.

Free

$0

10 picks per day, always free.

  • DOM & selector
  • Computed styles
  • 10 picks / day
  • Screenshot
  • Console logs
  • Network requests
  • React props

Pro

$8 / month

Unlimited picks + full context capture.

  • Everything in Free
  • Unlimited picks
  • Screenshot
  • Console logs
  • Network requests
  • React props