Grab Agent
Star

Grab. Prompt. Transform.

Select any UI element in your browser, describe the change you want, and watch your local codebase update instantly.

⌘+Cselect
→
Enterprompt
→
done ✓
Get Startednpm

Quick Setup

1

Install the package

npm install grab-agent
2

Configure your project

Server Configuration

// next.config.ts
import { main } from "grab-agent/server";

if (process.env.NODE_ENV === "development") {
  main();
}

export default {
  // your config
};

Client Integration

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {process.env.NODE_ENV === "development" && (
          <>
            <Script
              src="//unpkg.com/react-grab/dist/index.global.js"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/grab-agent/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
3

Start using

Run your dev server and hold ⌘+C to select elements. Press Enter to prompt.