@hiraoku/react-grab-cursor
v0.0.88
Published
[Experimental Fork] Cursor CLI provider for React Grab
Downloads
102
Maintainers
s.hiraokuReadme
@hiraoku/react-grab-cursor
Note: This is an experimental fork of React Grab for testing and verification purposes. For production use, please refer to the original repository.
Cursor agent provider for React Grab. Requires running a local server that interfaces with the Cursor Agent CLI.
Installation
npm install @hiraoku/react-grab-cursor
# or
pnpm add @hiraoku/react-grab-cursor
# or
bun add @hiraoku/react-grab-cursor
# or
yarn add @hiraoku/react-grab-cursorServer Setup
The server runs on port 5567 by default.
Quick Start (CLI)
Start the server in the background before running your dev server:
npx @hiraoku/react-grab-cursor@latest && pnpm run devThe server will run as a detached background process. Note: Stopping your dev server (Ctrl+C) won't stop the React Grab server. To stop it:
pkill -f "react-grab.*server"Recommended: Config File (Automatic Lifecycle)
For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:
Vite
// vite.config.ts
import { startServer } from "@hiraoku/react-grab-cursor/server";
if (process.env.NODE_ENV === "development") {
startServer();
}Next.js
// next.config.ts
import { startServer } from "@hiraoku/react-grab-cursor/server";
if (process.env.NODE_ENV === "development") {
startServer();
}Client Usage
Script Tag
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<script src="//unpkg.com/@hiraoku/react-grab-cursor/dist/client.global.js"></script>Next.js
Using the Script component in your 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/@hiraoku/react-grab-cursor/dist/client.global.js"
strategy="lazyOnload"
/>
</>
)}
</head>
<body>{children}</body>
</html>
);
}ES Module
import { attachAgent } from "@hiraoku/react-grab-cursor/client";
attachAgent();How It Works
┌─────────────────┐ HTTP ┌─────────────────┐ stdin ┌─────────────────┐
│ │ localhost:5567 │ │ │ │
│ React Grab │ ──────────────► │ Server │ ─────────────► │ cursor-agent │
│ (Browser) │ ◄────────────── │ (Node.js) │ ◄───────────── │ (CLI) │
│ │ SSE │ │ stdout │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Client Server Agent- React Grab sends the selected element context to the server via HTTP POST
- Server receives the request and spawns the
cursor-agentCLI process - cursor-agent processes the request and streams JSON responses to stdout
- Server relays status updates to the client via Server-Sent Events (SSE)