I’m excited to announce solid-grab — a developer tool that makes working with AI coding agents feel magical. Hold Alt, hover over any element in your SolidJS app, and click to instantly copy its full context to your clipboard.

The Inspiration

If you’ve used react-grab by Aiden Bai, you know how game-changing it is. Being able to point at a UI element and say “Claude, fix this button” with complete context — the source file, line number, component hierarchy — transforms how you work with AI coding assistants.

I wanted that same experience for SolidJS projects. So I built it.

Built in One Day with Claude Code

Here’s the wild part: I built solid-grab in a single day using Claude Code. No joke.

The challenge was interesting: React Grab works by hooking into React’s Fiber tree at runtime. But Solid doesn’t have a Fiber tree — components compile away into direct DOM operations. So I needed a completely different approach.

Through pair programming with Claude, we figured out a build-time solution:

1. A Vite plugin that runs before vite-plugin-solid and injects data-solid-source and data-solid-component attributes via AST transformation
2. A runtime overlay that reads those attributes and builds the component tree from the DOM
3. A clean API that copies formatted context to your clipboard

The whole thing — plugin, runtime, tests, docs — came together in about 8 hours of active coding with Claude Code. It handles edge cases, has TypeScript types throughout, and even includes an agent bridge for WebSocket communication.

How It Works

npm install solid-grab --save-dev

Add it to your Vite config:

// vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import solidGrab from "solid-grab/vite";

export default defineConfig({
  plugins: [
    solidGrab(),   // must come BEFORE vite-plugin-solid
    solid(),
  ],
});

That’s it. No code changes needed. The plugin auto-injects the runtime in dev mode.

Then just:

1. Hold Alt (or Option on Mac)
2. Hover over any element
3. Click to copy the full context

You’ll get something like:

--- solid-grab context ---

Element: <button class="btn btn-primary">
Source:  src/components/Counter.tsx:24:8

Component tree (innermost → outermost):
  <Counter /> → src/components/Counter.tsx:12:1
  <App /> → src/App.tsx:8:1

HTML:
<button class="btn btn-primary">Count: 5</button>

--- end solid-grab context ---

Paste that into Claude, Cursor, ChatGPT — any AI coding agent — and they’ll know exactly what you’re talking about.

Why This Matters

AI coding agents are incredible, but they need context. Saying “fix the button” isn’t enough. You need to tell them:

• Which button
• Where it is in the code
• What component it’s in
• What its current state looks like

Traditionally, you’d:

1. Inspect element in DevTools
2. Search your codebase for class names
3. Find the right component
4. Copy file paths and line numbers
5. Paste HTML
6. Finally describe your issue

solid-grab collapses all of that into a single Alt+click. The context flows from your UI directly to your AI agent.

What’s Next

solid-grab is live on npm and ready to use. The source is on GitHub (MIT licensed).

I’m planning a @solid-grab/claude-code bridge package that will send context directly to Claude Code over WebSocket, making the loop even tighter. If you’re interested in that or have other ideas, open an issue!

Try It

npm install solid-grab --save-dev

Then hold Alt and click anything in your SolidJS app. It’s pretty magical.

---

Built in one day with Claude Code. That’s the power of AI-assisted development.