Skip to content

v1.4.0 — Live Browser-to-Claude Code Bridge

Choose a tag to compare

View all tags
@HeiCg HeiCg released this 05 Mar 17:31
· 8 commits to main since this release
v1.4.0
d5b012b

Highlights

Live browser-to-Claude Code bridge — Select a component, type what you want changed, and Claude Code acts on it instantly. No copy-paste, no context switching.

Claude Code Integration

  • watch_for_grab MCP tool — Blocks until the user sends context from the browser. Claude Code calls it, user selects element + types prompt, tool resolves with full component context + instruction. Call in a loop for continuous interaction.
  • Sidecar HTTP server in stdio mode — Browser can POST context even when Claude Code connects via stdio.
  • SSE real-time status — Prompt overlay shows green dot when Claude Code is listening, red when disconnected.
  • Smart buttons — "Send to Claude Code" when agent connected, "Send (queued)" when MCP enabled but no agent, "Copy with Context" as fallback.

Quick Setup

// ~/.claude.json
{ "mcpServers": { "svelte-grab": { "command": "npx", "args": ["svelte-grab-mcp", "--stdio"] } } }
<SvelteDevKit enableMcp />

In Claude Code: "use watch_for_grab to listen for my selections"

react-grab Feature Parity

  • Animation freezing — Pauses CSS animations/transitions during selection for stable captures
  • Pseudo-state preservation — Freezes :hover/:focus states so you can grab transient UI
  • Point-sampling drag selection — elementsFromPoint() grid instead of naive querySelectorAll
  • CSS selector generation — 3-tier strategy for element reacquisition
  • History persistence — sessionStorage with byte-size trimming
  • Prompt mode — Inline overlay for typing instructions on selected elements

Agent Providers

  • CursorProvider — cursor-agent CLI with streaming JSON
  • CopilotProvider — copilot CLI with --silent --allow-all
  • CodexProvider — @openai/codex-sdk with thread API
  • connectToRelay() — Browser-side remote handler registration

CLI

  • svelte-grab add <provider> — Add agent provider to config
  • svelte-grab remove <provider> — Remove provider
  • svelte-grab configure — Interactive configuration
  • Config file system (svelte-grab.config.json)

New Utility Modules

parse-activation-key, safe-polygon, copy-content (multi-format clipboard), action-cycle, element-visibility, confirmation-focus-manager, log-intro

Full changelog: CHANGELOG.md

Assets 2
Loading